console: fixes incorrect data type shown in GDC modify tab

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8180
GitOrigin-RevId: 0b4272f7161759541b28ae04bf0a517fb9e42823

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

@@ -1,15 +1,11 @@
 // Button.stories.ts|tsx
-
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 import React from 'react';
 import { ReactQueryDecorator } from '../../../storybook/decorators/react-query';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ModifyTable } from './ModifyTable';
-
-const props = {
-  table: ['Customer'],
-  dataSourceName: 'music_db',
-  tableName: 'Customer',
-};
+import { handlers } from './mock/handlers';
 
 export default {
   /* 👇 The title prop is optional.
@@ -17,9 +13,43 @@ export default {
    * to learn how to generate automatic titles
    */
   component: ModifyTable,
+
   decorators: [ReactQueryDecorator()],
 } as ComponentMeta<typeof ModifyTable>;
 
-export const Primary: ComponentStory<typeof ModifyTable> = () => (
-  <ModifyTable {...props} />
+export const Primary: ComponentStory<typeof ModifyTable> = args => (
+  <ModifyTable {...args} />
 );
+
+Primary.args = {
+  table: ['Customer'],
+  dataSourceName: 'sqlite',
+  tableName: 'Customer',
+};
+
+export const TestData = Primary.bind({});
+
+TestData.args = {
+  table: ['Customer'],
+  dataSourceName: 'sqlite',
+  tableName: 'Customer',
+};
+
+TestData.parameters = {
+  msw: {
+    handlers: handlers(),
+  },
+};
+
+TestData.play = async ({ canvasElement }) => {
+  const c = within(canvasElement);
+  const dataTypeBadge = await c.findByTestId(
+    `CustomerId-ui-data-type`,
+    {},
+    { timeout: 3000 }
+  );
+  const hiddenDataInput = await c.findByTestId('CustomerId-data');
+  const correctDataType = await hiddenDataInput.dataset['dataType'];
+  await expect(correctDataType).toBeTruthy();
+  await expect(dataTypeBadge).toHaveTextContent(correctDataType as string);
+};

frontend/libs/console/legacy-ce/src/lib/features/Data/ModifyTable/components/TableColumnDescription.tsx

@@ -10,6 +10,13 @@ export const TableColumnDescription: React.VFC<{
 }> = ({ column, onEdit }) => {
   return (
     <div key={column.name} className="flex gap-4 items-center mb-2">
+      {/* To assist with tests */}
+      <input
+        type="hidden"
+        data-data-type={column.dataType?.toLowerCase()}
+        data-console-data-type={column.consoleDataType}
+        data-testid={`${column.name}-data`}
+      />
       <Button
         size="sm"
         onClick={() => {
@@ -37,7 +44,9 @@ export const TableColumnDescription: React.VFC<{
       </div>
       <div>
         <Badge color="gray">
-          {column.consoleDataType || column.dataType || 'unknown type'}
+          <span data-testid={`${column.name}-ui-data-type`}>
+            {column.dataType?.toLowerCase() || 'Unknown'}
+          </span>
         </Badge>
       </div>
 

frontend/libs/console/legacy-ce/src/lib/features/Data/ModifyTable/mock/handlers.ts

@@ -0,0 +1,20 @@
+import { rest } from 'msw';
+import { introspection, mockMetadata, tableInfo } from './data';
+
+export const handlers = () => [
+  rest.post(`http://localhost:8080/v1/metadata`, async (req, res, ctx) => {
+    const body = (await req.json()) as Record<string, any>;
+
+    switch (body.type) {
+      case 'export_metadata':
+        return res(ctx.json(mockMetadata));
+      case 'get_table_info':
+        return res(ctx.json(tableInfo));
+      default:
+        return res(ctx.json({}));
+    }
+  }),
+  rest.post(`http://localhost:8080/v1/graphql`, async (req, res, ctx) => {
+    return res(ctx.json(introspection));
+  }),
+];