console: if GDC source is only source, sidebar is showing "no data available" [DSF-178]

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8217
GitOrigin-RevId: f046a262b5a8966ed2142c011fb4f2163baa8cb0

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/GDCTree.tsx

@@ -4,6 +4,7 @@ import { Key } from 'antd/lib/table/interface';
 import React from 'react';
 import { useTreeData } from './hooks/useTreeData';
 import '../../../../features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaTree/index.css';
+import { GDCTreeData } from './types';
 
 const checkForGDCRoute = () => window.location.pathname.includes('data/v2');
 
@@ -26,20 +27,17 @@ const getCurrentActiveKeys = () => {
 
 type Props = {
   onSelect: (value: Key[]) => void;
+  treeData: GDCTreeData;
 };
 
-/* 
-  This component is still very much in development and will be changed once we have an API that tells us about the hierarchy of a GDC source
-  Until then, this component is more or less a POC/experminatal in nature and tests for its accompaniying story have not been included for this reason.
-  If you wish to test out this component, go to the settings > feature flag and enable "Experimental features for GDC"
-*/
-
-export const GDCTree = (props: Props) => {
+export const GDCTree = ({ onSelect, treeData }: Props) => {
   const isGDCRouteActive = checkForGDCRoute();
 
   const activeKey = isGDCRouteActive ? getCurrentActiveKeys() : [];
-  const { data: gdcDatabases } = useTreeData();
-  if (!gdcDatabases || gdcDatabases.length === 0) return null;
+
+  // unclear if we still need this check since this component won't be rendered
+  // in the parent if "treeData" is empty
+  if (!treeData || treeData.length === 0) return null;
 
   return (
     <Tree
@@ -48,8 +46,8 @@ export const GDCTree = (props: Props) => {
       showIcon
       defaultExpandedKeys={activeKey} // there are only two variations here - DB level or table level. middle level selections cannot be accessed
       defaultSelectedKeys={activeKey}
-      onSelect={props.onSelect}
-      treeData={gdcDatabases}
+      onSelect={onSelect}
+      treeData={treeData}
     />
   );
 };

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/index.ts

@@ -1,2 +1,3 @@
 export { GDCTree } from './GDCTree';
 export { useGDCTreeItemClick } from './hooks/useGDCTreeItemClick';
+export { useTreeData } from './hooks/useTreeData';

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/types.ts

@@ -1,5 +1,5 @@
 import { Table } from '../../../../features/hasura-metadata-types';
-
+import { DataNode } from 'antd/lib/tree';
 /*
  A GDC Source can be any user defined DB that can be added during run-time. We can only know a few properties during build time, such as name and kind
  which will be String, but for the tables - A GDC source can have any valid JSON definition for the `tables[i].table` property. The closest we can type is
@@ -12,3 +12,5 @@ export type GDCSource = {
     table: Table;
   }[];
 };
+
+export type GDCTreeData = DataNode[];

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/TreeView.tsx

@@ -21,6 +21,8 @@ import {
 } from '../../Common/utils/routesUtils';
 import GqlCompatibilityWarning from '../../Common/GqlCompatibilityWarning/GqlCompatibilityWarning';
 import { GDCTree } from './GDCTree/GDCTree';
+import { useTreeData } from './GDCTree';
+import { DataNode } from 'antd/lib/tree';
 
 type SourceItemsTypes =
   | 'database'
@@ -408,7 +410,11 @@ const TreeView: React.FC<TreeViewProps> = ({
     onDatabaseChange(dataSource);
   };
 
-  if (items.length === 0) {
+  const { data: gdcDatabases } = useTreeData();
+
+  const allDatabases = [...items, ...(gdcDatabases ?? [])];
+
+  if (allDatabases.length === 0) {
     return preLoadState ? (
       <div className={styles.treeNav}>
         <span className={`${styles.title} ${styles.padd_bottom_small}`}>
@@ -453,7 +459,7 @@ const TreeView: React.FC<TreeViewProps> = ({
         />
       ))}
       <div id="tree-container" className="inline-block">
-        <GDCTree onSelect={gdcItemClick} />
+        <GDCTree onSelect={gdcItemClick} treeData={gdcDatabases ?? []} />
       </div>
     </div>
   );