show access in joinable view lists

navikt · Nov 13, 2023 · 7db7aab · 7db7aab
1 parent a60bc22
commit 7db7aab
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 29 deletions.
diff --git a/components/dataProc/joinableViewCard.tsx b/components/dataProc/joinableViewCard.tsx
@@ -0,0 +1,52 @@
+import { Alert, Box, CopyButton, ExpansionCard, Link, Loader, Tooltip } from "@navikt/ds-react"
+import { JoinableView, useJoinableViewQuery } from "../../lib/schema/graphql"
+import { ExternalLink } from "@navikt/ds-icons"
+import LoaderSpinner from "../lib/spinner"
+import { useState } from "react"
+
+interface JoinableViewCardProps {
+    joinableView: JoinableView
+}
+
+export const JoinableViewCardContent = ({ joinableViewId }: { joinableViewId: string }) => {
+    const { data, loading, error } = useJoinableViewQuery({ variables: { id: joinableViewId } })
+    const urlComps = data?.joinableView.bigqueryViewUrls && data?.joinableView.bigqueryViewUrls.length
+        ? data?.joinableView.bigqueryViewUrls[0].split('.') : ["", "", ""]
+    const projectID = urlComps[0]
+    const datasetID = urlComps[1]
+    const bigQueryUrl = `https://console.cloud.google.com/bigquery?d=${datasetID}&p=${projectID}&page=dataset`
+
+    return <div>
+        {loading && <LoaderSpinner />}
+        {error && <Alert variant="error">Klarte ikke hente data om views tilrettelagt for kobling</Alert>}
+        {data && <>
+            <Link href={bigQueryUrl}>{"Åpne BigQuery dataset i Google Cloud Console"}<ExternalLink /></Link>
+            {data?.joinableView.bigqueryViewUrls.map((bqv, index) => <Box key={bqv} padding="1" className="w-[55rem]">
+                {data?.joinableView.accessToViews[index] ? <div className="flex flex-row items-center bg-gray-200">{bqv}<CopyButton copyText={bqv}></CopyButton></div>
+                    : <Tooltip content="Har ikke tilgang til datasettet"><div className="flex flex-row items-center text-gray-200" >{bqv}</div></Tooltip>}
+            </Box>)}
+            {data?.joinableView.expires &&
+                <div className="mt-3 italic">
+                    BigQuery datasettet slettes {data?.joinableView.expires.split("T")[0]}
+                </div>
+            }
+        </>}
+    </div>
+}
+
+export const JoinableViewCard = ({ joinableView }: JoinableViewCardProps) => {
+    const [expanded, setExpanded] = useState(false)
+
+    return <div key={joinableView.id} className="w-[60rem]">
+        <ExpansionCard aria-label="default-demo" onToggle={open => setExpanded(open)}>
+            <ExpansionCard.Header>
+                <ExpansionCard.Title>{`${joinableView?.name} - ${joinableView?.created}`}</ExpansionCard.Title>
+                <ExpansionCard.Description>
+                    <p>Klikk for å vise BigQuery dataset</p></ExpansionCard.Description>
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+                {expanded && <JoinableViewCardContent joinableViewId={joinableView.id} />}
+            </ExpansionCard.Content>
+        </ExpansionCard>
+    </div>
+}
diff --git a/components/dataProc/joinableViewsList.tsx b/components/dataProc/joinableViewsList.tsx
@@ -3,6 +3,7 @@ import { GET_JOINABLEVIEWS } from "../../lib/queries/pseudoView/joinableViews"
 import { useJoinableViewsQuery } from "../../lib/schema/graphql"
 import { ExternalLink } from "@navikt/ds-icons"
 import LoaderSpinner from "../lib/spinner"
+import { JoinableViewCard } from "./joinableViewCard"
 
 export const JoinableViewsList = () => {
     const joinableViews = useJoinableViewsQuery()
@@ -11,32 +12,7 @@ export const JoinableViewsList = () => {
         {joinableViews.error && <Alert variant="error">Kan ikke Hente sammenføybare viewer.</Alert>}
         {joinableViews.data &&
             <div className="flex-col space-y-2">
-                {joinableViews.data.joinableViews?.map(it => {
-                    const urlComps = it.bigqueryViewUrls && it.bigqueryViewUrls.length ? it.bigqueryViewUrls[0].split('.') : ["", "", ""]
-                    const projectID = urlComps[0]
-                    const datasetID = urlComps[1]
-                    const bigQueryUrl = `https://console.cloud.google.com/bigquery?d=${datasetID}&p=${projectID}&page=dataset`
-                    return <div key={it.id} className="w-[60rem]">
-                        <ExpansionCard aria-label="default-demo">
-                            <ExpansionCard.Header>
-                                <ExpansionCard.Title>{`${it?.name} - ${it?.created}`}</ExpansionCard.Title>
-                                <ExpansionCard.Description>
-                                    <p>Klikk for å vise BigQuery dataset</p></ExpansionCard.Description>
-                            </ExpansionCard.Header>
-                            <ExpansionCard.Content>
-                                <Link href={bigQueryUrl}>{"Åpne BigQuery dataset i Google Cloud Console"}<ExternalLink /></Link>
-                                {it.bigqueryViewUrls.map(bqv => <Box key={bqv} padding="1" className="w-[55rem]">
-                                    <div className="flex flex-row items-center bg-gray-200">{bqv}<CopyButton copyText={bqv}></CopyButton></div>
-                                </Box>)}
-                                {it.expires &&
-                                    <div className="mt-3 italic">
-                                        BigQuery datasettet slettes {it.expires.split("T")[0]}
-                                    </div>
-                                }
-                            </ExpansionCard.Content>
-                        </ExpansionCard>
-                    </div>
-                })}
+                {joinableViews.data.joinableViews?.map(it => <JoinableViewCard key={it.id} joinableView={it} />)}
             </div>
         }
     </div>

diff --git a/lib/queries/pseudoView/joinableView.ts b/lib/queries/pseudoView/joinableView.ts
@@ -0,0 +1,13 @@
+import { gql } from 'graphql-tag';
+
+export const GET_JOINABLEVIEWINDETAIL = gql`
+  query JoinableView($id: ID!) {
+    joinableView(id: $id) {
+      name
+      created
+      expires
+      bigqueryViewUrls
+      accessToViews
+    }
+  }
+`;
diff --git a/lib/schema/graphql.ts b/lib/schema/graphql.ts
@@ -290,11 +290,22 @@ export type InsightProduct = {
 export type JoinableView = {
   __typename?: 'JoinableView';
   bigqueryViewUrls: Array<Scalars['String']>;
-  created?: Maybe<Scalars['String']>;
+  created: Scalars['Time'];
   expires?: Maybe<Scalars['Time']>;
   /** id is the id of the joinable view set */
   id: Scalars['ID'];
-  name?: Maybe<Scalars['String']>;
+  name: Scalars['String'];
+};
+
+export type JoinableViewInDetail = {
+  __typename?: 'JoinableViewInDetail';
+  accessToViews: Array<Scalars['Boolean']>;
+  bigqueryViewUrls: Array<Scalars['String']>;
+  created: Scalars['Time'];
+  expires?: Maybe<Scalars['Time']>;
+  /** id is the id of the joinable view set */
+  id: Scalars['ID'];
+  name: Scalars['String'];
 };
 
 /** Keyword represents a keyword used by other dataproducts */
@@ -931,6 +942,8 @@ export type Query = {
   groupStats: Array<GroupStats>;
   /** insightProduct returns the given story. */
   insightProduct: InsightProduct;
+  /** joinableView returns detailed information about a joinableView. */
+  joinableView: JoinableViewInDetail;
   /** joinableViews returns all the joinableViews for the user. */
   joinableViews: Array<JoinableView>;
   /** Keywords returns all keywords, with an optional filter */
@@ -1039,6 +1052,11 @@ export type QueryInsightProductArgs = {
 };
 
 
+export type QueryJoinableViewArgs = {
+  id: Scalars['ID'];
+};
+
+
 export type QueryPollyArgs = {
   q: Scalars['String'];
 };
@@ -1651,10 +1669,17 @@ export type ProductAreasQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ProductAreasQuery = { __typename?: 'Query', productAreas: Array<{ __typename?: 'ProductArea', id: string, name: string, areaType: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string, description: string, owner: { __typename?: 'Owner', group: string } }>, stories: Array<{ __typename?: 'Story', id: string, name: string, created: any, lastModified?: any | null, keywords: Array<string>, owner: { __typename?: 'Owner', group: string, teamkatalogenURL?: string | null } }>, quartoStories: Array<{ __typename?: 'QuartoStory', id: string, name: string, created: any, lastModified?: any | null, keywords: Array<string> }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string, created: any, lastModified?: any | null, keywords: Array<string>, type: string, group: string, teamkatalogenURL?: string | null, link: string }>, teams: Array<{ __typename?: 'Team', id: string, name: string, dataproducts: Array<{ __typename?: 'Dataproduct', id: string, name: string }>, stories: Array<{ __typename?: 'Story', id: string, name: string }>, quartoStories: Array<{ __typename?: 'QuartoStory', id: string, name: string }>, insightProducts: Array<{ __typename?: 'InsightProduct', id: string, name: string }> }> }> };
 
+export type JoinableViewQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type JoinableViewQuery = { __typename?: 'Query', joinableView: { __typename?: 'JoinableViewInDetail', name: string, created: any, expires?: any | null, bigqueryViewUrls: Array<string>, accessToViews: Array<boolean> } };
+
 export type JoinableViewsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type JoinableViewsQuery = { __typename?: 'Query', joinableViews: Array<{ __typename?: 'JoinableView', id: string, name?: string | null, created?: string | null, expires?: any | null, bigqueryViewUrls: Array<string> }> };
+export type JoinableViewsQuery = { __typename?: 'Query', joinableViews: Array<{ __typename?: 'JoinableView', id: string, name: string, created: any, expires?: any | null, bigqueryViewUrls: Array<string> }> };
 
 export type CreateJoinableViewsMutationVariables = Exact<{
   input: NewJoinableViews;
@@ -3386,6 +3411,45 @@ export function useProductAreasLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
 export type ProductAreasQueryHookResult = ReturnType<typeof useProductAreasQuery>;
 export type ProductAreasLazyQueryHookResult = ReturnType<typeof useProductAreasLazyQuery>;
 export type ProductAreasQueryResult = Apollo.QueryResult<ProductAreasQuery, ProductAreasQueryVariables>;
+export const JoinableViewDocument = gql`
+    query JoinableView($id: ID!) {
+  joinableView(id: $id) {
+    name
+    created
+    expires
+    bigqueryViewUrls
+    accessToViews
+  }
+}
+    `;
+
+/**
+ * __useJoinableViewQuery__
+ *
+ * To run a query within a React component, call `useJoinableViewQuery` and pass it any options that fit your needs.
+ * When your component renders, `useJoinableViewQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useJoinableViewQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useJoinableViewQuery(baseOptions: Apollo.QueryHookOptions<JoinableViewQuery, JoinableViewQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<JoinableViewQuery, JoinableViewQueryVariables>(JoinableViewDocument, options);
+      }
+export function useJoinableViewLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<JoinableViewQuery, JoinableViewQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<JoinableViewQuery, JoinableViewQueryVariables>(JoinableViewDocument, options);
+        }
+export type JoinableViewQueryHookResult = ReturnType<typeof useJoinableViewQuery>;
+export type JoinableViewLazyQueryHookResult = ReturnType<typeof useJoinableViewLazyQuery>;
+export type JoinableViewQueryResult = Apollo.QueryResult<JoinableViewQuery, JoinableViewQueryVariables>;
 export const JoinableViewsDocument = gql`
     query JoinableViews {
   joinableViews {