fix(ui): dle-4-0 UI adjustments and minor fixes

Adrinlol · Adrinlol · commit a3d7e04fd93a · 2025-03-28T12:23:13.000+04:00
diff --git a/ui/packages/shared/components/DestroyCloneModal/index.tsx b/ui/packages/shared/components/DestroyCloneModal/index.tsx
@@ -28,9 +28,9 @@ export const DestroyCloneModal = (props: Props) => {
   }
 
   return (
-    <Modal title={`Destroy clone ${cloneId}`} onClose={onClose} isOpen={isOpen}>
+    <Modal title={`Delete clone ${cloneId}`} onClose={onClose} isOpen={isOpen}>
       <Text>
-        Are you sure you want to destroy clone{' '}
+        Are you sure you want to delete clone{' '}
         <ImportantText>{cloneId}</ImportantText>? This action cannot be undone.
       </Text>
 
@@ -41,7 +41,7 @@ export const DestroyCloneModal = (props: Props) => {
             onClick: onClose,
           },
           {
-            text: 'Destroy clone',
+            text: 'Delete clone',
             variant: 'primary',
             onClick: handleClickDestroy,
           },
diff --git a/ui/packages/shared/components/DestroyCloneRestrictionModal/index.tsx b/ui/packages/shared/components/DestroyCloneRestrictionModal/index.tsx
@@ -25,9 +25,9 @@ export const DestroyCloneRestrictionModal = observer((props: Props) => {
   const { isOpen, onClose, cloneId, clonePagePath } = props
 
   return (
-    <Modal title="Cannot destroy clone" isOpen={isOpen} onClose={onClose}>
+    <Modal title="Cannot delete clone" isOpen={isOpen} onClose={onClose}>
       <Text>
-        Cannot destroy clone <ImportantText>{cloneId}</ImportantText> because
+        Cannot delete clone <ImportantText>{cloneId}</ImportantText> because
         deletion protection is enabled. You can disable deletion protection on{' '}
         {clonePagePath ? (
           <Link to={clonePagePath}>the clone page</Link>
diff --git a/ui/packages/shared/pages/Branches/Branch/index.tsx b/ui/packages/shared/pages/Branches/Branch/index.tsx
@@ -219,10 +219,10 @@ export const BranchesPage = observer((props: Props) => {
               color="primary"
               onClick={() => setIsOpenDestroyModal(true)}
               disabled={isReloading}
-              title={'Destroy this branch'}
+              title={'Delete this branch'}
               className={classes.actionButton}
             >
-              Destroy branch
+              Delete branch
             </Button>
             <Button
               variant="outlined"
@@ -362,10 +362,10 @@ export const BranchesPage = observer((props: Props) => {
             className={classes.marginTop}
             tag="h2"
             level={2}
-            text={'Destroy branch using CLI'}
+            text={'Delete branch using CLI'}
           />
           <p className={classes.cliText}>
-            You can destroy this branch using CLI. To do this, run the command
+            You can delete this branch using CLI. To do this, run the command
             below:
           </p>
           <SyntaxHighlight content={`dblab branch delete ${props.branchId}`} />
diff --git a/ui/packages/shared/pages/Branches/components/BranchesTable/index.tsx b/ui/packages/shared/pages/Branches/components/BranchesTable/index.tsx
@@ -156,7 +156,7 @@ export const BranchesTable = ({
                       onClick: () => copy(branch.snapshotID),
                     },
                     {
-                      name: 'Destroy branch',
+                      name: 'Delete branch',
                       onClick: () => {
                         setBranchId(branch.name)
                         setIsOpenDestroyModal(true)
diff --git a/ui/packages/shared/pages/Branches/components/Modals/DeleteBranchModal/index.tsx b/ui/packages/shared/pages/Branches/components/Modals/DeleteBranchModal/index.tsx
@@ -60,7 +60,7 @@ export const DeleteBranchModal = ({
   return (
     <Modal title="Confirmation" onClose={handleClose} isOpen={isOpen} size="xs">
       <Text>
-        Are you sure you want to destroy branch{' '}
+        Are you sure you want to delete branch{' '}
         <ImportantText>{branchName}</ImportantText>? This action cannot be
         undone.
       </Text>
@@ -72,7 +72,7 @@ export const DeleteBranchModal = ({
             onClick: handleClose,
           },
           {
-            text: 'Destroy branch',
+            text: 'Delete branch',
             variant: 'primary',
             onClick: handleDelete,
             isDisabled: branchName === 'main',
diff --git a/ui/packages/shared/pages/Clone/index.tsx b/ui/packages/shared/pages/Clone/index.tsx
@@ -335,10 +335,10 @@ export const Clone = observer((props: Props) => {
               color="primary"
               onClick={requestDestroyClone}
               disabled={isDisabledControls}
-              title={'Destroy this clone'}
+              title={'Delete this clone'}
               className={classes.actionButton}
             >
-              Destroy clone
+              Delete clone
               {isDestroyingClone && (
                 <Spinner size="sm" className={classes.spinner} />
               )}
@@ -348,7 +348,7 @@ export const Clone = observer((props: Props) => {
               color="primary"
               onClick={createSnapshot}
               disabled={isDisabledControls}
-              title={'Destroy this clone'}
+              title={'Delete this clone'}
               className={classes.actionButton}
             >
               Create snapshot
@@ -627,12 +627,12 @@ export const Clone = observer((props: Props) => {
             />
             <br />
             <span className={classes.remark}>
-              When enabled, no one can destroy this clone and automated deletion
+              When enabled, no one can delete this clone and automated deletion
               is also disabled.
               <br />
               Please be careful: abandoned clones with this checkbox enabled may
               cause out-of-disk-space events. Check disk space on daily basis
-              and destroy this clone once the work is done.
+              and delete this clone once the work is done.
             </span>
           </p>
           {stores.main.updateCloneError && (
@@ -655,10 +655,10 @@ export const Clone = observer((props: Props) => {
             className={classes.title}
             tag="h2"
             level={2}
-            text={'Destroy clone using CLI'}
+            text={'Delete clone using CLI'}
           />
           <p className={classes.tooltip}>
-            You can destroy the clone using CLI using the following command:
+            You can delete the clone using CLI using the following command:
           </p>
           <SyntaxHighlight content={getCliDestroyCloneCommand(props.cloneId)} />
 
diff --git a/ui/packages/shared/pages/CreateClone/index.tsx b/ui/packages/shared/pages/CreateClone/index.tsx
@@ -309,12 +309,12 @@ export const CreateClone = observer((props: Props) => {
             />
 
             <p className={styles.remark}>
-              When enabled, no one can destroy this clone and automated deletion
+              When enabled, no one can delete this clone and automated deletion
               is also disabled.
               <br />
               Please be careful: abandoned clones with this checkbox enabled may
-              cause out-of-disk-space events. Check disk space on daily basis
-              and destroy this clone once the work is done.
+              cause out-of-disk-space events. Check disk space on a daily basis
+              and delete this clone once the work is done.
             </p>
           </div>
 
diff --git a/ui/packages/shared/pages/Instance/Clones/ClonesList/MenuCell/index.tsx b/ui/packages/shared/pages/Instance/Clones/ClonesList/MenuCell/index.tsx
@@ -61,7 +61,7 @@ export const MenuCell = observer((props: Props) => {
           onClick: () => onConnect(clone.id),
         },
         {
-          name: 'Destroy clone',
+          name: 'Delete clone',
           onClick: handleClickDestroyClone,
         },
         {
diff --git a/ui/packages/shared/pages/Instance/Clones/ClonesList/MenuCell/utils.ts b/ui/packages/shared/pages/Instance/Clones/ClonesList/MenuCell/utils.ts
@@ -6,7 +6,7 @@
  */
 
 export const destroyRestriction = (cloneId: string) => {
-  const message = `The clone "${cloneId}" is marked as protected. To destroy it, disable the destroy protection first.`
+  const message = `The clone "${cloneId}" is marked as protected. To delete it, disable the delete protection first.`
   window.alert(message)
 }
 
@@ -16,6 +16,6 @@ export const getResetApprove = (cloneId: string) => {
 }
 
 export const getDestroyApprove = (cloneId: string) => {
-  const message = `Are you sure you want to destroy the Database Lab clone: "${cloneId}"?`
+  const message = `Are you sure you want to delete the Database Lab clone: "${cloneId}"?`
   return window.confirm(message)
 }
diff --git a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsList/index.tsx
@@ -186,7 +186,7 @@ const SnapshotListItem = ({
                   onClick: () => openClonesModal(),
                 },
                 {
-                  name: 'Destroy snapshot',
+                  name: 'Delete snapshot',
                   onClick: () =>
                     setSnapshotModal({
                       isOpen: true,
@@ -267,7 +267,7 @@ export const SnapshotsList = observer(
             onClose={() => setSnapshotModal({ isOpen: false, snapshotId: '' })}
             snapshotId={snapshotModal.snapshotId}
             instanceId={instanceId}
-            afterSubmitClick={() => window.location.reload()}
+            afterSubmitClick={() => stores.main.load(instanceId)}
             destroySnapshot={stores.main.destroySnapshot as DestroySnapshot}
           />
         )}
diff --git a/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx b/ui/packages/shared/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx
@@ -180,7 +180,7 @@ export const SnapshotsTable: React.FC<SnapshotsTableProps> = observer(
                           }),
                       },
                       {
-                        name: 'Destroy snapshot',
+                        name: 'Delete snapshot',
                         onClick: () =>
                           setSnapshotModal({
                             isOpen: true,
diff --git a/ui/packages/shared/pages/Instance/Tabs/styles.ts b/ui/packages/shared/pages/Instance/Tabs/styles.ts
@@ -1,45 +1,68 @@
 import { makeStyles } from '@material-ui/core'
 import { colors } from '@postgres.ai/shared/styles/colors'
 
-export const useTabsStyles = makeStyles({
-  tabsRoot: {
-    minHeight: 0,
-    marginTop: '-8px',
-    '& .MuiTabs-fixed': {
-      overflowX: 'auto!important',
+export const useTabsStyles = makeStyles(
+  {
+    tabsRoot: {
+      minHeight: 0,
+      marginTop: '-8px',
+      '& .MuiTabs-fixed': {
+        overflowX: 'auto!important',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+
+        '& div:first-child': {
+          '@media (max-width: 700px)': {
+            display: 'flex',
+          },
+        },
+      },
+      '& .postgres-logo': {
+        width: '18px',
+        height: '18px',
+      },
+      '& a': {
+        color: colors.black,
+        textDecoration: 'none',
+
+        '@media (max-width: 700px)': {
+          display: 'flex',
+          width: '100%',
+        },
+      },
     },
-    '& .postgres-logo': {
-      width: '18px',
-      height: '18px',
+    flexRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: '5px',
+      width: '100%',
     },
-    '& a': {
-      color: colors.black,
-      textDecoration: 'none',
+    tabsIndicator: {
+      height: '3px',
     },
-  },
-  flexRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '5px',
-  },
-  tabsIndicator: {
-    height: '3px',
-  },
-  tabRoot: {
-    fontWeight: 400,
-    minWidth: 0,
-    minHeight: 0,
-    padding: '6px 16px',
-    borderBottom: `3px solid ${colors.consoleStroke}`,
-    '& + $tabRoot': {
-      marginLeft: '10px',
+    tabRoot: {
+      fontWeight: 400,
+      minWidth: 0,
+      minHeight: 0,
+      width: '100%',
+      padding: '6px 16px',
+      borderBottom: `3px solid ${colors.consoleStroke}`,
+      '& + $tabRoot': {
+        marginLeft: '10px',
+      },
+      '&.Mui-disabled': {
+        opacity: 1,
+        color: colors.pgaiDarkGray,
+      },
+      '@media (max-width: 700px)': {
+        width: 'max-content',
+      },
     },
-    '&.Mui-disabled': {
-      opacity: 1,
-      color: colors.pgaiDarkGray,
+    tabHidden: {
+      display: 'none',
     },
   },
-  tabHidden: {
-    display: 'none',
-  },
-}, { index: 1 })
+  { index: 1 },
+)
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx b/ui/packages/shared/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx
@@ -99,7 +99,7 @@ export const DestroySnapshotModal = ({
       size="sm"
     >
       <Text>
-        Are you sure you want to destroy snapshot{' '}
+        Are you sure you want to delete snapshot{' '}
         <ImportantText>{snapshotId}</ImportantText>? This action cannot be
         undone.
       </Text>
@@ -133,7 +133,7 @@ export const DestroySnapshotModal = ({
             onClick: handleClose,
           },
           {
-            text: 'Destroy snapshot',
+            text: 'Delete snapshot',
             variant: 'primary',
             onClick: handleClickDestroy,
           },
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/context.ts b/ui/packages/shared/pages/Snapshots/Snapshot/context.ts
@@ -8,6 +8,7 @@ export type Host = {
   snapshotId: string
   routes: {
     snapshot: () => string
+    snapshots: () => string
     branch: (branchName: string) => string
     clone: (cloneId: string) => string
   }
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/index.tsx b/ui/packages/shared/pages/Snapshots/Snapshot/index.tsx
@@ -160,9 +160,9 @@ export const SnapshotPage = observer((props: Props) => {
     load,
   } = stores.main
 
-  const redirectToSnapshot = () => {
-    history.push(props.routes.snapshot())
-    window.location.reload()
+  const afterSubmitClick = () => {
+    history.push(props.routes.snapshots())
+    load(props.snapshotId, props.instanceId)
   }
 
   const headRendered = (
@@ -209,10 +209,10 @@ export const SnapshotPage = observer((props: Props) => {
               variant="contained"
               color="primary"
               onClick={() => setIsOpenDestroyModal(true)}
-              title={'Destroy this snapshot'}
+              title={'Delete this snapshot'}
               className={classes.actionButton}
             >
-              Destroy snapshot
+              Delete snapshot
             </Button>
           </div>
           <br />
@@ -428,10 +428,10 @@ export const SnapshotPage = observer((props: Props) => {
             className={classes.marginTop}
             tag="h2"
             level={2}
-            text={'Destroy snapshot using CLI'}
+            text={'Delete snapshot using CLI'}
           />
           <p className={classes.cliText}>
-            You can destroy this snapshot using CLI. To do this, run the command
+            You can delete this snapshot using CLI. To do this, run the command
             below:
           </p>
           <SyntaxHighlight content={`dblab snapshot delete ${snapshot?.id}`} />
@@ -453,7 +453,7 @@ export const SnapshotPage = observer((props: Props) => {
             onClose={() => setIsOpenDestroyModal(false)}
             snapshotId={snapshot.id}
             instanceId={props.instanceId}
-            afterSubmitClick={redirectToSnapshot}
+            afterSubmitClick={afterSubmitClick}
             destroySnapshot={stores.main.destroySnapshot as DestroySnapshot}
           />
         )}

Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,7 @@ export const BranchesTable = ({`
`156`	`156`	`onClick: () => copy(branch.snapshotID),`
`157`	`157`	`},`
`158`	`158`	`{`
`159`		`- name: 'Destroy branch',`
	`159`	`+ name: 'Delete branch',`
`160`	`160`	`onClick: () => {`
`161`	`161`	`setBranchId(branch.name)`
`162`	`162`	`setIsOpenDestroyModal(true)`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ export const MenuCell = observer((props: Props) => {`
`61`	`61`	`onClick: () => onConnect(clone.id),`
`62`	`62`	`},`
`63`	`63`	`{`
`64`		`- name: 'Destroy clone',`
	`64`	`+ name: 'Delete clone',`
`65`	`65`	`onClick: handleClickDestroyClone,`
`66`	`66`	`},`
`67`	`67`	`{`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`*/`
`7`	`7`
`8`	`8`	`export const destroyRestriction = (cloneId: string) => {`
`9`		- const message = `The clone "${cloneId}" is marked as protected. To destroy it, disable the destroy protection first.`
	`9`	+ const message = `The clone "${cloneId}" is marked as protected. To delete it, disable the delete protection first.`
`10`	`10`	`window.alert(message)`
`11`	`11`	`}`
`12`	`12`
`@@ -16,6 +16,6 @@ export const getResetApprove = (cloneId: string) => {`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`export const getDestroyApprove = (cloneId: string) => {`
`19`		- const message = `Are you sure you want to destroy the Database Lab clone: "${cloneId}"?`
	`19`	+ const message = `Are you sure you want to delete the Database Lab clone: "${cloneId}"?`
`20`	`20`	`return window.confirm(message)`
`21`	`21`	`}`