Merge pull request #303 from navikt/refactor/ART-07-access

Fetch Access and Bigquery

Author: MengZhuNAV

components/dataproducts/access/datasetAccess.tsx

@@ -3,10 +3,8 @@ import { useState } from 'react'
 import { isAfter, parseISO, format } from 'date-fns'
 import {
   useRevokeAccessMutation,
-  useAccessRequestsForDatasetQuery,
   useApproveAccessRequestMutation,
   useDenyAccessRequestMutation,
-  useDatasetAccessQuery,
 } from '../../../lib/schema/graphql'
 import {
   Alert,
@@ -17,11 +15,11 @@ import {
   Table,
   Textarea,
 } from '@navikt/ds-react'
-import { GET_DATASET_ACCESS } from '../../../lib/queries/access/datasetAccess'
 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
@@ -239,54 +237,36 @@ 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 datasetAccessQuery = useDatasetAccessQuery({
-    variables: { id },
-    ssr: true,
-  })
+  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 (datasetAccessQuery.error)
-    return <ErrorMessage error={datasetAccessQuery.error} />
+  if (getDataset.error)
+    return <ErrorMessage error={getDataset.error} />
   if (
-    datasetAccessQuery.loading ||
-    !datasetAccessQuery.data?.dataset.access
+    getDataset.loading ||
+    !getDataset?.dataset?.access
   )
     return <div />
 
-  const access = datasetAccessQuery.data.dataset.access
+  const access = getDataset.dataset.access
 
   const approveRequest = async (requestID: string) => {
     try {
       await approveAccessRequest({
         variables: { id: requestID },
         refetchQueries: [
-          {
-            query: GET_DATASET_ACCESS,
-            variables: {
-              id,
-            },
-          },
-          {
-            query: GET_ACCESS_REQUESTS_FOR_DATASET,
-            variables: {
-              datasetID: id,
-            },
-          },
         ],
       })
     } catch (e: any) {
@@ -299,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) {
@@ -319,12 +293,6 @@ const DatasetAccess = ({ id }: AccessListProps) => {
       await revokeAccess({
         variables: { id: a.id },
         refetchQueries: [
-          {
-            query: GET_DATASET_ACCESS,
-            variables: {
-              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

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import {
   BigQueryType,
-  useGcpGetColumnsQuery,
 } from '../../../lib/schema/graphql'
+import { useFetchBQcolumns } from '../../../lib/rest/bigquery'
 
 export type PIITagType =
   | 'PII_DirekteIdentifiserende'
@@ -53,13 +53,7 @@ export const useColumnTags = (
     new Map<string, Map<string, boolean>>()
   )
 
-  const columnsQuery = useGcpGetColumnsQuery({
-    variables: {
-      projectID: projectID,
-      datasetID: datasetID,
-      tableID: tableID,
-    },
-  })
+  const fetchColumns = useFetchBQcolumns(projectID, datasetID, tableID)
 
   var tableKey = buildTableKey(projectID, datasetID, tableID)
 
@@ -69,9 +63,9 @@ export const useColumnTags = (
       datasetID &&
       tableID &&
       !tagsMap.has(tableKey) &&
-      !columnsQuery.error &&
-      !columnsQuery.loading &&
-      columnsQuery.data
+      !fetchColumns.error &&
+      !fetchColumns.loading &&
+      fetchColumns.bqColumns
     ) {
       var newTagsMap = new Map<string, Map<string, PIITagType> | undefined>(
         tagsMap
@@ -81,7 +75,7 @@ export const useColumnTags = (
 
       var newPseudoColumnsMap = new Map<string, Map<string, boolean>>(pseudoColumnsMap)
       var pseudoColumns = new Map<string, boolean>()
-      columnsQuery.data.gcpGetColumns.forEach((it) =>{
+      fetchColumns.bqColumns.forEach((it) =>{
         tags.set(
           it.name,
           (!!tagsFromQuery[it.name] &&
@@ -126,11 +120,11 @@ export const useColumnTags = (
 
   return {
     columns:
-      !columnsQuery.error && !columnsQuery.loading
-        ? (columnsQuery.data?.gcpGetColumns as ColumnType[])
+      !fetchColumns.error && !fetchColumns.loading
+        ? (fetchColumns.bqColumns as ColumnType[])
         : undefined,
-    loading: columnsQuery.loading,
-    error: columnsQuery.error,
+    loading: fetchColumns.loading,
+    error: fetchColumns.error,
     tags: tagsMap.get(tableKey),
     pseudoColumns: pseudoColumnsMap.get(tableKey) || new Map<string, boolean>(),
     annotateColumn: annotateColumn,

components/dataproducts/dataset/access/datasetAccessForUser.tsx

@@ -1,19 +1,18 @@
 import {
   BigQueryType,
-  GcpGetTablesQuery,
-  useGcpGetTablesLazyQuery,
 } from '../../../lib/schema/graphql'
 
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 import { Loader } from '@navikt/ds-react'
 import { ExpandFilled, NextFilled } from '@navikt/ds-icons'
 import Tabell from '../../lib/icons/tabell'
+import { useFetchBQTables } from '../../../lib/rest/bigquery';
 
-const DataproductTableIconMap: Record<BigQueryType, () => JSX.Element> = {
-  materialized_view: Tabell,
-  table: Tabell,
-  view: Tabell,
+const DataproductTableIconMap: Record<string, () => JSX.Element> = {
+  "materialized_view": Tabell,
+  "table": Tabell,
+  "view": Tabell,
 }
 
 export interface DataproductSourceDatasetProps {
@@ -27,11 +26,7 @@ export const Dataset = ({
   datasetID,
   active,
 }: DataproductSourceDatasetProps) => {
-  const [getTables, { data, loading, called }] = useGcpGetTablesLazyQuery({
-    variables: { projectID, datasetID },
-  })
-
-  if (active && !called) getTables()
+  const fetchBQTables= useFetchBQTables(projectID, datasetID)
 
   const loadingPlaceholder = (
     <TreeItem
@@ -48,14 +43,14 @@ export const Dataset = ({
     />
   )
 
-  const datasetContents = (contents: GcpGetTablesQuery['gcpGetTables']) =>
-    contents?.map(({ name, type }) => (
+  const datasetContents = (contents: any) =>
+    contents?.map((it: any) => (
       <TreeItem
         className="MuiTreeView-leaf"
-        slots={{ endIcon: DataproductTableIconMap[type]}}
-        itemId={`${projectID}/${datasetID}/${name}`}
-        key={`${projectID}/${datasetID}/${name}`}
-        label={name}
+        slots={{ endIcon: DataproductTableIconMap[it.type as string]}}
+        itemId={`${projectID}/${datasetID}/${it.name}`}
+        key={`${projectID}/${datasetID}/${it.name}`}
+        label={it.name}
       />
     ))
 
@@ -65,10 +60,10 @@ export const Dataset = ({
       itemId={`${projectID}/${datasetID}`}
       label={datasetID}
     >
-      {loading
+      {fetchBQTables.loading
         ? loadingPlaceholder
-        : data?.gcpGetTables?.length
-        ? datasetContents(data?.gcpGetTables)
+        : fetchBQTables.bqTables?.length
+        ? datasetContents(fetchBQTables?.bqTables)
         : emptyPlaceholder}
     </TreeItem>
   )