console: fix bug with untrack table option for GDC sources

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8219
GitOrigin-RevId: 104b6b0b2e966931120766ec83496486b21a8abd

frontend/libs/console/legacy-ce/src/lib/features/Data/ManageTable/ManageTable.tsx

@@ -136,7 +136,11 @@ export const ManageTable: React.VFC<ManageTableProps> = (
     <div className="w-full overflow-y-auto bg-gray-50">
       <div className="px-md pt-md mb-xs">
         <Breadcrumbs dataSourceName={dataSourceName} tableName={tableName} />
-        <TableName dataSourceName={dataSourceName} tableName={tableName} />
+        <TableName
+          dataSourceName={dataSourceName}
+          tableName={tableName}
+          table={table}
+        />
         <Tabs
           value={operation}
           onValueChange={_operation => {

frontend/libs/console/legacy-ce/src/lib/features/Data/ManageTable/hooks/useUntrackTable.ts

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import {
+  useInvalidateMetadata,
+  useMetadata,
+} from '../../../hasura-metadata-api';
+import { Table } from '../../../hasura-metadata-types';
+import { useMetadataMigration } from '../../../MetadataAPI';
+
+export const useUntrackTable = (props?: {
+  onSuccess?: () => void;
+  onError?: (err: Error) => void;
+}) => {
+  const { mutate, ...rest } = useMetadataMigration();
+  const invalidateMetadata = useInvalidateMetadata();
+
+  const { onSuccess, onError } = props ?? {};
+
+  const { data: metadataSources } = useMetadata(m => m.metadata.sources);
+
+  const untrackTable = useCallback(
+    ({ dataSourceName, table }: { dataSourceName: string; table: Table }) => {
+      const driver = metadataSources?.find(
+        source => source.name === dataSourceName
+      )?.kind;
+
+      if (!driver) throw Error('Unable to find source in metadata');
+
+      mutate(
+        {
+          query: {
+            type: `${driver}_untrack_table`,
+            args: {
+              table,
+              source: dataSourceName,
+            },
+          },
+        },
+        {
+          onSuccess: () => {
+            invalidateMetadata();
+            onSuccess?.();
+          },
+          onError: err => {
+            onError?.(err);
+          },
+        }
+      );
+    },
+    [metadataSources, mutate, onSuccess, onError]
+  );
+
+  return { untrackTable, ...rest };
+};

frontend/libs/console/legacy-ce/src/lib/features/Data/ManageTable/parts/TableName.tsx

@@ -2,46 +2,91 @@ import { Badge } from '../../../../new-components/Badge';
 import { Button } from '../../../../new-components/Button';
 import { DropdownMenu } from '../../../../new-components/DropdownMenu';
 import React from 'react';
-import { FaChevronDown, FaDatabase } from 'react-icons/fa';
+import { FaChevronDown, FaTable } from 'react-icons/fa';
+import { useUntrackTable } from '../hooks/useUntrackTable';
+import { Table } from '../../../hasura-metadata-types';
+import { hasuraToast } from '../../../../new-components/Toasts';
+import { useAppDispatch } from '../../../../storeHooks';
+import { getRoute } from '../../../../utils/getDataRoute';
+import _push from '../../../../components/Services/Data/push';
+import AceEditor from 'react-ace';
 
 export const TableName: React.VFC<{
   dataSourceName: string;
+  table: Table;
   tableName: string;
-}> = ({ tableName }) => (
-  <div className="flex items-center gap-3 mb-3">
-    <div className="group relative">
-      <div>
-        <DropdownMenu
-          items={[
-            [
-              // TODO: To be implemented after metadata util functions have been added to the metadata library
-              <span className="py-xs text-red-600" onClick={() => {}}>
-                Untrack {tableName}
-              </span>,
-            ],
-          ]}
-        >
-          <div className="flex gap-0.5 items-center">
-            <Button
-              iconPosition="end"
-              icon={
-                <FaChevronDown
-                  size={12}
-                  className="text-gray-400 text-sm transition-transform group-radix-state-open:rotate-180"
-                />
-              }
-            >
-              <div className="flex flex-row items-center ">
-                <FaDatabase className="mr-1.5" size={12} />
-                <span className="text-lg">{tableName}</span>
-              </div>
-            </Button>
+}> = ({ tableName, dataSourceName, table }) => {
+  const dispatch = useAppDispatch();
+  const { untrackTable } = useUntrackTable({
+    onSuccess: () => {
+      hasuraToast({
+        type: 'success',
+        title: 'Successfully untracked table',
+      });
+      dispatch(_push(getRoute().database(dataSourceName)));
+    },
+    onError: err => {
+      hasuraToast({
+        type: 'error',
+        title: 'Error while untracking table',
+        children: (
+          <div className="overflow-hidden">
+            <AceEditor
+              theme="github"
+              setOptions={{
+                maxLines: Infinity,
+                showGutter: false,
+                useWorker: false,
+              }}
+              value={JSON.stringify(err)}
+              readOnly
+            />
           </div>
-        </DropdownMenu>
+        ),
+      });
+    },
+  });
+
+  return (
+    <div className="flex items-center gap-3 mb-3">
+      <div className="group relative">
+        <div>
+          <DropdownMenu
+            items={[
+              [
+                <span
+                  className="py-xs text-red-600"
+                  onClick={() => {
+                    untrackTable({ dataSourceName, table });
+                  }}
+                >
+                  Untrack {tableName}
+                </span>,
+              ],
+            ]}
+          >
+            <div className="flex gap-0.5 items-center">
+              <Button
+                iconPosition="end"
+                icon={
+                  <FaChevronDown
+                    size={12}
+                    className="text-gray-400 text-sm transition-transform group-radix-state-open:rotate-180"
+                  />
+                }
+              >
+                <div className="flex flex-row items-center ">
+                  <FaTable className="mr-1.5" size={12} />
+                  <span className="text-lg">{tableName}</span>
+                </div>
+              </Button>
+            </div>
+          </DropdownMenu>
+        </div>
+      </div>
+      <div>
+        <Badge color="green">Tracked</Badge>
       </div>
     </div>
-    <div>
-      <Badge color="green">Tracked</Badge>
-    </div>
-  </div>
-);
+  );
+};