console: remote schema relationships improvements

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4542
Co-authored-by: Rikin Kachhia <54616969+rikinsk@users.noreply.github.com>
Co-authored-by: Sooraj <8408875+soorajshankar@users.noreply.github.com>
GitOrigin-RevId: 1def55bb692d8bb075525231c153d1aa1463a5bb

console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js

@@ -58,8 +58,8 @@ const RemoteSchemaSubSidebar = ({
           let activeTableClass = '';
 
           if (
-            d.name === viewRemoteSchema &&
-            location.pathname.includes(viewRemoteSchema)
+            location.pathname.includes(`/remote-schemas/`) &&
+            location.pathname.includes(`/${d.name}/`)
           ) {
             activeTableClass = styles.activeLink;
           }

console/src/features/RelationshipsTable/RemoteSchemaRelationshipsTable.tsx

@@ -1,6 +1,15 @@
 import { CardedTable } from '@/new-components/CardedTable';
 import React, { ReactNode } from 'react';
-import { FaArrowRight } from 'react-icons/fa';
+import { IconType } from 'react-icons';
+import {
+  FaArrowRight,
+  FaColumns,
+  FaDatabase,
+  FaFont,
+  FaPlug,
+  FaTable,
+} from 'react-icons/fa';
+import { FiType } from 'react-icons/fi';
 import { rsToDbRelDef, rsToRsRelDef } from '@/metadata/types';
 import { IndicatorCard } from '@/new-components/IndicatorCard';
 import ModifyActions from './components/ModifyActions';
@@ -105,14 +114,57 @@ export const RemoteSchemaRelationshipTable = ({
       });
   }
 
+  const legend: { Icon: IconType; name: string }[] = [
+    {
+      Icon: FaPlug,
+      name: 'Remote Schema',
+    },
+    {
+      Icon: FiType,
+      name: 'Type',
+    },
+    {
+      Icon: FaFont,
+      name: 'Field',
+    },
+    {
+      Icon: FaDatabase,
+      name: 'Database',
+    },
+    {
+      Icon: FaTable,
+      name: 'Table',
+    },
+    {
+      Icon: FaColumns,
+      name: 'Column',
+    },
+  ];
+
   if (rowData?.length)
     return (
-      <CardedTable
-        columns={columns}
-        data={rowData}
-        showActionCell={showActionCell}
-        data-test="remote-schema-relationships-table"
-      />
+      <div>
+        <CardedTable
+          columns={columns}
+          data={rowData}
+          showActionCell={showActionCell}
+          data-test="remote-schema-relationships-table"
+        />
+        <div className="text-right mb-4">
+          {legend.map(item => {
+            const { Icon, name } = item;
+            return (
+              <span>
+                <Icon
+                  className="mr-1 ml-4 text-sm"
+                  style={{ strokeWidth: 4.5 }}
+                />
+                {name}
+              </span>
+            );
+          })}
+        </div>
+      </div>
     );
   return (
     <>

console/src/features/RelationshipsTable/components/ToRsCell.tsx

@@ -1,5 +1,5 @@
 import React, { ReactText } from 'react';
-import { FaProjectDiagram, FaFont } from 'react-icons/fa';
+import { FaPlug, FaFont } from 'react-icons/fa';
 
 const RsLeafCell = ({ leafName }: { leafName: ReactText }) => (
   <>
@@ -11,9 +11,10 @@ const RsLeafCell = ({ leafName }: { leafName: ReactText }) => (
   </>
 );
 
-// the desgin mockup was using FA v5, instead of fa-project-diagram, I've used  fa-code-fork from FA v4 for the time being
+// the design mockup was using FA v5, instead of fa-project-diagram, I've used  fa-code-fork from FA v4 for the time being
 // this matches with the icon that we show on RS page
 // this can be changed once after we upgrade Font Awesome to v5
+// edit: updated this to use FaPlug to have just one representation for remote schema in the table
 const ToRsCell = ({
   rsName,
   leafs,
@@ -23,7 +24,7 @@ const ToRsCell = ({
 }) => (
   <>
     <div className="flex items-center">
-      <FaProjectDiagram
+      <FaPlug
         className="fill-current text-sm text-muted mr-1 p-0"
         title="Remote schema"
       />

console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaToDB/FormElements.tsx

@@ -4,6 +4,7 @@ import { useRemoteSchema } from '@/features/MetadataAPI';
 import { useTableColumns } from '@/features/SqlQueries';
 import { InputField, Select } from '@/new-components/Form';
 import { MapSelector } from '@/new-components/MapSelector';
+import { IndicatorCard } from '@/new-components/IndicatorCard';
 import {
   LinkBlockHorizontal,
   LinkBlockVertical,
@@ -53,17 +54,17 @@ export const FormElements = ({
     if (existingRelationshipName && mapping?.length) setTypeMap(defaultMapping);
   }, [RSTypeName, existingRelationshipName, mapping]);
 
-  if (!data)
+  if (isLoading) {
     return (
-      <div className="grid border border-gray-300 rounded shadow-sm p-4">
-        Data is not ready
+      <div className="my-2">
+        <IndicatorCard status="info">Loading...</IndicatorCard>
       </div>
     );
-
-  if (isLoading)
+  }
+  if (!data)
     return (
-      <div className="grid border border-gray-300 rounded shadow-sm p-4">
-        Loading...
+      <div className="my-2">
+        <IndicatorCard status="info">Data is not ready</IndicatorCard>;
       </div>
     );
 

console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaToDB/RemoteSchemaToDBForm.tsx

@@ -139,7 +139,7 @@ export const RemoteSchemaToDbForm = ({
               <Button type="button" size="sm" onClick={closeHandler}>
                 Cancel
               </Button>
-              <span className="font-semibold text-muted ml-sm">
+              <span className="font-semibold ml-sm">
                 {existingRelationshipName
                   ? 'Edit Relationship'
                   : 'Create New Relationship'}

console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaToRemoteSchemaForm/FormElements.tsx

@@ -92,14 +92,20 @@ export const FormElements = ({
   } = useLoadData(sourceRemoteSchema);
 
   if (isLoading && !isError) {
-    return <IndicatorCard status="info">Loading...</IndicatorCard>;
+    return (
+      <div className="my-2">
+        <IndicatorCard status="info">Loading...</IndicatorCard>
+      </div>
+    );
   }
 
   if (isError || !remoteSchemaList || !sourceRemoteSchema) {
     return (
-      <IndicatorCard status="negative">
-        Error loading remote schemas
-      </IndicatorCard>
+      <div className="my-2">
+        <IndicatorCard status="negative">
+          Error loading remote schemas
+        </IndicatorCard>
+      </div>
     );
   }
 

console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaWidget/RemoteSchemaWidget.tsx

@@ -71,6 +71,11 @@ export const RemoteSchemaWidget = ({
       <div className="grid gap-4 w-full">
         <label className="block ">
           <span className="text-gray-600 mb-xs font-semibold">Mapping</span>
+          <br />
+          <span className="text-gray-600 mb-xs">
+            Build a query mapping from your source schema type to a field
+            argument in your reference schema{' '}
+          </span>
           <input
             type="text"
             className="mt-xs block h-input w-full shadow-sm rounded cursor-not-allowed bg-gray-100 border border-gray-300"

console/src/new-components/CardRadioGroup/CardRadioGroup.tsx

@@ -30,10 +30,11 @@ export const CardRadioGroup = <T extends string = string>(
         return (
           <div
             className={clsx(
-              'bg-white shadow-sm rounded p-md border border-gray-300',
+              'bg-white shadow-sm rounded p-md border border-gray-300 cursor-pointer',
               value === iValue && 'ring-2 ring-yellow-200 border-yellow-400'
             )}
             key={iValue}
+            onClick={() => onChange(iValue)}
           >
             <p className="flex items-center font-semibold text-muted">
               <input
@@ -42,7 +43,6 @@ export const CardRadioGroup = <T extends string = string>(
                 value={iValue}
                 x-model="relationType"
                 className="cursor-pointer rounded-full border shadow-sm border-gray-300 hover:border-gray-400 focus:ring-yellow-400"
-                onChange={() => onChange(iValue)}
                 checked={value === iValue}
                 data-test={`radio-select-${iValue}`}
               />