refactor (console): migrate data tab modify section to tailwind

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4638 GitOrigin-RevId: bbcbf3bc4e86e3bfc0294ee486e4a6fd91224664
2024-10-05 14:28:08 +03:00 · 2022-06-08 14:06:47 +02:00 · 2022-06-08 14:06:47 +02:00 · a170ac26e2
commit a170ac26e2
parent 2cbc24cf3f
17 changed files with 73 additions and 91 deletions
--- a/console/src/components/Services/Data/Add/AddExistingTableView.js
+++ b/console/src/components/Services/Data/Add/AddExistingTableView.js
@ -45,11 +45,7 @@ class AddExistingTableView extends Component {
    }

    return (
-      <div
-        className={
-          'container-fluid ' + styles.clear_fix + ' ' + styles.padd_top
-        }
-      >
+      <div className={'pl-sm pr-sm mx-auto clear-both pt-sm'}>
        <Helmet title="Add Existing Table/View - Data | Hasura" />
        <div className={styles.subHeader}>
          <h2 className={styles.heading_text}>Add an existing table or view</h2>
--- a/console/src/components/Services/Data/Add/TableColumn.js
+++ b/console/src/components/Services/Data/Add/TableColumn.js
@ -7,22 +7,9 @@ import TableColumnDefault from './TableColumnDefault';
 import { ColumnTypeSelector } from '../Common/Components/ColumnTypeSelector';
 import { dataSource, isFeatureSupported } from '../../../../dataSources';
 import { FaTimes } from 'react-icons/fa';
-
-/* Custom style object for searchable select box */
-const customSelectBoxStyles = {
-  dropdownIndicator: {
-    padding: '5px',
-  },
-  singleValue: {
-    color: '#555555',
-  },
-  valueContainer: {
-    padding: '0px 12px',
-  },
-};
+import { focusYellowRing, inputStyles } from '../utils';

 const TableColumn = props => {
-  const styles = require('../../../Common/TableCommon/Table.scss');
  const {
    column,
    colLength,
@ -90,14 +77,14 @@ const TableColumn = props => {
    <div key={i} className="grid mb-sm gap-sm grid-cols-1 sm:grid-cols-5">
      <input
        type="text"
-        className={`${styles.input} form-control`}
+        className={`${inputStyles}`}
        value={column.name}
        placeholder="column_name"
        onChange={onColumnChange.bind(undefined, i, column.nullable || false)}
        data-test={`column-${i}`}
      />
      <span
-        className={`${styles.inputDefault} ${styles.defaultWidth}`}
+        // className={`mt-sm w-72`}
        data-test={`col-type-${i}`}
      >
        {isFeatureSupported('tables.create.frequentlyUsedColumns') ? (
@ -109,13 +96,12 @@ const TableColumn = props => {
            }
            colIdentifier={i}
            bsClass={`col-type-${i} add_table_column_selector`}
-            styleOverrides={customSelectBoxStyles}
+            styleOverrides={focusYellowRing}
          />
        ) : (
          <input
            type="text"
-            style={{ maxWidth: '200px' }}
-            className={`${styles.input} form-control col-type-${i}`}
+            className={`${inputStyles} max-w-48 col-type-${i}`}
            onChange={e => {
              e.persist();
              onColTypeChange(i, e.target.value);
@ -124,7 +110,7 @@ const TableColumn = props => {
          />
        )}
      </span>
-      <span className={`${styles.inputDefault} ${styles.defaultWidth}`}>
+      <span className={inputStyles}>
        <TableColumnDefault
          onChange={setColDefaultValue}
          colIndex={i}
@ -136,7 +122,7 @@ const TableColumn = props => {
      <div className="flex items-center">
        <label className="flex items-center mr-sm">
          <input
-            className={`legacy-input-fix`}
+            className={focusYellowRing}
            style={{ margin: '0' }}
            checked={column.nullable}
            type="checkbox"
@ -147,7 +133,7 @@ const TableColumn = props => {
        </label>
        <label className="flex items-center">
          <input
-            className={`legacy-input-fix`}
+            className={focusYellowRing}
            style={{ margin: '0' }}
            checked={isColumnUnique}
            type="checkbox"
--- a/console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js
+++ b/console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js
@ -4,6 +4,7 @@ import AceEditor from 'react-ace';
 import ToolTip from '../../../../Common/Tooltip/Tooltip';
 import KnowMoreLink from '../../../../Common/KnowMoreLink/KnowMoreLink';
 import { checkConstraintExpression } from '../TooltipMessages';
+import { inputStyles } from '../../constants';

 export const ConstraintExpandedContent = ({
  nameOnChange,
@ -22,7 +23,7 @@ export const ConstraintExpandedContent = ({
          type="text"
          value={name}
          onChange={nameOnChange}
-          className="form-control"
+          className={inputStyles}
        />
      </div>
      <div>
--- a/console/src/components/Services/Data/Common/Components/ForeignKeySelector.js
+++ b/console/src/components/Services/Data/Common/Components/ForeignKeySelector.js
@ -4,6 +4,7 @@ import { updateSchemaInfo } from '../../DataActions';
 import ToolTip from '../../../../Common/Tooltip/Tooltip';
 import { dataSource } from '../../../../../dataSources';
 import { FaTimes } from 'react-icons/fa';
+import { inputStyles } from '../../constants';

 const ForeignKeySelector = ({
  foreignKey,
@ -58,7 +59,7 @@ const ForeignKeySelector = ({
        </h4>
        <select
          value={refSchemaName || ''}
-          className="form-control"
+          className={inputStyles}
          data-test={`foreign-key-ref-schema-${index}`}
          onChange={dispatchSetRefSchema}
        >
@ -124,7 +125,7 @@ const ForeignKeySelector = ({
        </h4>
        <select
          value={refTableName || ''}
-          className={`form-control`}
+          className={inputStyles}
          data-test={`foreign-key-ref-table-${index}`}
          onChange={dispatchSetRefTable}
          disabled={!refSchemaName}
--- a/console/src/components/Services/Data/Common/Components/PrimaryKeySelector.js
+++ b/console/src/components/Services/Data/Common/Components/PrimaryKeySelector.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
-import styles from '../../../../Common/TableCommon/Table.scss';
+import { inputStyles } from '../../constants';

 const PrimaryKeySelector = ({ primaryKeys, columns, setPk, dispatch }) => {
  const numPks = primaryKeys.length;
@ -62,7 +62,7 @@ const PrimaryKeySelector = ({ primaryKeys, columns, setPk, dispatch }) => {
        <div key={i} className="flex items-center">
          <select
            value={pk || ''}
-            className={`w-full form-control ${styles.add_pad_left}`}
+            className={`w-full ${inputStyles} pd-sm`}
            onChange={dispatchSet}
            data-test={`primary-key-select-${i}`}
          >
--- a/console/src/components/Services/Data/Common/Components/UniqueKeySelector.js
+++ b/console/src/components/Services/Data/Common/Components/UniqueKeySelector.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
+import { inputStyles } from '../../constants';

 const UniqueKeySelector = ({
  uniqueKeys,
@ -85,7 +86,7 @@ const UniqueKeySelector = ({
    return (
      <div className="flex" key={numCols}>
        <select
-          className="form-control"
+          className={inputStyles}
          data-test={`unique-key-${index}-column-${numCols}`}
          onChange={selectUniqueCol}
          value={''}
--- a/console/src/components/Services/Data/TableModify/ColumnCreator.tsx
+++ b/console/src/components/Services/Data/TableModify/ColumnCreator.tsx
@ -18,6 +18,7 @@ import {
 import FrequentlyUsedColumnSelector from '../Common/Components/FrequentlyUsedColumnSelector';
 import { ColumnTypeSelector } from '../Common/Components/ColumnTypeSelector';
 import { dataSource, isFeatureSupported } from '../../../../dataSources';
+import { focusYellowRing, inputStyles } from '../constants';

 const initialColumnEditorState = {
  colName: '',
@ -162,7 +163,7 @@ const ColumnCreator: React.VFC<ColumnCreatorProps> = ({
        onChange={e => colName.onChange(e.target.value)}
        placeholder="column name"
        type="text"
-        className="form-control"
+        className={inputStyles}
        data-test="column-name"
      />
    );
@ -188,7 +189,7 @@ const ColumnCreator: React.VFC<ColumnCreatorProps> = ({
        ) : (
          <input
            type="text"
-            className="form-control col-type-0"
+            className={inputStyles}
            onChange={e => {
              e.persist();
              colType.onChange(e.target.value);
@ -209,7 +210,7 @@ const ColumnCreator: React.VFC<ColumnCreatorProps> = ({
            checked={colNull.checked}
            onChange={e => colNull.onChange(e.target.checked)}
            style={{ margin: '0' }}
-            className="legacy-input-fix"
+            className={focusYellowRing}
            data-test="nullable-checkbox"
          />
          <span className="ml-xs">Nullable</span>
@ -227,7 +228,7 @@ const ColumnCreator: React.VFC<ColumnCreatorProps> = ({
            checked={colUnique.checked}
            onChange={e => colUnique.onChange(e.target.checked)}
            style={{ margin: '0' }}
-            className="legacy-input-fix"
+            className={focusYellowRing}
            data-test="unique-checkbox"
          />
          <span className="ml-xs">Unique</span>
@ -254,7 +255,7 @@ const ColumnCreator: React.VFC<ColumnCreatorProps> = ({
      <CustomInputAutoSuggest
        placeholder="default value"
        options={defaultOptions}
-        className="form-control"
+        className={inputStyles}
        value={colDefault.value}
        onChange={(_, params) => colDefault.onChange(params.newValue)}
        data-test="default-value"
--- a/console/src/components/Services/Data/TableModify/ColumnEditor.js
+++ b/console/src/components/Services/Data/TableModify/ColumnEditor.js
@ -6,6 +6,7 @@ import { getValidAlterOptions, convertToArrayOptions } from './utils';
 import Tooltip from '../../../Common/Tooltip/Tooltip';
 import { ColumnTypeSelector } from '../Common/Components/ColumnTypeSelector';
 import { dataSource, isFeatureSupported } from '../../../../dataSources';
+import { inputStyles } from '../constants';

 const ColumnEditor = ({
  onSubmit,
@ -82,7 +83,7 @@ const ColumnEditor = ({
        </label>
        <div className="ml-auto w-6/12">
          <input
-            className="form-control"
+            className={`${inputStyles} disabled:bg-gray-100`}
            value={selectedProperties[colName].customFieldName}
            onChange={updateColumnCustomField}
            placeholder={`${colName} (default)`}
@ -98,7 +99,7 @@ const ColumnEditor = ({
    return (
      <CustomInputAutoSuggest
        options={defaultOptions}
-        className="form-control"
+        className={inputStyles}
        value={selectedProperties[colName].default || ''}
        onChange={updateColumnDefault}
        type="text"
@ -108,7 +109,7 @@ const ColumnEditor = ({
  };

  return (
-    <div className="">
+    <div>
      <form className="space-y-md" onSubmit={onSubmit}>
        <div className="flex items-center">
          <label className="flex items-center text-gray-600 font-semibold">
@ -116,7 +117,7 @@ const ColumnEditor = ({
          </label>
          <div className="ml-auto w-6/12">
            <input
-              className="form-control w-full"
+              className={`${inputStyles} disabled:bg-gray-100 w-full`}
              value={selectedProperties[colName].name}
              onChange={updateColumnName}
              type="text"
@ -140,7 +141,7 @@ const ColumnEditor = ({
            ) : (
              <input
                type="text"
-                className={`form-control col-type-${0}`}
+                className={`${inputStyles} disabled:bg-gray-100`}
                value={
                  alterOptionsValueMap?.[columnTypePG]?.value ?? columnTypePG
                }
@ -159,7 +160,7 @@ const ColumnEditor = ({
          </label>
          <div className="ml-auto w-6/12">
            <select
-              className="form-control"
+              className={`${inputStyles} disabled:bg-gray-100`}
              value={selectedProperties[colName].isNullable}
              onChange={toggleColumnNullable}
              disabled={columnProperties.pkConstraint}
@ -176,7 +177,7 @@ const ColumnEditor = ({
          </label>
          <div className="ml-auto w-6/12">
            <select
-              className="form-control"
+              className={`${inputStyles} disabled:bg-gray-100`}
              value={
                !!(
                  selectedProperties[colName].isUnique ||
@ -204,7 +205,7 @@ const ColumnEditor = ({
          </label>
          <div className="ml-auto w-6/12">
            <input
-              className="form-control"
+              className={`${inputStyles} disabled:bg-gray-100`}
              value={selectedProperties[colName].comment || ''}
              onChange={updateColumnComment}
              type="text"
--- a/console/src/components/Services/Data/TableModify/ColumnEditorList.js
+++ b/console/src/components/Services/Data/TableModify/ColumnEditorList.js
@ -20,7 +20,6 @@ import {

 import GqlCompatibilityWarning from '../../../Common/GqlCompatibilityWarning/GqlCompatibilityWarning';

-import styles from './ModifyTable.scss';
 import { getConfirmation } from '../../../Common/utils/jsUtils';
 import { dataSource } from '../../../../dataSources';

@ -110,7 +109,7 @@ const ColumnEditorList = ({
      return (
        <GqlCompatibilityWarning
          identifier={colName}
-          className={styles.add_mar_left_small}
+          className="ml-xs"
          ifWarningCanBeFixed
        />
      );
@ -266,7 +265,7 @@ const ColumnEditorList = ({
          saveFunc={onSubmit}
          readOnlyMode={readOnlyMode}
          removeFunc={columnProperties.pkConstraint ? null : onDelete}
-          collapsedClass={styles.display_flex}
+          collapsedClass="flex items-center"
          expandedLabel={expandedLabel}
          collapsedLabel={collapsedLabel}
          expandCallback={editorExpandCallback}
--- a/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx
+++ b/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx
@ -15,6 +15,7 @@ import { Dispatch } from '../../../../types';
 import { Schema, ComputedField, Table } from '../../../../dataSources/types';
 import { PGFunction } from '../../../../dataSources/services/postgresql/types';
 import { CommentInput } from '../Common/Components/CommentInput';
+import { inputStyles } from '../constants';

 interface ComputedFieldsEditorProps {
  table: Table;
@ -328,7 +329,7 @@ const ComputedFieldsEditor: React.FC<ComputedFieldsEditorProps> = ({
              type="text"
              value={computedFieldName}
              onChange={handleNameChange}
-              className="form-control"
+              className={inputStyles}
              data-test="computed-field-name-input"
            />
          </div>
@ -361,7 +362,6 @@ const ComputedFieldsEditor: React.FC<ComputedFieldsEditorProps> = ({
              </h4>
              <RawSqlButton
                dataTestId="create-function"
-                className=""
                sql=""
                dispatch={dispatch}
                source={source}
@ -407,7 +407,7 @@ const ComputedFieldsEditor: React.FC<ComputedFieldsEditorProps> = ({
              value={computedFieldTableRowArg ?? undefined}
              placeholder="default: first argument"
              onChange={handleTableRowArgChange}
-              className="form-control"
+              className={inputStyles}
              data-test="computed-field-first-arg-input"
            />
          </div>
@ -427,7 +427,7 @@ const ComputedFieldsEditor: React.FC<ComputedFieldsEditorProps> = ({
              value={computedFieldTableSessionArg ?? ''}
              placeholder="hasura_session"
              onChange={handleTableSesssionArgChange}
-              className="form-control"
+              className={inputStyles}
            />
          </div>

--- a/console/src/components/Services/Data/TableModify/ModifyTable.js
+++ b/console/src/components/Services/Data/TableModify/ModifyTable.js
@ -29,7 +29,6 @@ import UniqueKeyEditor from './UniqueKeyEditor';
 import TriggerEditorList from './TriggerEditorList';
 import CheckConstraints from './CheckConstraints';
 import RootFields from './RootFields';
-import styles from './ModifyTable.scss';
 import { NotFoundError } from '../../../Error/PageNotFound';
 import { getConfirmation } from '../../../Common/utils/jsUtils';
 import {
@ -185,18 +184,17 @@ class ModifyTable extends React.Component {
          <div>
            <div>
              {isFeatureSupported('tables.modify.readOnly') && (
-                <div className={styles.readOnly}>
-                  <p className={styles.readOnlyText}>
+                <div className={'py-sm px-sm bg-gray-200 rounded-md mb-md'}>
+                  <p className="mb-xs font-bold">
                    <FaFlask aria-hidden="true" /> Coming soon for{' '}
                    {driverToLabel[currentDriver]}
                  </p>
-                  <p className={styles.noMargin}>
+                  <p className="m-0">
                    This page is currently read-only, but we're actively working
                    on making it available for the Console.
                  </p>
                </div>
              )}
-
              {isFeatureSupported('tables.modify.comments.view') && (
                <>
                  <div className="w-full sm:w-6/12 mb-lg">
@ -348,21 +346,21 @@ class ModifyTable extends React.Component {
                  </div>
                </>
              )}
-              {isFeatureSupported('tables.modify.indexes.view') ? (
-                <>
-                  <div className="w-full sm:w-6/12 mb-md">
-                    <h4 className="flex items-center text-gray-600 font-semibold mb-formlabel">
-                      Indexes
-                      <Tooltip message={indexFieldsDescription} />
-                    </h4>
-                    <IndexFields tableSchema={table} />
-                  </div>
-                </>
-              ) : null}
+              {/* {isFeatureSupported('tables.modify.indexes.view') ? ( */}
+              <>
+                <div className="w-full sm:w-6/12 mb-md">
+                  <h4 className="flex items-center text-gray-600 font-semibold mb-formlabel">
+                    Indexes
+                    <Tooltip message={indexFieldsDescription} />
+                  </h4>
+                  <IndexFields tableSchema={table} />
+                </div>
+              </>
+              {/* ) : null} */}

-              {table.table_type === 'PARTITIONED TABLE' && (
-                <PartitionInfo table={table} dispatch={dispatch} />
-              )}
+              {/* {table.table_type === 'PARTITIONED TABLE' && ( */}
+              <PartitionInfo table={table} dispatch={dispatch} />
+              {/* )} */}

              {isFeatureSupported('tables.modify.triggers') && (
                <>
--- a/console/src/components/Services/Data/TableModify/ModifyView.js
+++ b/console/src/components/Services/Data/TableModify/ModifyView.js
@ -17,7 +17,6 @@ import { NotFoundError } from '../../../Error/PageNotFound';

 import { getConfirmation } from '../../../Common/utils/jsUtils';
 import Tooltip from '../../../Common/Tooltip/Tooltip';
-import styles from './ModifyTable.scss';
 import {
  getTableCustomColumnNames,
  findTable,
@ -29,6 +28,7 @@ import { RightContainer } from '../../../Common/Layout/RightContainer';
 import ComputedFields from './ComputedFields';
 import RootFields from './RootFields';
 import FeatureDisabled from '../FeatureDisabled';
+import { inputStyles } from '../constants';

 const ModifyView = props => {
  const {
@ -127,7 +127,7 @@ const ModifyView = props => {
            <div className="ml-auto w-6/12">
              <input
                type="text"
-                className={'form-control'}
+                className={inputStyles}
                value={customColumnNames[columnName] || ''}
                placeholder={`${columnName} (default)`}
                onChange={setCustomColumnName}
@ -196,7 +196,7 @@ const ModifyView = props => {
  const untrackBtn = (
    <Button
      type="submit"
-      className={styles.add_mar_right}
+      className="mr-sm"
      color="white"
      size="sm"
      onClick={untrackOnclick}
@ -295,7 +295,9 @@ const ModifyView = props => {
        {deleteBtn}
        <br />
        <br />
-        <div className={styles.fixed + ' col-xs-3 hidden'}>{alert}</div>
+        <div className="top-150 r-50 bottom-0 min-w-13 grid-cols-3">
+          {alert}
+        </div>
      </div>
    </RightContainer>
  );
--- a/console/src/components/Services/Data/TableModify/PartitionInfo.tsx
+++ b/console/src/components/Services/Data/TableModify/PartitionInfo.tsx
@ -3,7 +3,6 @@ import { FaColumns, FaTable } from 'react-icons/fa';
 import { Table, Partition } from '../../../../dataSources/types';
 import { Dispatch } from '../../../../types';
 import { fetchPartitionDetails } from '../DataActions';
-import styles from './ModifyTable.scss';

 interface Props {
  table: Table;
@ -68,10 +67,7 @@ const PartitionInfo: React.FC<Props> = ({ table, dispatch }) => {
                return (
                  <div className="mt-sm">
                    <span className="font-semibold mr-xs">
-                      <FaTable
-                        className={styles.partitionLabel}
-                        aria-hidden="true"
-                      />{' '}
+                      <FaTable className="mr-xs" aria-hidden="true" />{' '}
                      {p.partition_name} -{' '}
                    </span>
                    <HighlightedText value={p.partition_def} />
--- a/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js
+++ b/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js
@ -9,8 +9,6 @@ import ExpandableEditor from '../../../Common/Layout/ExpandableEditor/Editor';
 import { showSuccessNotification } from '../../Common/Notification';
 import { getUkeyPkeyConfig, getKeyDef } from '../Common/Components/utils';

-import styles from './ModifyTable.scss';
-
 import { getConfirmation } from '../../../Common/utils/jsUtils';

 const PrimaryKeyEditor = ({
@ -64,7 +62,7 @@ const PrimaryKeyEditor = ({
  // expanded editor content
  const pkEditorExpanded = () => (
    <div>
-      <div className={`${styles.add_mar_top_small} ${styles.add_mar_bottom}`}>
+      <div className="mt-xs mb-xs">
        <PrimaryKeySelector
          dispatch={dispatch}
          setPk={setPrimaryKeys}
--- a/console/src/components/Services/Data/TableModify/TableCommentEditor.js
+++ b/console/src/components/Services/Data/TableModify/TableCommentEditor.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { FaEdit } from 'react-icons/fa';
+import { inputStyles } from '../constants';
 import {
  activateCommentEdit,
  updateCommentInput,
@ -61,7 +62,7 @@ const TableCommentEditor = ({
      <div className="flex items-center">
        <input
          onChange={commentEdited}
-          className="form-control"
+          className={inputStyles}
          type="text"
          value={tableCommentEdit.value}
          defaultValue={tableComment}
--- a/console/src/components/Services/Data/TableModify/TriggerEditorList.js
+++ b/console/src/components/Services/Data/TableModify/TriggerEditorList.js
@ -5,8 +5,6 @@ import ExpandableEditor from '../../../Common/Layout/ExpandableEditor/Editor';
 import { deleteTrigger } from './ModifyActions';
 import { getConfirmation } from '../../../Common/utils/jsUtils';

-import styles from './ModifyTable.scss';
-
 const TriggerEditorList = ({ tableSchema, dispatch }) => {
  const triggers = tableSchema.triggers;

@ -112,12 +110,10 @@ const TriggerEditorList = ({ tableSchema, dispatch }) => {
              maxLines={100}
              width="100%"
              showPrintMargin={false}
-              className={styles.add_mar_top_small}
+              className="mt-xs"
            />
            {commentText && (
-              <div className={`${styles.text_gray} ${styles.add_mar_top}`}>
-                {commentText}
-              </div>
+              <div className="text-gray-500 mt-sm">{commentText}</div>
            )}
          </div>
        </div>
--- a/console/src/components/Services/Data/utils.js
+++ b/console/src/components/Services/Data/utils.js
@ -148,3 +148,8 @@ export const getSourceDriver = (dataSources, source) => {
  const sourceObject = dataSources.find(({ name }) => name === source);
  return sourceObject?.driver || sourceObject?.kind || 'postgres';
 };
+
+export const inputStyles =
+  'w-full block h-10 shadow-sm rounded border-gray-300 hover:border-gray-400 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400 disabled:bg-gray-100 disabled:cursor-not-allowed';
+export const focusYellowRing =
+  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-400';