[DOP-23575] add Fieldset component and improve some details

Author: Zabilsya

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,11 @@
 @descriptions-title-margin-bottom: 16px;
 
 @modal-header-title-font-size: 18px;
+
+@typography-title-margin-bottom: 0;
+
+// @form-item-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} />