console: migrate events to tailwind

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4552
GitOrigin-RevId: 7b4d54ec00c3ed7e8c48a3a6f0c4569ee38966e5

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">

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"

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

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

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>

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

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">

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}

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}

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;
-}

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}

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">

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}

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}

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>