mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 17:31:56 +03:00
console: migrate events to tailwind
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4552 GitOrigin-RevId: 7b4d54ec00c3ed7e8c48a3a6f0c4569ee38966e5
This commit is contained in:
Erik Magnusson
hasura-bot
parent
7d8fa3a5ee
commit
40ba20f7f7
@ -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">
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user