console: Support X-Hasura-User-Id for number inputs DSF-162

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8261
Co-authored-by: Julian <843342+okjulian@users.noreply.github.com>
GitOrigin-RevId: 118bdb9261f92f6829ea19633de660388ff7db82

frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/RowPermissionsInput.stories.tsx

@@ -345,6 +345,49 @@ BooleanArrayTypeRoot.play = async ({ canvasElement }) => {
   ).toBeInTheDocument();
 };
 
+export const NumericValue: ComponentStory<
+  typeof RowPermissionsInput
+> = args => (
+  <RowPermissionsInput
+    onPermissionsChange={action('onPermissionsChange')}
+    table={['Album']}
+    tables={tables}
+    comparators={comparators}
+    permissions={{ id: { _eq: '' } }}
+  />
+);
+
+NumericValue.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  expect(
+    canvas.getByTestId('id._eq-value-input-x-hasura-user-id')
+  ).toBeInTheDocument();
+};
+
+export const NumericIntValue: ComponentStory<
+  typeof RowPermissionsInput
+> = args => (
+  <RowPermissionsInput
+    onPermissionsChange={action('onPermissionsChange')}
+    table={['Album']}
+    tables={tables}
+    comparators={comparators}
+    permissions={{ id: { _eq: 0 } }}
+  />
+);
+
+export const NumericFloatValue: ComponentStory<
+  typeof RowPermissionsInput
+> = args => (
+  <RowPermissionsInput
+    onPermissionsChange={action('onPermissionsChange')}
+    table={['Album']}
+    tables={tables}
+    comparators={comparators}
+    permissions={{ id: { _eq: 0.9 } }}
+  />
+);
+
 SetRootLevelPermission.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByTestId('-operator'));

frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInput.tsx

@@ -70,15 +70,17 @@ export const ValueInput = ({ value, path }: { value: any; path: string[] }) => {
         value={value}
         comparatorType={comparator?.type}
       />
-      {inputType === 'text' && isComparator(comparatorName) && (
+      {(inputType === 'text' || inputType === 'number') &&
-        <Button
+        isComparator(comparatorName) && (
-          disabled={comparatorName === '_where' && isEmpty(table)}
+          <Button
-          onClick={() => setValue(path, 'X-Hasura-User-Id')}
+            disabled={comparatorName === '_where' && isEmpty(table)}
-          mode="default"
+            onClick={() => setValue(path, 'X-Hasura-User-Id')}
-        >
+            data-testid={`${componentLevelId}-x-hasura-user-id`}
-          [x-hasura-user-id]
+            mode="default"
-        </Button>
+          >
-      )}
+            [x-hasura-user-id]
+          </Button>
+        )}
     </>
   );
 };

frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/ValueInputType.tsx

@@ -23,9 +23,6 @@ export const ValueInputType = ({
   const { setValue } = useContext(rowPermissionsContext);
   const { table } = useContext(tableContext);
 
-  const inputType =
-    jsType === 'boolean' ? 'checkbox' : jsType === 'string' ? 'text' : 'number';
-
   switch (jsType) {
     case 'boolean':
       return (
@@ -55,7 +52,7 @@ export const ValueInputType = ({
           data-testid={componentLevelId}
           disabled={comparatorName === '_where' && isEmpty(table)}
           className="border border-gray-200 rounded-md p-2 !mr-4"
-          type={inputType}
+          type="text"
           value={value}
           onChange={e => {
             setValue(path, graphQLTypeToJsType(e.target.value, comparatorType));

frontend/libs/console/legacy-ce/src/lib/features/Permissions/PermissionsForm/components/RowPermissionsBuilder/components/utils/helpers.ts

@@ -120,9 +120,7 @@ export function graphQLTypeToJsType(
   if (!isScalarType(type)) {
     return value;
   }
-  if (type.name === 'Int' || type.name === 'ID' || type.name === 'Float') {
+  if (type.name === 'Boolean') {
-    return Number(value);
-  } else if (type.name === 'Boolean') {
     return Boolean(value);
   }