fix: switched from mui TreeView to SimpleTreeView for bq table dropdown after dependeny bump

Author: erikvatt

components/dataproducts/dataset/datasetSourceForm.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react'
-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import {
   FieldErrors,
   FieldValues,
@@ -36,7 +36,13 @@ export const DataproductSourceForm = ({
   const teamProjects = userInfo?.gcpProjects?.filter((project: any) => project.group.email == team)
     .map((group: any) => group.id)
 
-  const handleNodeSelect = (e: any, node: string) => {
+  const handleNodeSelect = (e: any, node: string | null) => {
+    if (node === null) {
+      setValue('bigquery.projectID', undefined)
+      setValue('bigquery.dataset', undefined)
+      setValue('bigquery.table', undefined)
+      return
+    }
     const [projectID, datasetID, tableID] = node.split('/')
     if (projectID && datasetID && tableID) {
       setValue('bigquery.projectID', projectID)
@@ -53,10 +59,10 @@ export const DataproductSourceForm = ({
     <div className="flex flex-col justify-start gap-2">
       <Label>{label}</Label>
       {team ? (
-        <div>
-          <TreeView
-            onNodeSelect={handleNodeSelect}
-            onNodeToggle={(x, n) => setActivePaths(n)}
+        <div className="border-2 p-1">
+          <SimpleTreeView
+            onSelectedItemsChange={handleNodeSelect}
+            onExpandedItemsChange={(x, n) => setActivePaths(n)}
           >
             {teamProjects?.map((projectID: any) => (
             <Project
@@ -65,7 +71,7 @@ export const DataproductSourceForm = ({
             activePaths={activePaths}
             />
             ))}
-          </TreeView>
+          </SimpleTreeView>
           {errors.bigquery && (
             <div className="flex gap-2 navds-error-message navds-label before:content-['•']">
               Velg en tabell eller et view

components/dataproducts/datasource/dataset.tsx

@@ -10,11 +10,11 @@ import { Loader } from '@navikt/ds-react'
 import { ExpandFilled, NextFilled } from '@navikt/ds-icons'
 import Tabell from '../../lib/icons/tabell'
 
-const DataproductTableIconMap: Record<BigQueryType, JSX.Element> = {
-  materialized_view: <Tabell />,
-  table: <Tabell />,
-  view: <Tabell />,
-}
+// const DataproductTableIconMap: Record<BigQueryType, JSX.Element> = {
+//   materialized_view: Tabell,
+//   table: Tabell,
+//   view: Tabell,
+// }
 
 export interface DataproductSourceDatasetProps {
   active: boolean
@@ -35,15 +35,15 @@ export const Dataset = ({
 
   const loadingPlaceholder = (
     <TreeItem
-      endIcon={<Loader />}
-      nodeId={`${projectID}/${datasetID}/loadingPlaceholder`}
+      slots={{ endIcon: Loader}}
+      itemId={`${projectID}/${datasetID}/loadingPlaceholder`}
       label={'laster...'}
     />
   )
 
   const emptyPlaceholder = (
     <TreeItem
-      nodeId={`${projectID}/${datasetID}/emptyPlaceholder`}
+      itemId={`${projectID}/${datasetID}/emptyPlaceholder`}
       label={'ingenting her'}
     />
   )
@@ -52,18 +52,17 @@ export const Dataset = ({
     contents?.map(({ name, type }) => (
       <TreeItem
         className="MuiTreeView-leaf"
-        endIcon={DataproductTableIconMap[type]}
-        nodeId={`${projectID}/${datasetID}/${name}`}
+        slots={{ endIcon: Tabell}}
+        itemId={`${projectID}/${datasetID}/${name}`}
         key={`${projectID}/${datasetID}/${name}`}
         label={name}
       />
     ))
 
   return (
     <TreeItem
-      collapseIcon={<ExpandFilled />}
-      expandIcon={<NextFilled />}
-      nodeId={`${projectID}/${datasetID}`}
+      slots={{ collapseIcon: ExpandFilled, expandIcon: NextFilled}}
+      itemId={`${projectID}/${datasetID}`}
       label={datasetID}
     >
       {loading

components/dataproducts/datasource/project.tsx

@@ -22,24 +22,23 @@ export const Project = ({
 
   const emptyPlaceholder = (
     <TreeItem
-      nodeId={`${projectID}/emptyPlaceholder`}
+      itemId={`${projectID}/emptyPlaceholder`}
       label={'ingen datasett i prosjekt'}
     />
   )
 
   const loadingPlaceholder = (
     <TreeItem
-      endIcon={<Loader />}
-      nodeId={`${projectID}/loadingPlaceholder`}
+      slots={{ endIcon: Loader}}
+      itemId={`${projectID}/loadingPlaceholder`}
       label={'laster...'}
     />
   )
 
   return (
     <TreeItem
-      collapseIcon={<ExpandFilled />}
-      expandIcon={<NextFilled />}
-      nodeId={projectID}
+      slots={{ collapseIcon: ExpandFilled, expandIcon: NextFilled}}
+      itemId={projectID}
       label={projectID}
     >
       {loading

components/stories/newStory.tsx

@@ -13,7 +13,7 @@ import TagsSelector from '../lib/tagsSelector';
 import { UserState } from '../../lib/context';
 import { CREATE_STORY } from '../../lib/queries/story/createStory';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { TreeView } from '@mui/x-tree-view/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { FileTextFillIcon, FolderFillIcon, TrashIcon } from '@navikt/aksel-icons';
 import { UploadFile } from '../../lib/schema/graphql';
 
@@ -211,7 +211,7 @@ export const NewStoryForm = () => {
       return (
         <TreeItem
           key={nodeName}
-          nodeId={nodeName + index}
+          itemId={nodeName + index}
           label={
             <div className="flex flex-row items-center gap-2">
               {isFile ? (
@@ -231,7 +231,6 @@ export const NewStoryForm = () => {
   };
 
   const gcpProjects = userData?.gcpProjects as any[] || []
-  console.log(gcpProjects)
 
   return (
     <div className="mt-8 md:w-[46rem]">
@@ -313,9 +312,9 @@ export const NewStoryForm = () => {
         <input key={inputKey * 2} ref={folderFileInputRef} type="file" className="hidden" webkitdirectory="" directory="" onChange={handleFileUpload} multiple />
         <input key={inputKey * 2 + 1} ref={singleFileInputRef} type="file" className="hidden" onChange={handleFileUpload} multiple />
         {storyFiles.length > 0 && (
-          <TreeView>
+          <SimpleTreeView>
             {renderTree(generateFileTree(storyFiles))}
-          </TreeView>
+          </SimpleTreeView>
         )}
         {backendError && <ErrorMessage error={backendError} />}
         <div className="flex flex-row gap-4 mb-16">