console: add auto clean form on events tab

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5956 Co-authored-by: Daniele Cammareri <5709409+dancamma@users.noreply.github.com> GitOrigin-RevId: febb6ae707c9ac9c1e77a25aa01c2d2283c0d7d9
2024-12-15 01:12:56 +03:00 · 2022-09-21 20:53:32 +05:30 · 2022-09-21 20:53:32 +05:30 · a7c0b02296
commit a7c0b02296
parent e369f567c3
19 changed files with 381 additions and 38 deletions
--- a/console/src/components/Services/AllowList/AllowListDetail.tsx
+++ b/console/src/components/Services/AllowList/AllowListDetail.tsx
@ -1,8 +1,8 @@
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
 import { browserHistory } from 'react-router';

 import { Tabs } from '@/new-components/Tabs';
-import { useConsoleConfig } from '@/hooks/useEnvVars';
 import {
  useQueryCollections,
  QueryCollectionsOperations,
@ -11,6 +11,7 @@ import {
 import { AllowListSidebar, AllowListPermissions } from '@/features/AllowLists';

 import PageContainer from '@/components/Common/Layout/PageContainer/PageContainer';
+import { isProConsole } from '@/utils/proConsole';

 interface AllowListDetailProps {
  params: {
@ -35,8 +36,6 @@ export const AllowListDetail: React.FC<AllowListDetailProps> = props => {
    isRefetching,
  } = useQueryCollections();

-  const { type } = useConsoleConfig();
-
  const queryCollection = queryCollections?.find(
    ({ name: collectionName }) => collectionName === name
  );
@ -86,7 +85,7 @@ export const AllowListDetail: React.FC<AllowListDetailProps> = props => {
              />
            </div>
          )}
-          {type !== 'oss' ? (
+          {isProConsole(window.__env) ? (
            <Tabs
              value={section}
              onValueChange={value => {
--- a/console/src/components/Services/Events/EventTriggers/Add/Add.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Add/Add.tsx
@ -54,6 +54,7 @@ import {
  ETOperationColumn,
  EventTriggerOperation,
  RetryConf,
+  EventTriggerAutoCleanup,
 } from '../../types';

 interface Props extends InjectedProps {}
@ -317,6 +318,10 @@ const Add: React.FC<Props> = props => {
    setState.operations(o);
  };

+  const handleAutoCleanupChange = (config: EventTriggerAutoCleanup) => {
+    setState.cleanupConfig(config);
+  };
+
  const handleOperationsColumnsChange = (oc: ETOperationColumn[]) => {
    setState.operationColumns(oc);
  };
@ -361,6 +366,7 @@ const Add: React.FC<Props> = props => {
                  handleRetryConfChange={handleRetryConfChange}
                  handleHeadersChange={handleHeadersChange}
                  handleToggleAllColumn={setState.toggleAllColumnChecked}
+                  handleAutoCleanupChange={handleAutoCleanupChange}
                />
                <ConfigureTransformation
                  transformationType="event"
--- a/console/src/components/Services/Events/EventTriggers/Add/CreateETForm.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Add/CreateETForm.tsx
@ -1,7 +1,9 @@
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
+import { Collapsible } from '@/new-components/Collapsible';
+import { isProConsole } from '@/utils/proConsole';
 import { LocalEventTriggerState } from '../state';
 import Headers, { Header } from '../../../../Common/Headers/Headers';
-import CollapsibleToggle from '../../../../Common/CollapsibleToggle/CollapsibleToggle';
 import RetryConfEditor from '../../Common/Components/RetryConfEditor';
 import * as tooltip from '../Common/Tooltips';
 import { Operations } from '../Common/Operations';
@ -12,11 +14,13 @@ import {
  ETOperationColumn,
  EventTriggerOperation,
  RetryConf,
+  EventTriggerAutoCleanup,
 } from '../../types';
 import ColumnList from '../Common/ColumnList';
 import FormLabel from './FormLabel';
 import DebouncedDropdownInput from '../Common/DropdownWrapper';
 import { inputStyles, heading } from '../../constants';
+import { AutoCleanupForm } from '../Common/AutoCleanupForm';

 type CreateETFormProps = {
  state: LocalEventTriggerState;
@ -34,6 +38,7 @@ type CreateETFormProps = {
  handleRetryConfChange: (r: RetryConf) => void;
  handleHeadersChange: (h: Header[]) => void;
  handleToggleAllColumn: () => void;
+  handleAutoCleanupChange: (config: EventTriggerAutoCleanup) => void;
 };

 const CreateETForm: React.FC<CreateETFormProps> = props => {
@ -48,6 +53,7 @@ const CreateETForm: React.FC<CreateETFormProps> = props => {
      operations,
      operationColumns,
      isAllColumnChecked,
+      cleanupConfig,
    },
    databaseInfo,
    dataSourcesList,
@ -63,9 +69,11 @@ const CreateETForm: React.FC<CreateETFormProps> = props => {
    handleRetryConfChange,
    handleHeadersChange,
    handleToggleAllColumn,
+    handleAutoCleanupChange,
  } = props;

  const supportedDrivers = getSupportedDrivers('events.triggers.add');
+
  return (
    <>
      <FormLabel
@ -190,9 +198,25 @@ const CreateETForm: React.FC<CreateETFormProps> = props => {
        </small>
      </div>
      <hr className="my-md" />
-      <CollapsibleToggle
-        title={<h4 className={heading}>Advanced Settings</h4>}
-        testId="advanced-settings"
+      {isProConsole(window.__env) && (
+        <>
+          <div className="mb-md">
+            <div className="mb-md cursor-pointer">
+              <AutoCleanupForm
+                cleanupConfig={cleanupConfig}
+                onChange={handleAutoCleanupChange}
+              />
+            </div>
+          </div>
+          <hr className="my-md" />
+        </>
+      )}
+      <Collapsible
+        triggerChildren={
+          <h2 className="text-lg font-semibold mb-xs flex items-center mb-0">
+            Advanced Settings
+          </h2>
+        }
      >
        <div>
          <div>
@ -232,7 +256,7 @@ const CreateETForm: React.FC<CreateETFormProps> = props => {
            <Headers headers={headers} setHeaders={handleHeadersChange} />
          </div>
        </div>
-      </CollapsibleToggle>
+      </Collapsible>
      <hr className="my-md" />
    </>
  );
--- a/console/src/components/Services/Events/EventTriggers/Common/AutoCleanupForm.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Common/AutoCleanupForm.tsx
@ -0,0 +1,151 @@
+import defaultState from '@/components/Services/Events/EventTriggers/state';
+import { Collapsible } from '@/new-components/Collapsible';
+import { DropdownButton } from '@/new-components/DropdownButton';
+import { InputSection } from '@/new-components/InputSetionWithoutForm';
+import { Switch } from '@/new-components/Switch';
+import React from 'react';
+import { EventTriggerAutoCleanup } from '../../types';
+
+interface AutoCleanupFormProps {
+  cleanupConfig: EventTriggerAutoCleanup;
+  onChange: (cleanupConfig: EventTriggerAutoCleanup) => void;
+}
+
+const crons = [
+  { value: '* * * * *', label: 'Every Minute' },
+  { value: '*/10 * * * *', label: 'Every 10 Minutes' },
+  { value: '0 0 * * *', label: 'Every Midnight' },
+  { value: '0 0 1 * *', label: 'Every Month Start' },
+  { value: '0 12 * * 5', label: 'Every Friday Noon' },
+];
+
+export const AutoCleanupForm = (props: AutoCleanupFormProps) => {
+  const { cleanupConfig, onChange } = props;
+  return (
+    <div className="w-1/2">
+      <Collapsible
+        triggerChildren={
+          <h2 className="text-lg font-semibold mb-xs flex items-center mb-0">
+            Auto-cleanup Event Logs
+          </h2>
+        }
+      >
+        <div className="flex items-center mb-sm">
+          <Switch
+            checked={!cleanupConfig.paused}
+            onCheckedChange={() => {
+              onChange({
+                ...cleanupConfig,
+                paused: !cleanupConfig.paused,
+              });
+            }}
+          />
+          <span className="ml-xs cursor-pointer">Enable event log cleanup</span>
+        </div>
+        <div className="flex items-center mb-sm">
+          <Switch
+            checked={cleanupConfig.clean_invocation_logs}
+            disabled={cleanupConfig.paused}
+            onCheckedChange={() => {
+              onChange({
+                ...cleanupConfig,
+                clean_invocation_logs: !cleanupConfig.clean_invocation_logs,
+              });
+            }}
+          />
+          <span className="ml-xs cursor-pointer">
+            Clean invocation logs with event logs
+          </span>
+        </div>
+        <InputSection
+          label="Clear logs older than (hours)"
+          tooltip="Clear event logs older than (in hours, default:168 hours or 7
+            days)"
+          placeholder={
+            defaultState.cleanupConfig.clear_older_than?.toString() || ''
+          }
+          value={cleanupConfig.clear_older_than?.toString() || ''}
+          onChange={value => {
+            onChange({
+              ...cleanupConfig,
+              clear_older_than: value ? parseInt(value, 10) : undefined,
+            });
+          }}
+        />
+        <InputSection
+          label="Cleanup Frequency"
+          tooltip="Cron expression at which the cleanup should be invoked."
+          placeholder={defaultState.cleanupConfig.timeout?.toString() || ''}
+          value={cleanupConfig.schedule?.toString() || ''}
+          onChange={value => {
+            onChange({
+              ...cleanupConfig,
+              schedule: value,
+            });
+          }}
+        />
+
+        <div className="my-sm">
+          <DropdownButton
+            items={[
+              crons.map(cron => (
+                <div
+                  key={cron.value}
+                  onClick={() => {
+                    onChange({
+                      ...cleanupConfig,
+                      schedule: cron.value,
+                    });
+                  }}
+                  className="cursor-pointer mx-1 px-xs py-1 rounded hover:bg-gray-100"
+                >
+                  <p className="mb-0 font-semibold whitespace-nowrap">
+                    {cron.label}
+                  </p>
+                  <p className="mb-0">{cron.value}</p>
+                </div>
+              )),
+            ]}
+          >
+            <span className="font-bold">Frequent Frequencies</span>
+          </DropdownButton>
+        </div>
+        <Collapsible
+          triggerChildren={
+            <h2 className="text-lg font-semibold mb-xs flex items-center mb-0">
+              Advanced Settings
+            </h2>
+          }
+        >
+          <InputSection
+            label="Timeout (seconds)"
+            tooltip="Timeout for the query (in seconds, default: 60)"
+            placeholder={defaultState.cleanupConfig.timeout?.toString() || ''}
+            value={cleanupConfig.timeout?.toString() || ''}
+            onChange={value => {
+              onChange({
+                ...cleanupConfig,
+                timeout: value ? parseInt(value, 10) : undefined,
+              });
+            }}
+          />
+
+          <InputSection
+            label="Batch Size"
+            tooltip="Number of event trigger logs to delete in a batch (default: 10,000)"
+            placeholder={
+              defaultState.cleanupConfig.batch_size?.toString() || ''
+            }
+            value={cleanupConfig.batch_size?.toString() || ''}
+            onChange={value => {
+              onChange({
+                ...cleanupConfig,
+                batch_size: value ? parseInt(value, 10) : undefined,
+              });
+            }}
+          />
+        </Collapsible>
+      </Collapsible>
+    </div>
+  );
+};
--- a/console/src/components/Services/Events/EventTriggers/Modify/Modify.tsx
+++ b/console/src/components/Services/Events/EventTriggers/Modify/Modify.tsx
@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import React, { useEffect, useReducer } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import {
@ -31,12 +32,14 @@ import {
 import ConfigureTransformation from '@/components/Common/ConfigureTransformation/ConfigureTransformation';
 import requestAction from '@/utils/requestAction';
 import Endpoints from '@/Endpoints';
+import defaultState from '@/components/Services/Events/EventTriggers/state';
 import {
  getValidateTransformOptions,
  parseValidateApiData,
  getTransformState,
 } from '@/components/Common/ConfigureTransformation/utils';
 import { Button } from '@/new-components/Button';
+import { isProConsole } from '@/utils/proConsole';
 import { getSourceDriver } from '../../../Data/utils';
 import { mapDispatchToPropsEmpty } from '../../../../Common/utils/reactUtils';
 import { getEventRequestSampleInput } from '../utils';
@ -57,6 +60,7 @@ import {
  getDataSources,
  getEventTriggerByName,
 } from '../../../../../metadata/selector';
+import { AutoCleanupForm } from '../Common/AutoCleanupForm';

 interface Props extends InjectedProps {}

@ -384,6 +388,16 @@ const Modify: React.FC<Props> = props => {
            requestUrlTransformOnChange={requestUrlTransformOnChange}
            requestPayloadTransformOnChange={requestPayloadTransformOnChange}
          />
+          {isProConsole(window.__env) && (
+            <div className="mb-md">
+              <AutoCleanupForm
+                onChange={setState.cleanupConfig}
+                cleanupConfig={
+                  state?.cleanupConfig || defaultState.cleanupConfig
+                }
+              />
+            </div>
+          )}
          {!readOnlyMode && (
            <div className="mb-md">
              <span className="mr-md">
--- a/console/src/components/Services/Events/EventTriggers/state.ts
+++ b/console/src/components/Services/Events/EventTriggers/state.ts
@ -6,6 +6,7 @@ import {
  EventTrigger,
  RetryConf,
  DatabaseInfo,
+  EventTriggerAutoCleanup,
 } from '../types';
 import { Header, defaultHeader } from '../../../Common/Headers/Headers';
 import {
@ -27,9 +28,10 @@ export type LocalEventTriggerState = {
  headers: Header[];
  source: string;
  isAllColumnChecked: boolean;
+  cleanupConfig: EventTriggerAutoCleanup;
 };

-const defaultState: LocalEventTriggerState = {
+export const defaultState: LocalEventTriggerState = {
  name: '',
  table: {
    name: '',
@ -54,6 +56,14 @@ const defaultState: LocalEventTriggerState = {
  headers: [defaultHeader],
  source: '',
  isAllColumnChecked: true,
+  cleanupConfig: {
+    schedule: '0 0 * * *',
+    batch_size: 10000,
+    clear_older_than: 168,
+    timeout: 60,
+    clean_invocation_logs: false,
+    paused: true,
+  },
 };

 export const parseServerETDefinition = (
@ -89,6 +99,8 @@ export const parseServerETDefinition = (
    retryConf: etConf.retry_conf,
    headers: parseServerHeaders(eventTrigger.configuration.headers),
    isAllColumnChecked: etDef?.update?.columns === '*',
+    cleanupConfig:
+      eventTrigger.configuration?.cleanup_config ?? defaultState.cleanupConfig,
  };
 };

@ -175,6 +187,12 @@ export const useEventTrigger = (initState?: LocalEventTriggerState) => {
          isAllColumnChecked: !s.isAllColumnChecked,
        }));
      },
+      cleanupConfig: (cleanupConfig: EventTriggerAutoCleanup) => {
+        setState(s => ({
+          ...s,
+          cleanupConfig,
+        }));
+      },
    },
  };
 };
--- a/console/src/components/Services/Events/ServerIO.ts
+++ b/console/src/components/Services/Events/ServerIO.ts
@ -64,6 +64,7 @@ import _push from '../Data/push';
 import { RequestTransformState } from '../../Common/ConfigureTransformation/stateDefaults';
 import { getRequestTransformObject } from '../../Common/ConfigureTransformation/utils';
 import { getSourceDriver } from '../Data/utils';
+import defaultState from '../Events/EventTriggers/state';

 export const addScheduledTrigger =
  (
@ -460,6 +461,10 @@ export const modifyEventTrigger =
        break;
      }
      default:
+        upQuery.args.cleanup_config = {
+          ...defaultState.cleanupConfig,
+          ...state.cleanupConfig,
+        };
        break;
    }
    const migration = new Migration();
--- a/console/src/components/Services/Events/types.ts
+++ b/console/src/components/Services/Events/types.ts
@ -82,6 +82,15 @@ export type ETOperationColumn = {
  enabled: boolean;
 };

+export type EventTriggerAutoCleanup = {
+  schedule?: string;
+  batch_size?: number;
+  clear_older_than?: number;
+  timeout?: number;
+  clean_invocation_logs: boolean;
+  paused: boolean;
+};
+
 export type EventTriggerOperationDefinition = {
  columns: string[] | '*';
 };
@ -100,6 +109,7 @@ export type EventTrigger = {
    retry_conf: RetryConf;
    webhook: Nullable<string>;
    webhook_from_env?: Nullable<string>;
+    cleanup_config?: EventTriggerAutoCleanup;
  };
  request_transform?: RequestTransform;
 };
--- a/console/src/features/AllowLists/components/AllowListSidebar/AllowListSidebarHeader.tsx
+++ b/console/src/features/AllowLists/components/AllowListSidebar/AllowListSidebarHeader.tsx
@ -1,7 +1,7 @@
-import { Button } from '@/new-components/Button';
-import { useConsoleConfig } from '@/hooks/useEnvVars';
-
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
+import { Button } from '@/new-components/Button';
+import { isProConsole } from '@/utils/proConsole';
 import { FaFolderPlus } from 'react-icons/fa';
 import { QueryCollectionCreateDialog } from './QueryCollectionCreateDialog';
 import { AllowListStatus } from './AllowListStatus';
@ -13,7 +13,6 @@ interface AllowListSidebarHeaderProps {
 export const AllowListSidebarHeader = (props: AllowListSidebarHeaderProps) => {
  const { onQueryCollectionCreate } = props;
  const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false);
-  const { type } = useConsoleConfig();
  return (
    <div className="pb-4">
      {isCreateModalOpen && (
@ -31,7 +30,7 @@ export const AllowListSidebarHeader = (props: AllowListSidebarHeaderProps) => {
            <AllowListStatus />
          </div>
        </div>
-        {type !== 'oss' && (
+        {isProConsole(window.__env) && (
          <div className="mt-2 2xl:mt-0 2xl:ml-auto">
            <Button
              icon={<FaFolderPlus />}
--- a/console/src/metadata/queryUtils.ts
+++ b/console/src/metadata/queryUtils.ts
@ -1,3 +1,4 @@
+import defaultState from '@/components/Services/Events/EventTriggers/state';
 import {
  ColumnConfig,
  CustomRootFields,
@ -523,6 +524,10 @@ export const generateCreateEventTriggerQuery = (
      enable_manual: state.operations.enable_manual,
      retry_conf: state.retryConf,
      headers: transformHeaders(state.headers),
+      cleanup_config: {
+        ...defaultState.cleanupConfig,
+        ...state.cleanupConfig,
+      },
      replace,
      request_transform: requestTransform,
    },
--- a/console/src/metadata/selector.ts
+++ b/console/src/metadata/selector.ts
@ -291,6 +291,7 @@ export const getEventTriggers = createSelector(getMetadata, metadata => {
              retry_conf: trigger.retry_conf,
              webhook: trigger.webhook || '',
              webhook_from_env: trigger.webhook_from_env,
+              cleanup_config: trigger.cleanup_config,
            },
            request_transform: trigger.request_transform,
          })) || [];
@ -340,6 +341,7 @@ export const getEventTriggerByName = createSelector(
              retry_conf: trigger.retry_conf,
              webhook: trigger.webhook || '',
              webhook_from_env: trigger.webhook_from_env,
+              cleanup_config: trigger.cleanup_config,
            },
            request_transform: trigger.request_transform,
          };
--- a/console/src/metadata/types.ts
+++ b/console/src/metadata/types.ts
@ -422,6 +422,15 @@ export interface ComputedFieldDefinition {
 * NOTE: The metadata type doesn't QUITE match the 'create' arguments here
 * https://hasura.io/docs/latest/graphql/core/api-reference/schema-metadata-api/event-triggers.html#create-event-trigger
 */
+
+export interface EventTriggerAutoCleanup {
+  schedule: string;
+  batch_size: number;
+  clear_older_than: number;
+  timeout: number;
+  clean_invocation_logs: boolean;
+  paused: boolean;
+}
 export interface EventTrigger {
  /** Name of the event trigger */
  name: TriggerName;
@ -436,6 +445,8 @@ export interface EventTrigger {
  headers?: ServerHeader[];
  /** Request transformation object */
  request_transform?: RequestTransform;
+  /** Auto-cleanup configuration object */
+  cleanup_config?: EventTriggerAutoCleanup;
 }

 export interface EventTriggerDefinition {
--- a/console/src/new-components/DropdownButton/DropdownButton.stories.tsx
+++ b/console/src/new-components/DropdownButton/DropdownButton.stories.tsx
@ -0,0 +1,68 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { within, userEvent, screen } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { Button } from '@/new-components/Button';
+
+import { DropdownButton } from './DropdownButton';
+
+export default {
+  title: 'components/Dropdown Button 🧬',
+  parameters: {
+    docs: { source: { type: 'code' } },
+    chromatic: { disableSnapshot: true },
+  },
+  decorators: [
+    Story => (
+      <div className="p-4 flex gap-5 items-center max-w-screen">{Story()}</div>
+    ),
+  ],
+  component: DropdownButton,
+  argTypes: {
+    onClick: { action: true },
+  },
+} as ComponentMeta<typeof DropdownButton>;
+
+export const Default: ComponentStory<typeof Button> = ({ onClick }) => (
+  <DropdownButton
+    data-testid="dropdown-button"
+    items={[
+      [
+        <span onClick={onClick}>Action</span>,
+        <span onClick={onClick} className="text-red-600">
+          Destructive Action
+        </span>,
+      ],
+      [<span onClick={onClick}>Another action</span>],
+    ]}
+  >
+    The DropdownButton label
+  </DropdownButton>
+);
+
+export const ApiPlayground: ComponentStory<typeof Button> = args => (
+  <DropdownButton
+    items={[
+      ['Action', <span className="text-red-600">Destructive Action</span>],
+      ['Another action'],
+    ]}
+    {...args}
+  >
+    The DropdownButton label
+  </DropdownButton>
+);
+
+Default.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // click the trigger
+  userEvent.click(canvas.getByTestId('dropdown-button'));
+  // the menu is visible
+  expect(screen.getByText('Another action')).toBeVisible();
+  // click the item
+  userEvent.click(screen.getByText('Another action'));
+  // the menu is not visible
+  expect(screen.queryByText('Another action')).not.toBeInTheDocument();
+  // the action is called
+  expect(args.onClick).toHaveBeenCalled();
+};
--- a/console/src/new-components/DropdownButton/DropdownButton.tsx
+++ b/console/src/new-components/DropdownButton/DropdownButton.tsx
@ -0,0 +1,23 @@
+import React from 'react';
+import { FaChevronDown } from 'react-icons/fa';
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+
+interface DropdownButtonProps extends React.ComponentProps<typeof Button> {
+  items: React.ReactNode[][];
+}
+
+export const DropdownButton: React.FC<DropdownButtonProps> = ({
+  items,
+  ...rest
+}) => (
+  <DropdownMenu items={items}>
+    <Button
+      iconPosition="end"
+      icon={
+        <FaChevronDown className="transition-transform group-radix-state-open:rotate-180 w-3 h-3" />
+      }
+      {...rest}
+    />
+  </DropdownMenu>
+);
--- a/console/src/new-components/DropdownButton/index.ts
+++ b/console/src/new-components/DropdownButton/index.ts
@ -0,0 +1 @@
+export * from './DropdownButton';
--- a/console/src/new-components/DropdownMenu/Dropdown.stories.mdx
+++ b/console/src/new-components/DropdownMenu/Dropdown.stories.mdx
@ -57,28 +57,6 @@ import { DropdownMenu } from '@/new-components/DropdownMenu';
  </Story>
 </Canvas>

-<Canvas>
-  <Story name="Dropdown Button">
-    <div>
-      <DropdownMenu
-        items={[
-          ['Action', <span className="text-red-600">Destructive Action</span>],
-          ['Another action'],
-        ]}
-      >
-        <Button
-          iconPosition="end"
-          icon={
-            <FaChevronUp className="transition-transform group-radix-state-open:rotate-180" />
-          }
-        >
-          Dropdown Button
-        </Button>
-      </DropdownMenu>
-    </div>
-  </Story>
-</Canvas>
-
 #### 🚦 Usage

 - The dropdownMenu button is used for opening a contextual menu with list of actions
--- a/console/src/new-components/InputSetionWithoutForm/InputSection.tsx
+++ b/console/src/new-components/InputSetionWithoutForm/InputSection.tsx
@ -0,0 +1,27 @@
+import React from 'react';
+import { IconTooltip } from '../Tooltip';
+
+export const InputSection = (props: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  tooltip: string;
+}) => {
+  const { label, value, onChange, placeholder, tooltip } = props;
+  return (
+    <div className="mb-sm">
+      <label className="flex items-center mb-xs font-semibold text-muted">
+        {label}
+        <IconTooltip message={tooltip} />
+      </label>
+      <input
+        type="text"
+        value={value}
+        onChange={event => onChange(event.target.value)}
+        placeholder={placeholder}
+        className="block w-full h-input shadow-sm rounded border border-gray-300 hover:border-gray-400 focus:outline-0 focus:ring-2 focus:ring-yellow-200 focus:border-yellow-400"
+      />
+    </div>
+  );
+};
--- a/console/src/new-components/InputSetionWithoutForm/index.tsx
+++ b/console/src/new-components/InputSetionWithoutForm/index.tsx
@ -0,0 +1 @@
+export { InputSection } from './InputSection';
--- a/console/src/new-components/Switch/Switch.tsx
+++ b/console/src/new-components/Switch/Switch.tsx
@ -3,11 +3,12 @@ import * as RadixSwitch from '@radix-ui/react-switch';
 import clsx from 'clsx';

 export const Switch = (props: RadixSwitch.SwitchProps) => {
-  const { checked } = props;
+  const { checked, disabled } = props;
  return (
    <RadixSwitch.Root
      className={clsx(
        checked ? 'bg-green-600' : 'bg-gray-200',
+        disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
        'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500'
      )}
      {...props}
				`@ -0,0 +1 @@`
				`export { InputSection } from './InputSection';`