slett datasett modal

.gitattributes

@@ -0,0 +1 @@
+* text=auto

components/dataproducts/dataset/dataset.tsx

@@ -1,7 +1,7 @@
 import { Heading, Link, Alert, Modal } from "@navikt/ds-react";
 import { isAfter, parseISO } from "date-fns";
 import humanizeDate from "../../../lib/humanizeDate";
-import { NewAccessRequest, SubjectType, UserInfoDetailsQuery } from "../../../lib/schema/graphql";
+import { DataproductQuery, NewAccessRequest, SubjectType, UserInfoDetailsQuery } from "../../../lib/schema/graphql";
 import DatasetTableSchema from "./datasetTableSchema";
 import Explore from "../../../components/dataproducts/explore";
 import BigQueryLogo from "../../lib/icons/bigQueryLogo";
@@ -34,11 +34,12 @@ interface EntryProps {
     dataset: DatasetQuery
     userInfo: UserInfoDetailsQuery['userInfo'] | undefined
     isOwner: boolean
+    product: DataproductQuery | undefined
 }
 
 
 
-const Dataset = ({dataset, userInfo, isOwner}: EntryProps) => {
+const Dataset = ({dataset, userInfo, isOwner, product}: EntryProps) => {
     const accessType = findAccessType(userInfo?.groups, dataset, isOwner)
     const [accessRequested, setAccessRequested] = useState(false);
 
@@ -71,7 +72,7 @@ const Dataset = ({dataset, userInfo, isOwner}: EntryProps) => {
                     </IconBox>
                     {dataset.name}
                 </Heading>
-                {isOwner && <DatasetOwnerMenu />}
+                {isOwner && <DatasetOwnerMenu datasetName={dataset.name} datasetId= {dataset.id} dataproduct = {product}/>}
             </div>
             {dataset.pii 
                 ? <DatasetAlert variant="warning" narrow={true}>Inneholder persondata</DatasetAlert>

components/dataproducts/dataset/datasetOwnerMenu.tsx

@@ -1,27 +1,62 @@
 import { EllipsisCircleH } from "@navikt/ds-icons"
 import { Button } from "@navikt/ds-react"
 import { Divider, Dropdown, DropdownContext } from "@navikt/ds-react-internal"
+import { useRouter } from "next/router"
 import { useState } from "react"
 import styled from "styled-components"
+import { GET_DATAPRODUCT } from "../../../lib/queries/dataproduct/dataproduct"
+import { DataproductQuery, useDeleteDatasetMutation } from "../../../lib/schema/graphql"
+import DeleteModal from "../../lib/deleteModal"
 
 const MenuButton = styled(Button)`
     min-width: unset;
     padding: 0;
     border-radius: 50%;
 `
+interface IDatasetOwnerMenuProps{
+    datasetName: string;
+    datasetId: string;
+    dataproduct: DataproductQuery | undefined;
+}
 
-const DatasetOwnerMenu = () => {
+const DatasetOwnerMenu = ({datasetName, datasetId, dataproduct}: IDatasetOwnerMenuProps) => {
     const [isOpen, setIsOpen] = useState(false)
     const [anchorEl, setAnchorEl] = useState<Element | null>(null)
+    const [showDelete, setShowDelete] = useState(false)
+    const [deleteError, setDeleteError] = useState('')
+    const router= useRouter()
+
 
     const handleMenuButtonClick = (e: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(e.currentTarget)
         setIsOpen(!isOpen)
     }
 
+    const [deleteDataset] = useDeleteDatasetMutation({
+        variables: { id: datasetId },
+        awaitRefetchQueries: true,
+        refetchQueries: [
+            {
+                query: GET_DATAPRODUCT,
+                variables: {
+                  id: dataproduct?.dataproduct.id
+                }
+              },
+            ],
+    })
 
+    const onDelete = async () => {
+        try {
+            await deleteDataset()
+            await router.push(`/dataproduct/${dataproduct?.dataproduct.id}/${dataproduct?.dataproduct.slug}/info`)
+        } catch (e: any) {
+            setDeleteError(e.toString())
+        }
+    }
 
-    return (<DropdownContext.Provider value={{isOpen, setIsOpen, anchorEl, setAnchorEl}}>
+    return (
+    <>
+    <DropdownContext.Provider value={{isOpen, setIsOpen, anchorEl, setAnchorEl}}>
         <MenuButton variant='tertiary' onClick={handleMenuButtonClick}><EllipsisCircleH /></MenuButton>
         <Dropdown.Menu>
             <Dropdown.Menu.GroupedList>
@@ -30,10 +65,12 @@ const DatasetOwnerMenu = () => {
             <Divider />
             <Dropdown.Menu.GroupedList>
                 <Dropdown.Menu.GroupedList.Item>Endre datasett</Dropdown.Menu.GroupedList.Item>
-                <Dropdown.Menu.GroupedList.Item>Slett datasett</Dropdown.Menu.GroupedList.Item>
+                <Dropdown.Menu.GroupedList.Item onClick={()=> setShowDelete(true)}>Slett datasett</Dropdown.Menu.GroupedList.Item>
             </Dropdown.Menu.GroupedList>
         </Dropdown.Menu>
-    </DropdownContext.Provider>)
+    </DropdownContext.Provider>
+    <DeleteModal name = {datasetName} resource = "datasett" error = {deleteError} open = {showDelete} onCancel={()=> setShowDelete(false)} onConfirm = {onDelete}></DeleteModal>
+    </>)
 }
 
 export default DatasetOwnerMenu;

components/lib/deleteModal.tsx

@@ -7,18 +7,20 @@ interface DeleteModalProps {
   onConfirm: () => void
   name: string
   error: string
+  resource: "dataprodukt" | "datasett"
 }
 export const DeleteModal = ({
   open,
   onCancel,
   onConfirm,
   name,
   error,
+  resource
 }: DeleteModalProps) => {
   return (
     <Modal open={open} onClose={onCancel}>
       <Modal.Content className="flex flex-col gap-4">
-        <Heading level="2" size="large">Slette dataprodukt</Heading>
+        <Heading level="2" size="large">Slette {resource}</Heading>
         <p>Er du sikker på at du vil slette {name}?</p>
         <div className="flex flex-row gap-3">
           <Button variant="secondary" onClick={onCancel} >

lib/queries/dataset/deleteDataset.ts

@@ -0,0 +1,7 @@
+import { gql } from 'graphql-tag'
+
+export const DELETE_DATASET = gql`
+  mutation deleteDataset($id: ID!) {
+    deleteDataset(id: $id)
+  }
+`

lib/schema/graphql.ts

@@ -1344,6 +1344,15 @@ export type DatasetQuery = {
   }
 }
 
+export type DeleteDatasetMutationVariables = Exact<{
+  id: Scalars['ID']
+}>
+
+export type DeleteDatasetMutation = {
+  __typename?: 'Mutation'
+  deleteDataset: boolean
+}
+
 export type GroupStatsQueryVariables = Exact<{ [key: string]: never }>
 
 export type GroupStatsQuery = {
@@ -3038,6 +3047,54 @@ export type DatasetQueryResult = Apollo.QueryResult<
   DatasetQuery,
   DatasetQueryVariables
 >
+export const DeleteDatasetDocument = gql`
+  mutation deleteDataset($id: ID!) {
+    deleteDataset(id: $id)
+  }
+`
+export type DeleteDatasetMutationFn = Apollo.MutationFunction<
+  DeleteDatasetMutation,
+  DeleteDatasetMutationVariables
+>
+
+/**
+ * __useDeleteDatasetMutation__
+ *
+ * To run a mutation, you first call `useDeleteDatasetMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteDatasetMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteDatasetMutation, { data, loading, error }] = useDeleteDatasetMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteDatasetMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteDatasetMutation,
+    DeleteDatasetMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    DeleteDatasetMutation,
+    DeleteDatasetMutationVariables
+  >(DeleteDatasetDocument, options)
+}
+export type DeleteDatasetMutationHookResult = ReturnType<
+  typeof useDeleteDatasetMutation
+>
+export type DeleteDatasetMutationResult =
+  Apollo.MutationResult<DeleteDatasetMutation>
+export type DeleteDatasetMutationOptions = Apollo.BaseMutationOptions<
+  DeleteDatasetMutation,
+  DeleteDatasetMutationVariables
+>
 export const GroupStatsDocument = gql`
   query groupStats {
     groupStats {

pages/dataproduct/[id]/[slug]/[[...page]].tsx

@@ -106,7 +106,7 @@ const Dataproduct = (props: DataproductProps) => {
             title: `${dataset.name} (${dataset.datasource.type})`,
             slug: dataset.id,
             component: (
-                <Dataset dataset={dataset} userInfo={userInfo} isOwner={isOwner} />
+                <Dataset dataset={dataset} userInfo={userInfo} isOwner={isOwner} product = {productQuery.data}/>
             )
         })
     });
@@ -157,6 +157,7 @@ const Dataproduct = (props: DataproductProps) => {
                         onConfirm={() => onDelete()}
                         name={product.name}
                         error={deleteError}
+                        resource = "dataprodukt"
                     />
                 </MainPage>
             </Container>

pages/story/[id]/index.tsx

@@ -74,6 +74,7 @@ const StoryPage = () => {
         onConfirm={() => onDelete()}
         name={story.name}
         error={deleteError}
+        resource = "dataprodukt"
       />
       <TokenModal
         open={showToken}