console: migrate events to tailwind

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4552 GitOrigin-RevId: 7b4d54ec00c3ed7e8c48a3a6f0c4569ee38966e5
2024-12-15 09:22:43 +03:00 · 2022-06-13 11:24:10 +02:00 · 2022-06-13 11:24:10 +02:00 · 40ba20f7f7
commit 40ba20f7f7
parent 7d8fa3a5ee
15 changed files with 30 additions and 322 deletions
--- a/console/src/components/Services/Actions/Common/components/HandlerEditor.tsx
+++ b/console/src/components/Services/Actions/Common/components/HandlerEditor.tsx
@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDebouncedEffect } from '@/hooks/useDebounceEffect';
+import { inputStyles } from '../../constants';

 const editorLabel = 'Webhook (HTTP/S) Handler';

@ -41,7 +42,7 @@ const HandlerEditor: React.FC<HandlerEditorProps> = ({
        value={localValue}
        onChange={e => setLocalValue(e.target.value)}
        placeholder="http://custom-logic.com/api"
-        className="input mb-sm"
+        className={inputStyles}
        data-test="action-create-handler-input"
      />
      <p className="text-sm text-gray-600">
--- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
+++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
@ -750,7 +750,7 @@ const ViewRows = props => {
          <b className="pr-xs">Selected:</b>
          {selectedRows.length}
          <button
-            className="ml-xs text-md bg-white border rounded-sm border-gray-400 px-1"
+            className="ml-xs text-base bg-white border rounded-sm border-gray-400 px-1"
            title="Delete selected rows"
            onClick={handleDeleteItems}
            data-test="bulk-delete"
--- a/console/src/components/Services/Events/AdhocEvents/Add/Add.tsx
+++ b/console/src/components/Services/Events/AdhocEvents/Add/Add.tsx
@ -89,7 +89,7 @@ const Add: React.FC<Props> = ({ dispatch }) => {
        />
      </FormSection>
      <CollapsibleToggle
-        title={<h2 className="text-sm font-bold pb-md mt-0 mb-0">Advanced</h2>}
+        title={<h2 className="text-lg font-bold pb-md mt-0 mb-0">Advanced</h2>}
        testId="event-advanced-configuration"
      >
        <FormSection
--- a/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx
+++ b/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx
@ -10,7 +10,7 @@ import Headers from '../../../../Common/Headers/Headers';
 import RetryConf from './RetryConfEditor';
 import FrequentlyUsedCrons from './FrequentlyUsedCrons';
 import FormSection from './FormSection';
-import { inputStyles, subHeading } from '../../constants';
+import { heading, inputStyles } from '../../constants';

 type Props = ReturnType<typeof useScheduledTrigger>;

@ -101,7 +101,7 @@ const Form: React.FC<Props> = props => {
        />
      </FormSection>
      <CollapsibleToggle
-        title={<h2 className={subHeading}>Advanced</h2>}
+        title={<h2 className={heading}>Advanced</h2>}
        testId="advanced-configuration"
      >
        <FormSection
--- a/console/src/components/Services/Events/Common/Components/FormSection.tsx
+++ b/console/src/components/Services/Events/Common/Components/FormSection.tsx
@ -10,7 +10,7 @@ interface Props extends React.ComponentProps<React.FC> {
 const FormSection: React.FC<Props> = ({ children, id, tooltip, heading }) => {
  return (
    <div className="mb-md">
-      <h2 className="text-sm font-bold pb-md mb-xs">
+      <h2 className="text-lg font-bold pb-sm">
        {heading}
        {tooltip && <Tooltip id={id} message={tooltip} className="ml-xs" />}
      </h2>
--- a/console/src/components/Services/Events/CronTriggers/Add/index.tsx
+++ b/console/src/components/Services/Events/CronTriggers/Add/index.tsx
@ -10,7 +10,7 @@ import {
 } from '../../../../Common/utils/reactUtils';
 import { MapStateToProps } from '../../../../../types';
 import { addScheduledTrigger } from '../../ServerIO';
-import { EVENTS_SERVICE_HEADING, CRON_TRIGGER, heading } from '../../constants';
+import { EVENTS_SERVICE_HEADING, CRON_TRIGGER } from '../../constants';

 interface Props extends InjectedProps {
  initState?: LocalScheduledTriggerState;
@ -35,7 +35,9 @@ const Main: React.FC<Props> = props => {
          EVENTS_SERVICE_HEADING
        )}
      />
-      <div className={`${heading} mb-md`}>Create a cron trigger</div>
+      <div className="font-bold mb-xl text-[18px] pb-0">
+        Create a cron trigger
+      </div>
      <CronTriggerFrom state={state} setState={setState} />
      {!readOnlyMode && (
        <Button
--- a/console/src/components/Services/Events/EventTriggers/Add/Add.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Add/Add.tsx
@ -41,7 +41,7 @@ import { MapStateToProps } from '../../../../../types';
 import { useEventTrigger } from '../state';
 import { Header } from '../../../../Common/Headers/Headers';
 import { createEventTrigger } from '../../ServerIO';
-import { EVENTS_SERVICE_HEADING, heading } from '../../constants';
+import { EVENTS_SERVICE_HEADING } from '../../constants';
 import { mapDispatchToPropsEmpty } from '../../../../Common/utils/reactUtils';
 import { getDataSources } from '../../../../../metadata/selector';
 import { DataSource } from '../../../../../metadata/types';
@ -370,13 +370,14 @@ const Add: React.FC<Props> = props => {
  return (
    <div className="w-full overflow-y-auto bg-gray-50">
      <div className="max-w-6xl">
-        <div className="pt-lg pb-lg clear-both pl-md">
+        <div className="pt-md pb-md clear-both pl-md">
          <Helmet
            title={`Add Event Trigger | ${EVENTS_SERVICE_HEADING} - Hasura`}
          />
          <div>
-            <h2 className={heading}>Create a new event trigger</h2>
-            <div className="clearfix" />
+            <h2 className="text-subtitle font-bold pb-md mt-0 mb-0">
+              Create a new event trigger
+            </h2>
          </div>
          <br />
          <div className="w-full pl-0">
--- a/console/src/components/Services/Events/EventTriggers/Common/Operations.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Common/Operations.tsx
@ -57,7 +57,7 @@ export const Operations: React.FC<OperationProps> = ({
              <input
                onChange={o.onChange}
                data-test={o.testIdentifier}
-                className="cursor-pointer legacy-input-fix"
+                className="cursor-pointer disabled:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-200 border-gray-200 rounded-sm"
                type="checkbox"
                name={o.name}
                checked={o.isChecked}
--- a/console/src/components/Services/Events/EventTriggers/Modify/Modify.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Modify/Modify.tsx
@ -359,6 +359,7 @@ const Modify: React.FC<Props> = props => {
            isAllColumnChecked={state.isAllColumnChecked}
            handleColumnRadioButton={setState.toggleAllColumnChecked}
          />
+          <hr className="my-md" />
          <RetryConfEditor
            conf={state.retryConf}
            setRetryConf={setState.retryConf}
--- a/console/src/components/Services/Events/EventTriggers/Modify/ModifyEvent.scss
+++ b/console/src/components/Services/Events/EventTriggers/Modify/ModifyEvent.scss
@ -1,297 +0,0 @@
-@import "../TableCommon/EventTable.scss";
-
-.containerWhole {
-  padding: 0;
-  padding-left: 15px;
-  height: calc(100vh - 50px - 25px);
-  overflow: auto;
-  padding-right: 15px;
-  padding-top: 20px;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.modifySection {
-  display: flex;
-  flex-direction: column;
-  margin: 10px 0;
-}
-
-.modifySectionHeading {
-  font-weight: bold;
-  font-size: 15px;
-  margin-bottom: 20px;
-}
-
-.modifyEditButton {
-  display: flex;
-  flex-direction: column;
-  max-width: 40px;
-  align-items: center;
-  justify-content: center;
-  max-height: 23px;
-  margin-bottom: 10px;
-}
-
-.modifySaveButton {
-  display: flex;
-  flex-direction: column;
-  max-width: 40px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-.modifySaveButtonDisabled {
-  display: flex;
-  flex-direction: column;
-  max-width: 55px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-.modifyWebhookCollapsed {
-  display: flex;
-  flex-direction: row;
-  margin: 10px 0;
-}
-
-.modifyWebhookExpanded {
-  display: flex;
-  margin: 10px 0;
-  padding: 10px;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid #ccc;
-  max-width: 700px;
-}
-
-.textRight {
-  text-align: right;
-}
-
-.modifyOpsCollapsedContent {
-  max-width: 530px;
-  display: block;
-  flex-direction: row;
-  font-size: 13px;
-  align-items: center;
-}
-
-.modifyOpsCollapsedContent1 {
-  padding-bottom: 5px;
-  max-width: 530px;
-  display: flex;
-  flex-direction: row;
-  font-size: 13px;
-  align-items: center;
-}
-
-.modifyOpsCollapsedContent p, .modifyOpsCollapsedContent1 p {
-  margin-bottom: 0;
-  font-size: 14px;
-}
-
-.modifyHeadersCollapsedContent {
-  padding-bottom: 10px;
-  max-width: 600px;
-  display: flex;
-  flex-direction: row;
-  font-size: 13px;
-}
-
-modifyHeadersCollapsedHeadings {
-  max-width: 600px;
-  display: flex;
-  flex-direction: row;
-  font-size: 13px;
-}
-
-.modifyHeadersCollapsedContent p{
-  font-size: 14px;
-  width: 100%
-}
-
-.modifyOpsCollapsed {
-  display: block;
-  margin: 10px 0;
-  flex-direction: row;
-}
-
-.modifyOpsExpanded {
-  display: flex;
-  margin: 10px 0;
-  padding: 10px;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid #ccc;
-  max-width: 700px;
-}
-
-.modifyWhDropdownWrapper {
-  padding-bottom: 10px;
-  padding-top: 10px;
-  max-width: 408px;
-}
-
-.modifyProperty {
-  align-self: center;
-  font-size: 13px;
-  display:flex;
-  flex-direction: row;
-}
-
-.modifyProperty p{
-  font-size: 14px;
-}
-
-.modifyOpsCollapsedtitle {
-  margin:5px 0;
-
-  i {
-    font-size: 11px;
-  }
-}
-
-.opsCheckboxWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1;
-  margin: 10px 0;
-
-  input {
-    margin-top: 0;
-  }
-}
-
-.opsCheckboxWrapper p {
-  font-size: 13px;
-  font-style:italic;
-  align-self: center;
-  margin-top: 8px;
-}
-
-.headersInputWrapper {
-  margin: 0 10px;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.headersInputWrapper p {
-  font-size: 13px;
-  font-style:italic;
-  align-self: center;
-  margin-top: 8px;
-}
-
-.modifyOps {
-  display: flex;
-  flex-direction: column;
-}
-
-.modifyHeaders {
-  display: flex;
-  flex-direction: column;
-  width: 70%;
-}
-
-.modifyOpsPadLeft {
-  display: flex;
-  flex-direction: column;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.opsCheckbox {
-  margin-right: 5px !important;
-}
-
-
-.opsCheckboxDisabled {
-  margin-right: 5px !important;
-}
-
-.opsCheckboxDisabled:hover {
-  margin-right: 5px !important;
-  cursor: default;
-}
-
-
-.modifyHeadersTextbox {
-  width: 200px;
-}
-
-
-.modifyHeadersTextboxDisabled {
-  width: 200px;
-}
-
-
-.modifyHeadersTextboxDisabled:hover {
-  width: 200px;
-  cursor: text;
-}
-
-.modifyHeadersDropdown {
-  width: 200px;
-}
-
-.modifyRetryConfTextbox {
-  height: 25px;
-  width: 100px;
-}
-
-.removeHeader {
-  align-self: center;
-}
-
-.modifyHeaderCollapsedInput {
-  width: 200px;
-}
-
-
-.modifyHeaderCollapsedInput:hover {
-  cursor: text;
-}
-
-.info {
-  display: flex;
-  flex-direction: row;
-  margin: 5px 0;
-
-  input {
-    height: 25px;
-    margin-left: 5px;
-    width: 300px
-  }
-}
-
-.infoContent {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-
-  table {
-    width: 80%;
-    margin-top: 20px;
-  }
-}
-
-.borderBottom {
-  border-bottom: 1px solid #eee;
-  margin-bottom: 20px;
-}
-
-.cursorPointer {
-  cursor: pointer;
-}
-
-.addPaddSmall {
-  padding-left: 5px;
-}
--- a/console/src/components/Services/Events/EventTriggers/Modify/OperationEditor.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Modify/OperationEditor.tsx
@ -81,7 +81,7 @@ export const OperationEditor: React.FC<OperationEditorProps> = props => {
      <div>
        {ops.update ? (
          <>
-            <div className={`w-full p-0 m-sm ${focusYellowRing}`}>
+            <div className={`w-full p-0 mr-md mt-md ${focusYellowRing}`}>
              <ColumnSelectionRadioButton
                isAllColumnChecked={isAllColumnChecked}
                handleColumnRadioButton={handleColumnRadioButton}
@ -90,7 +90,7 @@ export const OperationEditor: React.FC<OperationEditorProps> = props => {
            </div>
            <>
              {!isAllColumnChecked ? (
-                <div className="w-fill p-0">
+                <div className="w-full p-0">
                  {opCols.map(col => {
                    const toggle = () => {
                      if (!readOnly) {
@ -106,13 +106,13 @@ export const OperationEditor: React.FC<OperationEditorProps> = props => {
                    };
                    return (
                      <label
-                        className="m-sm float-left p-0 pointer-cursor"
+                        className="mr-md my-md p-0 pointer-cursor"
                        key={col.name}
                        onChange={toggle}
                      >
                        <input
                          type="checkbox"
-                          className={`!mr-xs cursor-pointer ${focusYellowRing}`}
+                          className={`!mr-xs cursor-pointer ${focusYellowRing} disabled:bg-gray-200 disabled:cursor-not-allowed disabled:text-gray-200 border-gray-200 rounded-sm bg-white`}
                          checked={col.enabled}
                          disabled={readOnly}
                          readOnly
@ -140,9 +140,9 @@ export const OperationEditor: React.FC<OperationEditorProps> = props => {
  const expanded = () => renderEditor(operations, operationColumns, false);

  return (
-    <div className="w-full pb-md">
+    <div className="w-full">
      <div>
-        <h4 className="font-bold text-md mb-md">Trigger Operations</h4>
+        <h4 className="font-bold text-lg mb-md">Trigger Operations</h4>
        <Editor
          editorCollapsed={collapsed}
          editorExpanded={expanded}
--- a/console/src/components/Services/Events/EventTriggers/Modify/RetryConfEditor.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Modify/RetryConfEditor.tsx
@ -52,8 +52,8 @@ const RetryConfEditor = (props: RetryConfEditorProps) => {
  );

  return (
-    <div className="mb-lg w-6/12">
-      <h2 className="text-lg font-bold mb-xs flex items-center">
+    <div className="my-lg mt-sm w-6/12">
+      <h2 className="text-lg font-bold mb-xs items-center ">
        Retry Configuration
      </h2>
      <p className="text-sm mb-sm text-gray-600">
--- a/console/src/components/Services/Events/EventTriggers/Modify/WebhookEditor.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Modify/WebhookEditor.tsx
@ -80,7 +80,7 @@ const WebhookEditor = (props: WebhookEditorProps) => {
  return (
    <div className="w-full border-b border-solid border-gray-300 mb-md">
      <div className="mb-md">
-        <h4 className="text-md font-bold mb-md">Webhook (HTTP/S) Handler</h4>
+        <h4 className="text-lg font-bold mb-md">Webhook (HTTP/S) Handler</h4>
        <Editor
          editorCollapsed={collapsed}
          editorExpanded={expanded}
--- a/console/src/components/Services/RemoteSchema/Common/Common.js
+++ b/console/src/components/Services/RemoteSchema/Common/Common.js
@ -130,7 +130,7 @@ class Common extends React.Component {
        </div>
        <label className="ml-0 pl-0 w-80">
          <input
-            className={inputStyles}
+            className={`${inputStyles} disabled:bg-[#EFEFEF]`}
            type="text"
            placeholder="Name of the schema"
            value={name}
--- a/console/src/new-components/CardRadioGroup/CardRadioGroup.tsx
+++ b/console/src/new-components/CardRadioGroup/CardRadioGroup.tsx
@ -31,7 +31,7 @@ export const CardRadioGroup = <T extends string = string>(
        return (
          <div
            className={clsx(
-              'bg-white shadow-sm rounded p-md border border-gray-300 cursor-pointer',
+              'bg-white shadow-sm rounded p-md border border-gray-300 cursor-pointer flex',
              value === iValue && 'ring-2 ring-yellow-200 border-yellow-400'
            )}
            key={iValue}
@ -53,7 +53,7 @@ export const CardRadioGroup = <T extends string = string>(
            <div className="ml-sm">
              <label
                htmlFor={`radio-select-${iValue}`}
-                className="cursor-pointer font-semibold"
+                className="cursor-pointer font-semibold mb-sm"
              >
                {title}
              </label>