From e501b60a82492271d006c46359d0f133e4241d7c Mon Sep 17 00:00:00 2001
From: "Julian@Hasura" <118911427+julian-mayorga@users.noreply.github.com>
Date: Mon, 20 Mar 2023 16:05:41 -0300
Subject: [PATCH] console: Only use json string editor for jsonb columns
 DSF-211

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8396
Co-authored-by: Julian <843342+okjulian@users.noreply.github.com>
GitOrigin-RevId: bce8e6483bf163aecfdc54dfe23c91439dafaf59
---
 .../RowPermissionsInput.stories.tsx           | 108 +++++++++++++++++-
 .../components/ValueInputType.tsx             |   3 +-
 2 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx
index 7ed0a215892..ab94650acc6 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx
@@ -6,6 +6,7 @@ import { within } from '@testing-library/dom';
 import {
   fireEvent,
   userEvent,
+  waitFor,
   waitForElementToBeRemoved,
 } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
@@ -16,6 +17,8 @@ import { usePermissionComparators } from '../hooks/usePermissionComparators';
 import { handlers } from './__tests__/fixtures/jsonb/handlers';
 import { ReactQueryDecorator } from '../../../../../../storybook/decorators/react-query';
 import { isEmpty } from 'lodash';
+import { useState } from 'react';
+import { Permissions } from './types';
 
 export default {
   title: 'Features/Permissions/Form/Row Permissions Input',
@@ -611,7 +614,7 @@ export const JsonbColumns: ComponentStory<
 
 JsonbColumns.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  // Wait unti Loading is gone
+  // Wait until Loading is gone
   await waitForElementToBeRemoved(() => canvas.getByText('Loading'), {
     timeout: 50000,
   });
@@ -645,3 +648,106 @@ export const JsonbColumnsHasKeys: ComponentStory<
     />
   );
 };
+
+export const StringColumns: ComponentStory<
+  typeof RowPermissionsInput
+> = args => {
+  const [permissions, setPermissions] = useState<Permissions>({
+    name: { _eq: '' },
+  });
+  const tables = usePermissionTables({
+    dataSourceName: 'default',
+  });
+
+  const comparators = usePermissionComparators();
+
+  if (!tables || isEmpty(comparators)) return <>Loading</>;
+  return (
+    <>
+      <RowPermissionsInput
+        onPermissionsChange={p => {
+          setPermissions(p);
+        }}
+        table={{ schema: 'public', name: 'Stuff' }}
+        tables={tables}
+        comparators={comparators}
+        permissions={{ name: { _eq: '' } }}
+      />
+      {/* State debugger. Used to test the current permissions value */}
+      <div className="invisible" data-testid="permissions-state">
+        {JSON.stringify(permissions)}
+      </div>
+    </>
+  );
+};
+
+// Play function testing that string column with numbers inside are represented as text on the UI
+// Prevents regression where they were treated as numbers
+StringColumns.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  // Wait until Loading is gone
+  await waitForElementToBeRemoved(() => canvas.getByText('Loading'), {
+    timeout: 50000,
+  });
+
+  // // Write a number in the input
+  await userEvent.type(canvas.getByTestId('name._eq-value-input'), '1337');
+
+  // Expect the input to have the number as text
+  await waitFor(async () => {
+    expect(await canvas.findByTestId('permissions-state')).toHaveTextContent(
+      '{"name":{"_eq":"1337"}}'
+    );
+  });
+};
+
+export const NumberColumns: ComponentStory<
+  typeof RowPermissionsInput
+> = args => {
+  const [permissions, setPermissions] = useState<Permissions>({
+    id: { _eq: '' },
+  });
+  const tables = usePermissionTables({
+    dataSourceName: 'default',
+  });
+
+  const comparators = usePermissionComparators();
+
+  if (!tables || isEmpty(comparators)) return <>Loading</>;
+  return (
+    <>
+      <RowPermissionsInput
+        onPermissionsChange={p => {
+          setPermissions(p);
+        }}
+        table={{ schema: 'public', name: 'Stuff' }}
+        tables={tables}
+        comparators={comparators}
+        permissions={{ id: { _eq: '1234' } }}
+      />
+      {/* State debugger. Used to test the current permissions value */}
+      <div className="invisible" data-testid="permissions-state">
+        {JSON.stringify(permissions)}
+      </div>
+    </>
+  );
+};
+
+NumberColumns.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  // Wait until Loading is gone
+  await waitForElementToBeRemoved(() => canvas.getByText('Loading'), {
+    timeout: 50000,
+  });
+
+  // // Write a number in the input
+  await userEvent.type(canvas.getByTestId('id._eq-value-input'), '1337');
+
+  // Expect the input to have the number as text
+  // Note it's not a number but a string
+  await waitFor(async () => {
+    expect(await canvas.findByTestId('permissions-state')).toHaveTextContent(
+      '{"id":{"_eq":"12341337"}}'
+    );
+  });
+};
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInputType.tsx b/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInputType.tsx
index 262de3ec787..3e3d22d8e6e 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInputType.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInputType.tsx
@@ -31,8 +31,7 @@ export const ValueInputType = ({
       />
     );
   }
-
-  if (operator?.inputStructure === 'object') {
+  if (operator?.type === 'jsonb' && operator?.inputStructure === 'object') {
     return (
       <ObjectValueInput
         componentLevelId={componentLevelId}