fix (console): submitting GQL table customisation fails to merge correctly for root fields

This is a small continuation of this PR. It got merged before I could get these additional fixes in:

https://github.com/hasura/graphql-engine-mono/pull/6561

This PR addresses:

- Issues correctly merging custom root fields when saving that resulted in saved changes sometimes not saving
- Implements a fix @vijayprasanna13 made to issues with saving custom column names in a slightly refactored version of the same concept.

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6575
Co-authored-by: Vijay Prasanna <11921040+vijayprasanna13@users.noreply.github.com>
GitOrigin-RevId: 161ad46a8c667e022447a89aca057fd7f07379a7

console/src/components/Services/Data/Schema/tableTrackCustomization/utils.ts

@@ -5,6 +5,7 @@ import {
 } from '@/components/Services/Data/Schema/tableTrackCustomization/types';
 import { Driver } from '@/dataSources';
 import { MetadataTableConfig } from '@/features/MetadataAPI';
+import pickBy from 'lodash.pickby';
 
 export const getTrackingTableFormPlaceholders = (
   tableName: string
@@ -32,19 +33,15 @@ export const buildConfigFromFormValues = (
 
   const config: MetadataTableConfig = {};
   // the shape of the form type almost matches the config type
-  const { custom_name, ...remainingValues } = values;
+  const { custom_name, ...customRoots } = values;
 
   if (custom_name) config.custom_name = custom_name;
 
-  Object.entries(remainingValues).forEach(entry => {
-    const [key, value] = entry as [keyof typeof remainingValues, string];
-    if (value) {
-      if (!config.custom_root_fields) {
-        config.custom_root_fields = {};
-      }
-      config.custom_root_fields[key] = value;
-    }
-  });
+  const rootsWithValues = pickBy(customRoots, v => v !== '');
+
+  if (Object.keys(rootsWithValues).length > 0) {
+    config.custom_root_fields = rootsWithValues;
+  }
 
   return config;
 };

console/src/features/ConnectDB/EditConnection.tsx

@@ -76,7 +76,7 @@ export const EditConnection = () => {
     >
       {options => {
         return (
-          <div>
+          <div className="max-w-5xl">
             <InputField type="text" name="name" label="Database Display Name" />
 
             <Select
@@ -92,9 +92,12 @@ export const EditConnection = () => {
             <div className="mt-4">
               <CustomizationForm />
             </div>
-            <Button type="submit" mode="primary" isLoading={submitIsLoading}>
-              Edit Connection
-            </Button>
+            <div className="mt-4">
+              <Button type="submit" mode="primary" isLoading={submitIsLoading}>
+                Edit Connection
+              </Button>
+            </div>
+
             {!!Object(options.formState.errors)?.keys?.length && (
               <div className="mt-6 max-w-xl">
                 <IndicatorCard status="negative">

console/src/features/Data/ModifyTable/components/EditTableColumnDialog/EditTableColumnDialog.tsx

@@ -53,7 +53,7 @@ export const EditTableColumnDialog = (props: EditTableColumnDialogProps) => {
         <Dialog
           size="md"
           titleTooltip={`Edit ${column.name} column settings`}
-          title={column.name}
+          title={`[${column.name}]`}
           hasBackdrop
           onClose={onClose}
           footer={

console/src/features/Data/ModifyTable/components/TableRootFields.tsx

@@ -20,7 +20,7 @@ export const TableRootFields: React.VFC<ModifyTableProps> = props => {
   const [showCustomModal, setShowCustomModal] = React.useState(false);
   const { metadataTable, isLoading } = useMetadataTable(dataSourceName, table);
 
-  const { updateTableConfiguration, isLoading: saving } =
+  const { updateCustomRootFields, isLoading: saving } =
     useUpdateTableConfiguration(dataSourceName, table);
 
   if (isLoading) {
@@ -59,7 +59,7 @@ export const TableRootFields: React.VFC<ModifyTableProps> = props => {
       <TableTrackingCustomizationModal
         tableName={tableName}
         onSubmit={(formValues, config) => {
-          updateTableConfiguration(config).then(() => {
+          updateCustomRootFields(config).then(() => {
             setShowCustomModal(false);
           });
         }}

console/src/features/Data/ModifyTable/hooks/useUpdateTableConfiguration.ts

@@ -81,5 +81,26 @@ export const useUpdateTableConfiguration = (
     ]
   );
 
-  return { updateTableConfiguration, metadata, resource_version, ...rest };
+  // helper function
+  const updateCustomRootFields = useCallback(
+    (config: MetadataTableConfig) => {
+      const newConfig: MetadataTableConfig = {
+        ...metadataTable?.configuration,
+        custom_name: config?.custom_name || undefined,
+        custom_root_fields: config?.custom_root_fields || {},
+      };
+
+      return updateTableConfiguration(newConfig);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [updateTableConfiguration]
+  );
+
+  return {
+    updateTableConfiguration,
+    updateCustomRootFields,
+    metadata,
+    resource_version,
+    ...rest,
+  };
 };