console: rollback remote schema permission edition buttons migration

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6127
GitOrigin-RevId: f290daa147715918df194dc94cb1132aa50671b1

console/src/components/Common/Button/Button.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import styles from '../Common.module.scss';
+
+import { GlobalContext } from '../../App/App';
+import { trackRuntimeError } from '../../../telemetry';
+import { isConsoleError } from '../utils/jsUtils';
+
+/*
+  This is a Button HOC that takes all the props supported by <button>
+  - color(default: white): color of the button; currently supports yellow, red, green, gray and white
+  - size: size of the button; currently supports xs (extra small), sm(small)
+  - className: although you can provide any CSS classname, it is recommended to use only the positioning related classes
+               and not the ones that change the appearance (color, font, size) of the button
+*/
+
+export interface ButtonProps extends React.ComponentProps<'button'> {
+  size?: string;
+  color?: 'yellow' | 'red' | 'green' | 'gray' | 'white' | 'black';
+}
+
+const Button: React.FC<ButtonProps> = props => {
+  const { children, onClick, size, color, className, type = 'button' } = props;
+  let extendedClassName = `${className || ''} btn ${
+    size ? `btn-${size} ` : 'button '
+  }`;
+  switch (color) {
+    case 'yellow':
+      extendedClassName += styles.yellow_button;
+      break;
+    case 'red':
+      extendedClassName += 'btn-danger';
+      break;
+    case 'green':
+      extendedClassName += 'btn-success';
+      break;
+    case 'gray':
+      extendedClassName += styles.gray_button;
+      break;
+    default:
+      extendedClassName += 'btn-default';
+      break;
+  }
+
+  const globals = React.useContext(GlobalContext);
+
+  const trackedOnClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    try {
+      if (onClick) {
+        onClick(e);
+      }
+    } catch (error) {
+      console.error(error);
+      if (isConsoleError(error)) {
+        trackRuntimeError(globals, error);
+      }
+    }
+  };
+
+  return (
+    <button
+      {...props}
+      className={extendedClassName}
+      type={type}
+      onClick={onClick ? trackedOnClick : undefined}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

console/src/components/Common/Button/index.tsx

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

console/src/components/Services/RemoteSchema/Permissions/ArgSelect.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState, ReactText } from 'react';
 import merge from 'lodash.merge';
 import { GraphQLInputField } from 'graphql';
-import { Button } from '@/new-components/Button';
 import { getChildArguments } from './utils';
 import RSPInput from './RSPInput';
 import { ArgTreeType } from './types';
@@ -77,9 +76,9 @@ export const ArgSelect: React.FC<ArgSelectProps> = ({
       <>
         {!hideInputArgName ? (
           <>
-            <Button onClick={toggleExpandMode} className="ml-xs">
+            <button onClick={toggleExpandMode} className="-ml-xs">
               {expanded ? '-' : '+'}
-            </Button>
+            </button>
             {!expanded && (
               <label className="cursor-pointer font-normal" htmlFor={k}>
                 {k}:

console/src/components/Services/RemoteSchema/Permissions/BulkSelect.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button } from '@/new-components/Button';
 import { getConfirmation } from '../../../Common/utils/jsUtils';
+import Button from '../../../Common/Button/Button';
 
 export type BulkSelectProps = {
   bulkSelect: string[];
@@ -38,7 +38,7 @@ const BulkSelect: React.FC<BulkSelectProps> = ({
         {getSelectedRoles()}
       </div>
       <div className="mt-sm mb-sm">
-        <Button onClick={handleBulkRemoveClick} mode="destructive" size="sm">
+        <Button onClick={handleBulkRemoveClick} color="red" size="sm">
           Remove All Permissions
         </Button>
       </div>

console/src/components/Services/RemoteSchema/Permissions/CollapsedField.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '@/new-components/Button';
 import { FieldType } from './types';
 
 interface CollapsedFieldProps {
@@ -18,16 +17,11 @@ export const CollapsedField: React.FC<CollapsedFieldProps> = ({
     {i.return ? (
       <span className="pl-xs font-normal">{i.name}</span>
     ) : (
-      <Button
-        size="sm"
-        data-test={`field-${i.typeName}`}
-        onClick={onExpand}
-        id={i.name}
-      >
+      <button data-test={`field-${i.typeName}`} onClick={onExpand} id={i.name}>
         <span className={`pl-xs ${expanded ? 'font-semibold' : 'font-normal'}`}>
           {i.name}
         </span>
-      </Button>
+      </button>
     )}
     {i.return && (
       <>

console/src/components/Services/RemoteSchema/Permissions/Field.tsx

@@ -5,7 +5,6 @@ import React, {
   useState,
   MouseEvent,
 } from 'react';
-import { Button } from '@/new-components/Button';
 import { FieldType } from './types';
 import { PermissionEditorContext } from './context';
 import { CollapsedField } from './CollapsedField';
@@ -155,7 +154,9 @@ export const Field: React.FC<FieldProps> = ({
       )}
       {/* show pen icon for input object types presets */}
       {i.isInputObjectType && !inputPresetMode && !autoExpandInputPresets ? (
-        <Button icon={<Pen />} onClick={() => setInputPresetMode(true)} />
+        <button onClick={() => setInputPresetMode(true)}>
+          <Pen />
+        </button>
       ) : null}
       {i.isInputObjectType && inputPresetMode && isFirstLevelInputObjPreset ? (
         <ArgSelect

console/src/components/Services/RemoteSchema/Permissions/PermissionEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { GraphQLSchema } from 'graphql';
-import { Button } from '@/new-components/Button';
 import { generateSDL, getArgTreeFromPermissionSDL } from './utils';
+import Button from '../../../Common/Button/Button';
 import {
   RemoteSchemaFields,
   FieldType,
@@ -79,6 +79,8 @@ const PermissionEditor: React.FC<PermissionEditorProps> = props => {
 
   if (!isEditing) return null;
 
+  const buttonStyle = 'mr-sm';
+
   const closeEditor = () => {
     permCloseEdit();
   };
@@ -137,29 +139,29 @@ const PermissionEditor: React.FC<PermissionEditorProps> = props => {
           {/* <code style={{ whiteSpace: 'pre-wrap' }}>{resultString}</code> */}
         </PermissionEditorContext.Provider>
       </div>
-      <div className="mr-sm">
-        <Button
-          onClick={saveFunc}
-          mode="primary"
-          disabled={isSaveDisabled}
-          data-test="save-remote-schema-permissions"
-        >
-          Save Permissions
-        </Button>
-      </div>
+      <Button
+        onClick={saveFunc}
+        color="yellow"
+        className={buttonStyle}
+        disabled={isSaveDisabled}
+        data-test="save-remote-schema-permissions"
+      >
+        Save Permissions
+      </Button>
       {!(isNewRole || isNewPerm) && (
-        <div className="mr-sm">
-          <Button
-            onClick={removeFunc}
-            mode="destructive"
-            disabled={isFetching}
-            data-test="delete-remote-schema-permissions"
-          >
-            Remove Permissions
-          </Button>
-        </div>
+        <Button
+          onClick={removeFunc}
+          color="red"
+          className={buttonStyle}
+          disabled={isFetching}
+          data-test="delete-remote-schema-permissions"
+        >
+          Remove Permissions
+        </Button>
       )}
-      <Button onClick={closeEditor}>Cancel</Button>
+      <Button color="white" className={buttonStyle} onClick={closeEditor}>
+        Cancel
+      </Button>
     </div>
   );
 };

console/src/components/Services/RemoteSchema/Permissions/RSPInput.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, ReactText } from 'react';
 import { GraphQLEnumType, GraphQLInputField, GraphQLScalarType } from 'graphql';
-import { Button } from '@/new-components/Button';
 import Pen from './Pen';
 import { useDebouncedEffect } from '../../../../hooks/useDebounceEffect';
 import { isNumberString } from '../../../Common/utils/jsUtils';
@@ -94,17 +93,19 @@ const RSPInputComponent: React.FC<RSPInputProps> = ({
             onChange={e => setLocalValue(e.target.value)}
           />
           {isSessionvar() && (
-            <Button value="X-Hasura-User-Id" onClick={toggleSessionVariable}>
+            <button
+              value="X-Hasura-User-Id"
+              onClick={toggleSessionVariable}
+              className="text-green-600 cursor-pointer text-xs font-bold"
+            >
               [X-Hasura-User-Id]
-            </Button>
+            </button>
           )}
         </>
       ) : (
-        <Button
-          icon={<Pen />}
-          data-test={`pen-${k}`}
-          onClick={() => setEditMode(true)}
-        />
+        <button data-test={`pen-${k}`} onClick={() => setEditMode(true)}>
+          <Pen />
+        </button>
       )}
     </>
   );

console/src/components/Services/RemoteSchema/Permissions/Tree.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from '@/new-components/Button';
 import { FieldType, ExpandedItems, PermissionEdit } from './types';
 import { Field } from './Field';
 import { addDepFields, getExpandedItems } from './utils';
@@ -100,9 +99,9 @@ const Tree: React.FC<RSPTreeComponentProps> = ({
                 />
               )}
               {i.children && (
-                <Button onClick={toggleExpand(ix)}>
+                <button onClick={toggleExpand(ix)}>
                   {expandedItems[ix] ? '-' : '+'}
-                </Button>
+                </button>
               )}
               <Field
                 i={i}