fix(ui): branch page polishes

Author: Adrinlol

ui/packages/ce/src/App/Menu/Header/styles.module.scss

@@ -20,6 +20,7 @@
   height: 32px;
   color: inherit;
   text-decoration: none;
+  align-items: center;
 
   &.collapsed {
     justify-content: center;

ui/packages/ce/src/components/NavPath/index.tsx

@@ -19,6 +19,7 @@ export const NavPath = (props: Props) => {
     <nav className={cn(styles.root, props.className)}>
       {props.routes.map((route, i) => {
         const isLast = (i + 1) === props.routes.length
+        const nameWithIndent = route.name.replace('/', ' / ')
 
         return (
           <React.Fragment key={i}>
@@ -28,7 +29,7 @@ export const NavPath = (props: Props) => {
               className={styles.link}
               activeClassName={styles.active}
             >
-              {route.name}
+              {nameWithIndent}
             </NavLink>
             { !isLast && <span className={styles.divider}>/</span> }
           </React.Fragment>

ui/packages/shared/pages/Branches/components/BranchesTable/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import cn from 'classnames'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { makeStyles } from '@material-ui/core'
 import { useHistory } from 'react-router-dom'
@@ -72,7 +72,7 @@ export const BranchesTable = ({
 
   const [state, setState] = useState({
     sortByParent: 'desc',
-    branches: branchesData ?? [],
+    branches: [] as GetBranchesResponseType[],
   })
   const [branchId, setBranchId] = useState('')
   const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false)
@@ -94,6 +94,13 @@ export const BranchesTable = ({
     })
   }
 
+  useEffect(() => {
+    setState({
+      sortByParent: 'desc',
+      branches: branchesData ?? [],
+    })
+  }, [branchesData])
+
   if (!state.branches.length) {
     return <p className={classes.marginTop}>{emptyTableText}</p>
   }

ui/packages/shared/pages/Branches/index.tsx

@@ -102,7 +102,7 @@ export const Branches = observer((): React.ReactElement => {
 
                 {!branchesList.length && (
                   <Tooltip content="No existing branch">
-                    <div>
+                    <div style={{ display: 'flex' }}>
                       <InfoIcon className={classes.infoIcon} />
                     </div>
                   </Tooltip>

ui/packages/shared/pages/CreateBranch/index.tsx

@@ -252,7 +252,7 @@ export const CreateBranchPage = observer(
               form, copy the command below and paste it into your terminal.
             </p>
             <SyntaxHighlight
-              content={getCliCreateBranchCommand(formik.values.branchName)}
+              content={getCliCreateBranchCommand(formik.values.branchName, formik.values.baseBranch)}
             />
             <SectionTitle
               className={classes.marginTop}

ui/packages/shared/pages/CreateBranch/utils/index.ts

@@ -1,5 +1,10 @@
-export const getCliCreateBranchCommand = (branchName: string) => {
-  return `dblab branch create ${branchName ? branchName : `<BRANCH_NAME>`}`
+export const getCliCreateBranchCommand = (
+  branchName: string,
+  parentBranchName: string,
+) => {
+  return `dblab branch create ${branchName ? branchName : `<BRANCH_NAME>`} ${
+    parentBranchName !== `master` ? parentBranchName : ``
+  }`
 }
 
 export const getCliBranchListCommand = () => {

ui/packages/shared/pages/Instance/Clones/index.tsx

@@ -110,7 +110,7 @@ export const Clones = observer((props: ClonesProps) => {
 
             {!hasSnapshots && (
               <Tooltip content="No snapshots">
-                <div>
+                <div style={{ display: 'flex' }}>
                   <InfoIcon className={classes.infoIcon} />
                 </div>
               </Tooltip>

ui/packages/shared/pages/Instance/Info/Status/index.tsx

@@ -62,9 +62,9 @@ export const Status = observer(() => {
       )}
       {uiVersion && <Property name="UI version">{`v${uiVersion}`}</Property>}
       {version && <Property name="Engine version">{version}</Property>}
-      {config?.dockerImage && (
-        <Property name="Docker image">{config?.dockerImage}</Property>
-        )}
+      {config?.dockerPath && (
+        <Property name="Docker image">{config?.dockerPath}</Property>
+      )}
 
       {!isStatusOk && (
         <div className={styles.controls}>

ui/packages/shared/pages/Instance/Snapshots/index.tsx

@@ -98,7 +98,7 @@ export const Snapshots = observer(() => {
 
                 {!hasClones && (
                   <Tooltip content="No clones">
-                    <div>
+                    <div style={{ display: 'flex' }}>
                       <InfoIcon className={classes.infoIcon} />
                     </div>
                   </Tooltip>