From 6fe0f7a3bcf0602ef8b2024014b7a23dcc17a853 Mon Sep 17 00:00:00 2001 From: X6uddy Date: Fri, 26 Apr 2024 23:45:34 +0400 Subject: [PATCH 1/5] [UI]EVEREST-1004-maxWidth-for-content-container changed the maximum width of the container --- .../everest/src/pages/db-cluster-details/db-cluster-details.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx index acefef626..773a1c4d7 100644 --- a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx +++ b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx @@ -62,7 +62,7 @@ export const DbClusterDetails = () => { // All clear, show the cluster data return ( - + Date: Mon, 29 Apr 2024 20:52:07 +0400 Subject: [PATCH 2/5] EVEREST-1004-maxWidth-for-content-container removing unused styles --- .../everest/src/pages/db-cluster-details/db-cluster-details.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx index 773a1c4d7..acefef626 100644 --- a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx +++ b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx @@ -62,7 +62,7 @@ export const DbClusterDetails = () => { // All clear, show the cluster data return ( - + Date: Mon, 29 Apr 2024 20:55:07 +0400 Subject: [PATCH 3/5] EVEREST-1004-maxWidth-for-content-container setting the maxWidth of 1280px --- ui/apps/everest/src/components/main/Main.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/apps/everest/src/components/main/Main.tsx b/ui/apps/everest/src/components/main/Main.tsx index 97bf67832..4d78ede24 100644 --- a/ui/apps/everest/src/components/main/Main.tsx +++ b/ui/apps/everest/src/components/main/Main.tsx @@ -58,6 +58,8 @@ export const Main = () => { activeBreakpoint === 'mobile' ? '100%' : `calc(100% - ${drawerWidth})`, + maxWidth: 1280, + mx: 'auto', }} > From cc2bf8f3d1184c5406f8e84b0b221c6c55801a6d Mon Sep 17 00:00:00 2001 From: Danila Date: Mon, 24 Jun 2024 22:38:05 +0400 Subject: [PATCH 4/5] EVEREST-1004 design review fix --- ui/apps/everest/src/components/main/Main.tsx | 2 -- .../DatabaseFormSideDrawer.tsx | 11 +++-------- .../src/pages/database-form/database-form.tsx | 6 +++--- .../everest/src/pages/databases/DbClusterView.tsx | 12 +++++++++++- .../pages/db-cluster-details/db-cluster-details.tsx | 2 +- .../namespace-details/namespace-details.tsx | 5 +++-- ui/apps/everest/src/pages/settings/settings.tsx | 2 +- 7 files changed, 22 insertions(+), 18 deletions(-) diff --git a/ui/apps/everest/src/components/main/Main.tsx b/ui/apps/everest/src/components/main/Main.tsx index ee12879cb..31688849f 100644 --- a/ui/apps/everest/src/components/main/Main.tsx +++ b/ui/apps/everest/src/components/main/Main.tsx @@ -58,8 +58,6 @@ export const Main = () => { activeBreakpoint === 'mobile' ? '100%' : `calc(100% - ${drawerWidth})`, - maxWidth: 1280, - mx: 'auto', }} > diff --git a/ui/apps/everest/src/pages/database-form/database-form-side-drawer/DatabaseFormSideDrawer.tsx b/ui/apps/everest/src/pages/database-form/database-form-side-drawer/DatabaseFormSideDrawer.tsx index 7e86107f4..56e0d2f11 100644 --- a/ui/apps/everest/src/pages/database-form/database-form-side-drawer/DatabaseFormSideDrawer.tsx +++ b/ui/apps/everest/src/pages/database-form/database-form-side-drawer/DatabaseFormSideDrawer.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { Divider, Drawer, Toolbar, useTheme } from '@mui/material'; +import { Divider, Drawer, useTheme } from '@mui/material'; import { useActiveBreakpoint } from 'hooks/utils/useActiveBreakpoint'; import { DatabasePreview } from '../database-preview/database-preview'; import { DatabaseFormSideDrawerProps } from './DatabaseFormSideDrawer.types'; @@ -21,7 +21,6 @@ const DatabaseFormSideDrawer = ({ longestAchievedStep={longestAchievedStep} onSectionEdit={handleSectionEdit} sx={{ - mt: 2, ...(!isDesktop && { padding: 0, }), @@ -37,19 +36,15 @@ const DatabaseFormSideDrawer = ({ variant="permanent" anchor="right" sx={{ - // MuiDrawer-paper will take 25% of the whole screen because it has a "fixed" positioning - // Hence, we must use vw here to have the same calculation - // We subtract the padding - width: (theme) => `calc(25vw - ${theme.spacing(4)})`, + width: '25%', flexShrink: 0, ml: 3, [`& .MuiDrawer-paper`]: { - width: '25%', + position: 'relative', boxSizing: 'border-box', }, }} > - {PreviewContent} ); diff --git a/ui/apps/everest/src/pages/database-form/database-form.tsx b/ui/apps/everest/src/pages/database-form/database-form.tsx index 8202e5ae6..b15793fa8 100644 --- a/ui/apps/everest/src/pages/database-form/database-form.tsx +++ b/ui/apps/everest/src/pages/database-form/database-form.tsx @@ -16,7 +16,7 @@ import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { zodResolver } from '@hookform/resolvers/zod'; -import { Stack, Step, StepLabel } from '@mui/material'; +import { Box, Stack, Step, StepLabel } from '@mui/material'; import { Stepper } from '@percona/ui-lib'; import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'; import { useCreateDbCluster } from 'hooks/api/db-cluster/useCreateDbCluster'; @@ -156,7 +156,7 @@ export const DatabasePage = () => { return formSubmitted ? ( ) : ( - <> + {steps.map((_, idx) => ( @@ -189,6 +189,6 @@ export const DatabasePage = () => { open={cancelModalOpen} onClose={() => setCancelModalOpen(false)} /> - + ); }; diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.tsx b/ui/apps/everest/src/pages/databases/DbClusterView.tsx index c5decc513..2cd70abce 100644 --- a/ui/apps/everest/src/pages/databases/DbClusterView.tsx +++ b/ui/apps/everest/src/pages/databases/DbClusterView.tsx @@ -154,6 +154,7 @@ export const DbClusterView = () => { }, { accessorKey: 'monitoringConfigName', + minSize: 250, header: 'Monitoring instance name', }, // { @@ -172,7 +173,16 @@ export const DbClusterView = () => { [] ); return ( - + { // All clear, show the cluster data return ( - + { const queryClient = useQueryClient(); @@ -140,7 +141,7 @@ const NamespaceDetails = () => { } return ( - <> + navigate('/settings/namespaces')} @@ -197,7 +198,7 @@ const NamespaceDetails = () => { onClose={() => setModalOpen(false)} onConfirm={() => performUpgrade(selectedEngine!.name)} /> - + ); }; diff --git a/ui/apps/everest/src/pages/settings/settings.tsx b/ui/apps/everest/src/pages/settings/settings.tsx index 1e21b0d18..ce8d2a7e4 100644 --- a/ui/apps/everest/src/pages/settings/settings.tsx +++ b/ui/apps/everest/src/pages/settings/settings.tsx @@ -13,7 +13,7 @@ export const Settings = () => { } return ( - + Date: Tue, 25 Jun 2024 09:39:31 +0400 Subject: [PATCH 5/5] EVEREST-1004 removing min monitoring instance column size in db table --- ui/apps/everest/src/pages/databases/DbClusterView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.tsx b/ui/apps/everest/src/pages/databases/DbClusterView.tsx index 2cd70abce..a776a2abf 100644 --- a/ui/apps/everest/src/pages/databases/DbClusterView.tsx +++ b/ui/apps/everest/src/pages/databases/DbClusterView.tsx @@ -154,7 +154,6 @@ export const DbClusterView = () => { }, { accessorKey: 'monitoringConfigName', - minSize: 250, header: 'Monitoring instance name', }, // {