access requests requery updated

Author: MengZhuNAV

components/dataproducts/access/datasetAccess.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react'
 import { isAfter, parseISO, format } from 'date-fns'
 import {
   useRevokeAccessMutation,
-  useAccessRequestsForDatasetQuery,
   useApproveAccessRequestMutation,
   useDenyAccessRequestMutation,
 } from '../../../lib/schema/graphql'
@@ -17,10 +16,10 @@ import {
   Textarea,
 } from '@navikt/ds-react'
 import { ExternalLink } from '@navikt/ds-icons'
-import { GET_ACCESS_REQUESTS_FOR_DATASET } from '../../../lib/queries/accessRequest/accessRequestsForDataset'
 import { nb } from 'date-fns/locale'
 import ErrorMessage from '../../lib/error'
 import { useGetDataset } from '../../../lib/rest/dataproducts'
+import { useFetchAccessRequestsForDataset } from '../../../lib/rest/access'
 
 interface AccessEntry {
   subject: string
@@ -238,23 +237,20 @@ const DatasetAccess = ({ id }: AccessListProps) => {
   const [revokeAccess] = useRevokeAccessMutation()
   const [approveAccessRequest] = useApproveAccessRequestMutation()
   const [denyAccessRequest] = useDenyAccessRequestMutation()
-  const datasetAccessRequestsQuery = useAccessRequestsForDatasetQuery({
-    variables: { datasetID: id },
-    ssr: true,
-  })
+  const fetchAccessRequestsForDataset = useFetchAccessRequestsForDataset(id)
 
   const getDataset = useGetDataset(id)
 
-  if (datasetAccessRequestsQuery.error)
-    return <ErrorMessage error={datasetAccessRequestsQuery.error} />
+  if (fetchAccessRequestsForDataset.error)
+    return <ErrorMessage error={fetchAccessRequestsForDataset.error} />
   if (
-    datasetAccessRequestsQuery.loading ||
-    !datasetAccessRequestsQuery.data?.accessRequestsForDataset
+    fetchAccessRequestsForDataset.loading ||
+    !fetchAccessRequestsForDataset.data?.accessRequests
   )
     return <div />
 
   const datasetAccessRequests =
-    datasetAccessRequestsQuery.data?.accessRequestsForDataset
+  fetchAccessRequestsForDataset.data.accessRequests as any[]
 
   if (getDataset.error)
     return <ErrorMessage error={getDataset.error} />
@@ -271,12 +267,6 @@ const DatasetAccess = ({ id }: AccessListProps) => {
       await approveAccessRequest({
         variables: { id: requestID },
         refetchQueries: [
-          {
-            query: GET_ACCESS_REQUESTS_FOR_DATASET,
-            variables: {
-              datasetID: id,
-            },
-          },
         ],
       })
     } catch (e: any) {
@@ -289,12 +279,6 @@ const DatasetAccess = ({ id }: AccessListProps) => {
       await denyAccessRequest({
         variables: { id: requestID },
         refetchQueries: [
-          {
-            query: GET_ACCESS_REQUESTS_FOR_DATASET,
-            variables: {
-              datasetID: id,
-            },
-          },
         ],
       })
     } catch (e: any) {

components/dataproducts/accessRequest/accessRequestsListForOwner.tsx

@@ -1,23 +1,21 @@
 import * as React from 'react'
 import { useState } from 'react'
 import {
-  AccessRequestsForDatasetQuery,
   useApproveAccessRequestMutation,
 } from '../../../lib/schema/graphql'
 import { Alert, Button, Table } from '@navikt/ds-react'
 import { useRouter } from 'next/router'
 
 interface AccessListProps {
-  accessQuery: AccessRequestsForDatasetQuery | undefined
+  accessRequests: any[]
 }
 
-const AccessRequestsListForOwner = ({ accessQuery }: AccessListProps) => {
-  const access = accessQuery?.accessRequestsForDataset
+const AccessRequestsListForOwner = ({ accessRequests }: AccessListProps) => {
   const [approveAccessRequest] = useApproveAccessRequestMutation()
   const [isDenying, setIsDenying] = useState<Array<string>>([])
 
   const [formError, setFormError] = useState('')
-  if (access?.length === 0) {
+  if (accessRequests?.length === 0) {
     return <>Ingen har forespurt tilgang til produktet</>
   }
 
@@ -52,7 +50,7 @@ const AccessRequestsListForOwner = ({ accessQuery }: AccessListProps) => {
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {access?.map((a, i) => (
+          {accessRequests?.map((a, i) => (
             <Table.Row key={i}>
               <Table.DataCell align="right">{a.subject}</Table.DataCell>
               <Table.DataCell>{a.expires}</Table.DataCell>

components/dataproducts/dataset/access/datasetAccessForOwner.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { fetchAccessRequestUrl, fetchTemplate } from "./restApi";
+
+export const fetchAccessRequests = async (datasetId: string) => {
+    const url = fetchAccessRequestUrl(datasetId);
+    return fetchTemplate(url);
+}
+
+export const useFetchAccessRequestsForDataset = (datasetId: string)=>{
+    const [data, setData] = useState<any>(undefined)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState(null)
+
+
+    useEffect(()=>{
+        if(!datasetId) return
+        fetchAccessRequests(datasetId).then((res)=> res.json())
+        .then((data)=>
+        {
+            setError(null)
+            setData(data)
+        })
+        .catch((err)=>{
+            setError(err)
+            setData(undefined)            
+        }).finally(()=>{
+            setLoading(false)
+        })
+    }, [datasetId])
+
+    return {data, loading, error}
+}

components/dataproducts/dataset/access/datasetAccessForUser.tsx

@@ -15,6 +15,7 @@ export const getProductAreasUrl = () => `${apiUrl()}/productareas`
 export const getProductAreaUrl = (id: string) => `${apiUrl()}/productareas/${id}`
 export const fetchUserDataUrl = () => `${apiUrl()}/userData`
 export const fetchKeywordsUrl = () => `${apiUrl()}/keywords`
+export const fetchAccessRequestUrl = (datasetId: string) => `${apiUrl()}/accessRequests?datasetId=${datasetId}`
 export const searchTeamKatalogenUrl = (gcpGroups?: string[]) => {
   const parameters = gcpGroups?.length ? gcpGroups.map(group => `gcpGroups=${encodeURIComponent(group)}`).join('&') : ''
   const query = parameters ? `?${parameters}` : ''