[DOP-23575] add Fieldset component and improve some details (#65)

Co-authored-by: Zabilsya <kvcherniko@mts.ru>

src/app/layouts/PrivateLayout/index.tsx

@@ -3,12 +3,19 @@ import { Layout } from 'antd';
 import { Outlet } from 'react-router-dom';
 import { Header, Sidebar } from '@widgets/layout';
 import { SpinOverlay } from '@shared/ui';
+import { useSelectedGroup } from '@entities/group';
 
 import classes from './styles.module.less';
 
 const { Content } = Layout;
 
 export const PrivateLayout = () => {
+  const { isLoading } = useSelectedGroup();
+
+  if (isLoading) {
+    return <SpinOverlay />;
+  }
+
   return (
     <Layout className={classes.layout}>
       <Header />

src/app/styles/antd.less

@@ -22,7 +22,8 @@
   font-weight: 700;
 }
 
-.ant-table-cell {
+.ant-table-cell,
+.ant-form-item-explain-error {
   word-break: break-word;
 }
 
@@ -33,3 +34,9 @@
   justify-content: center;
   align-items: center;
 }
+
+.ant-menu {
+  position: sticky;
+  top: 0;
+  height: auto;
+}

src/app/styles/variables.less

@@ -1,5 +1,7 @@
 @border-radius-base: 8px;
 
+@layout-sider-background: @white;
+
 @menu-item-font-size: 16px;
 @menu-inline-toplevel-item-height: 48px;
 
@@ -12,3 +14,9 @@
 @descriptions-title-margin-bottom: 16px;
 
 @modal-header-title-font-size: 18px;
+
+@typography-title-margin-bottom: 0;
+
+@input-bg: #f1f3f5;
+@select-background: #f1f3f5;
+@picker-bg: #f1f3f5;

src/entities/connection/ui/ConnectionTypeForm/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Form, Select } from 'antd';
 import { CONNECTION_TYPE_SELECT_OPTIONS } from '@entities/connection';
+import { Fieldset } from '@shared/ui';
 
 import { ConnectionTypeFormProps } from './types';
 import { CONNECTION_TYPE_COMPONENT, SensitiveFieldsContext } from './constants';
@@ -10,7 +11,7 @@ export const ConnectionTypeForm = ({ initialType, isRequiredSensitiveFields = tr
   const { selectedConnectionType, handleSelectConnectionType } = useSelectConnectionType({ initialType });
 
   return (
-    <>
+    <Fieldset title="Connection settings">
       <Form.Item label="Type" name="type" rules={[{ required: true }]}>
         <Select
           size="large"
@@ -22,6 +23,6 @@ export const ConnectionTypeForm = ({ initialType, isRequiredSensitiveFields = tr
       <SensitiveFieldsContext.Provider value={{ isRequired: isRequiredSensitiveFields }}>
         {CONNECTION_TYPE_COMPONENT[selectedConnectionType!]}
       </SensitiveFieldsContext.Provider>
-    </>
+    </Fieldset>
   );
 };

src/entities/group/constants.ts

@@ -6,6 +6,7 @@ import { SelectedGroupContextProps } from './types';
 
 const SELECTED_GROUP_CONTEXT_INITIAL_VALUE: SelectedGroupContextProps = {
   group: null,
+  isLoading: true,
   selectGroup: () => undefined,
   cleanGroup: () => undefined,
 };

src/entities/group/providers/SelectedGroupProvider/index.tsx

@@ -1,16 +1,16 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useLayoutEffect, useState } from 'react';
 
 import { Group, useGetInitialGroup } from '../../api';
 import { SELECTED_GROUP_ID_LOCAL_STORAGE_KEY, SelectedGroupContext } from '../../constants';
 
 export const SelectedGroupProvider = ({ children }: PropsWithChildren) => {
-  const { data: initialGroup } = useGetInitialGroup({
+  const { data: initialGroup, isLoading } = useGetInitialGroup({
     id: Number(localStorage.getItem(SELECTED_GROUP_ID_LOCAL_STORAGE_KEY)),
   });
 
   const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (initialGroup) {
       setSelectedGroup(initialGroup);
     }
@@ -28,6 +28,7 @@ export const SelectedGroupProvider = ({ children }: PropsWithChildren) => {
 
   const contextValue = {
     group: selectedGroup,
+    isLoading: !selectedGroup && isLoading,
     selectGroup: handleSelectGroup,
     cleanGroup: handleCleanGroup,
   };

src/entities/group/types.ts

@@ -2,6 +2,7 @@ import { Group } from './api';
 
 export interface SelectedGroupContextProps {
   group: Group | null;
+  isLoading: boolean;
   selectGroup: (group: Group) => void;
   cleanGroup: () => void;
 }

src/features/auth/Login/styles.module.less

@@ -1,9 +1,10 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 32px;
   width: 360px;
   padding: 32px;
   background-color: @white;
   border-radius: 16px;
+  box-shadow: @box-shadow-base;
 }

src/features/connection/CreateConnection/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
+import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection';
@@ -28,13 +28,15 @@ export const CreateConnection = ({ group }: CreateConnectionProps) => {
       successMessage="Connection was created successfully"
       keysInvalidateQueries={[[{ queryKey: [ConnectionQueryKey.GET_CONNECTIONS, group.id] }]]}
     >
-      <FormCurrentGroupDescription groupName={group.name} />
-      <Form.Item label="Name" name="name" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
-      <Form.Item label="Description" name="description" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
+      <Fieldset title="Main info">
+        <FormCurrentGroupDescription groupName={group.name} />
+        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+        <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+      </Fieldset>
 
       <ConnectionTypeForm />
 

src/features/connection/UpdateConnection/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
+import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection';
@@ -33,15 +33,17 @@ export const UpdateConnection = ({ connection, group }: UpdateConnectionProps) =
         [{ queryKey: [ConnectionQueryKey.GET_CONNECTION, connectionId] }],
       ]}
     >
-      <FormCurrentGroupDescription groupName={group.name} />
+      <Fieldset title="Main info">
+        <FormCurrentGroupDescription groupName={group.name} />
 
-      <Form.Item label="Name" name="name" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
+        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
 
-      <Form.Item label="Description" name="description" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
+        <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+      </Fieldset>
 
       <ConnectionTypeForm initialType={connectionInitialValues.type} isRequiredSensitiveFields={false} />
 

src/features/group/CreateGroup/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, ManagedForm } from '@shared/ui';
+import { ControlButtons, Fieldset, ManagedForm } from '@shared/ui';
 import { GroupData, GroupQueryKey, groupService } from '@entities/group';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
@@ -22,13 +22,15 @@ export const CreateGroup = () => {
       successMessage="Group was created successfully"
       keysInvalidateQueries={[[{ queryKey: [GroupQueryKey.GET_GROUPS] }]]}
     >
-      <Form.Item label="Name" name="name" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
+      <Fieldset title="Main info">
+        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
 
-      <Form.Item label="Description" name="description" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
+        <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+      </Fieldset>
 
       <ControlButtons onCancel={onCancel} />
     </ManagedForm>

src/features/group/UpdateGroup/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, ManagedForm, ManagedSelect } from '@shared/ui';
+import { ControlButtons, Fieldset, ManagedForm, ManagedSelect } from '@shared/ui';
 import { GroupData, GroupQueryKey, groupService } from '@entities/group';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
@@ -34,27 +34,29 @@ export const UpdateGroup = ({ group }: UpdateGroupProps) => {
         [{ queryKey: [GroupQueryKey.GET_GROUP, group.id] }],
       ]}
     >
-      <Form.Item label="Name" name="name" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
-
-      <Form.Item label="Description" name="description" rules={[{ required: true }]}>
-        <Input size="large" />
-      </Form.Item>
-
-      <Form.Item label="Owner" name="owner_id" rules={[{ required: true }]}>
-        <ManagedSelect
-          size="large"
-          queryKey={[UserQueryKey.GET_USERS]}
-          queryFunction={userService.getUsers}
-          renderOptionValue={(user) => user.id}
-          renderOptionLabel={(user) => user.username}
-          detailQueryKey={[UserQueryKey.GET_USER]}
-          detailQueryFunction={(value) => userService.getUser({ id: value })}
-          //TODO: [DOP-20030] Need to delete prop "disabled" when the backend leaves the user with access to the group, even after changing the owner
-          disabled
-        />
-      </Form.Item>
+      <Fieldset title="Main info">
+        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+
+        <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+
+        <Form.Item label="Owner" name="owner_id" rules={[{ required: true }]}>
+          <ManagedSelect
+            size="large"
+            queryKey={[UserQueryKey.GET_USERS]}
+            queryFunction={userService.getUsers}
+            renderOptionValue={(user) => user.id}
+            renderOptionLabel={(user) => user.username}
+            detailQueryKey={[UserQueryKey.GET_USER]}
+            detailQueryFunction={(value) => userService.getUser({ id: value })}
+            //TODO: [DOP-20030] Need to delete prop "disabled" when the backend leaves the user with access to the group, even after changing the owner
+            disabled
+          />
+        </Form.Item>
+      </Fieldset>
 
       <ControlButtons onCancel={onCancel} />
     </ManagedForm>

src/features/queue/CreateQueue/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
+import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { Queue, QUEUE_NAME_REGEXP, QueueQueryKey, queueService } from '@entities/queue';
@@ -28,15 +28,15 @@ export const CreateQueue = ({ group }: CreateQueueProps) => {
       successMessage="Queue was created successfully"
       keysInvalidateQueries={[[{ queryKey: [QueueQueryKey.GET_QUEUES, group.id] }]]}
     >
-      <FormCurrentGroupDescription groupName={group.name} />
-
-      <Form.Item label="Name" name="name" rules={[{ required: true, pattern: QUEUE_NAME_REGEXP }]}>
-        <Input size="large" />
-      </Form.Item>
-
-      <Form.Item label="Description" name="description">
-        <Input size="large" />
-      </Form.Item>
+      <Fieldset title="Main info">
+        <FormCurrentGroupDescription groupName={group.name} />
+        <Form.Item label="Name" name="name" rules={[{ required: true, pattern: QUEUE_NAME_REGEXP }]}>
+          <Input size="large" />
+        </Form.Item>
+        <Form.Item label="Description" name="description">
+          <Input size="large" />
+        </Form.Item>
+      </Fieldset>
 
       <ControlButtons onCancel={onCancel} />
     </ManagedForm>

src/features/queue/UpdateQueue/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
+import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui';
 import { Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { Queue, QUEUE_NAME_REGEXP, QueueQueryKey, queueService } from '@entities/queue';
@@ -33,15 +33,17 @@ export const UpdateQueue = ({ queue, group }: UpdateQueueProps) => {
         [{ queryKey: [QueueQueryKey.GET_QUEUE, queue.id] }],
       ]}
     >
-      <FormCurrentGroupDescription groupName={group.name} />
+      <Fieldset title="Main info">
+        <FormCurrentGroupDescription groupName={group.name} />
 
-      <Form.Item label="Name" name="name" rules={[{ required: true, pattern: QUEUE_NAME_REGEXP }]}>
-        <Input size="large" disabled />
-      </Form.Item>
+        <Form.Item label="Name" name="name" rules={[{ required: true, pattern: QUEUE_NAME_REGEXP }]}>
+          <Input size="large" disabled />
+        </Form.Item>
 
-      <Form.Item label="Description" name="description">
-        <Input size="large" />
-      </Form.Item>
+        <Form.Item label="Description" name="description">
+          <Input size="large" />
+        </Form.Item>
+      </Fieldset>
 
       <ControlButtons onCancel={onCancel} />
     </ManagedForm>

src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConnectionQueryKey, connectionService } from '@entities/connection';
-import { ManagedSelect } from '@shared/ui';
-import { Divider, Form, Input } from 'antd';
+import { Fieldset, ManagedSelect } from '@shared/ui';
+import { Form, Input } from 'antd';
 
 import { useSelectConnectionType } from '../../hooks';
 
@@ -15,9 +15,8 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar
   });
 
   return (
-    <>
-      <Divider>Source params</Divider>
-      <Form.Item label="Source connection" name="source_connection_id" rules={[{ required: true }]}>
+    <Fieldset title="Source connection">
+      <Form.Item label="Connection" name="source_connection_id" rules={[{ required: true }]}>
         <ManagedSelect
           /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
           className="nodrag"
@@ -36,6 +35,6 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar
         <Input />
       </Form.Item>
       {TRANSFER_SOURCE_CONNECTION_TYPE_COMPONENT[selectedConnectionType!]}
-    </>
+    </Fieldset>
   );
 };