fix(ui): minor platform ui tweaks (https://gitlab.com/postgres-ai/platform/-/issues/246)

Author: Adrinlol

ui/packages/platform/src/components/ConsolePageTitle.tsx

@@ -65,12 +65,19 @@ const useStyles = makeStyles(
       'margin-bottom': '20px',
     },
     pageTitleActions: {
-      lineHeight: '37px',
-      display: 'inline-block',
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
       float: 'right',
     },
     pageTitleActionContainer: {
       marginLeft: '10px',
+      display: 'inline-block',
+      height: "36px",
+
+      "& > span, button": {
+        height: '100%',
+      },
     },
     tooltip: {
       fontSize: '10px!important',
@@ -125,7 +132,7 @@ const ConsolePageTitle = ({
               id="filterOrgsInput"
               variant="outlined"
               size="small"
-              style={{ minWidth: '260px', height: '30px' }}
+              style={{ minWidth: '260px' }}
               className="filterOrgsInput"
               placeholder={filterProps.placeholder}
               value={filterProps.filterValue}

ui/packages/platform/src/components/ContentLayout/DemoOrgNotice/index.tsx

@@ -42,7 +42,6 @@ const useStyles = makeStyles(
       borderRadius: '3px',
       marginLeft: '5px',
       marginTop: '-2px',
-      backgroundColor: colors.white,
       height: '20px',
       lineHeight: '20px',
       fontSize: '12px',
@@ -66,8 +65,8 @@ export const DemoOrgNotice = () => {
       {icons.infoIconBlue} This is a Demo organization, once you’ve
       explored <span className={classes.noWrap}>Database Lab</span> features:
       <Button
-        variant="outlined"
-        color="secondary"
+        variant="contained"
+        color="primary"
         className={classes.demoOrgNoticeButton}
         onClick={goToOrgForm}
       >

ui/packages/platform/src/components/Dashboard/Dashboard.tsx

@@ -24,7 +24,10 @@ import remarkGfm from 'remark-gfm'
 import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
 import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner'
 import { StubContainer } from '@postgres.ai/shared/components/StubContainer'
-import { ClassesType, RefluxTypes } from '@postgres.ai/platform/src/components/types'
+import {
+  ClassesType,
+  RefluxTypes,
+} from '@postgres.ai/platform/src/components/types'
 
 import { ROUTES } from 'config/routes'
 
@@ -103,7 +106,7 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
     const orgId = this.props.orgId
     const onlyProjects = this.props.onlyProjects
 
-     this.unsubscribe = (Store.listen as RefluxTypes["listen"]) (function () {
+    this.unsubscribe = (Store.listen as RefluxTypes['listen'])(function () {
       that.setState({ data: this.data })
       const auth: DashboardState['data']['auth'] =
         this.data && this.data.auth ? this.data.auth : null
@@ -330,6 +333,7 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
       this.state.data.userProfile.data &&
       this.state.data.userProfile.data.orgs &&
       this.state.data.userProfile.data.orgs[org] &&
+      this.state.data.userProfile.data.orgs[org].projects &&
       this.state.data.userProfile.data.orgs[org].onboarding_text
     ) {
       onboarding = (
@@ -422,7 +426,7 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
 
     const useDemoDataButton = (
       <ConsoleButtonWrapper
-        variant="contained"
+        variant="outlined"
         color="primary"
         onClick={this.useDemoDataButtonHandler}
         id="useDemoDataButton"
@@ -434,7 +438,7 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
 
     const createOrgButton = (
       <ConsoleButtonWrapper
-        variant="outlined"
+        variant="contained"
         color="primary"
         onClick={this.addOrgButtonHandler}
         id="createOrgButton"
@@ -451,14 +455,14 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
           inline
           title={'Create or join an organization'}
           actions={[
-            {
-              id: 'useDemoDataButton',
-              content: useDemoDataButton,
-            },
             {
               id: 'createOrgButton',
               content: createOrgButton,
             },
+            {
+              id: 'useDemoDataButton',
+              content: useDemoDataButton,
+            },
           ]}
         >
           <p>
@@ -475,20 +479,26 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
     )
 
     const pageActions = []
-    if (!profile.data?.orgs || !profile.data?.orgs[settings.demoOrgAlias]) {
+    if (
+      Object.keys(profile?.data?.orgs).length > 0 &&
+      (!profile.data?.orgs || !profile.data?.orgs[settings.demoOrgAlias])
+    ) {
       pageActions.push(useDemoDataButton)
     }
-    pageActions.push(createOrgButton)
+
+    if (Object.keys(profile?.data?.orgs).length > 0) {
+      pageActions.push(createOrgButton)
+    }
 
     return (
       <div className={classes.root}>
         <ConsolePageTitle
           top={true}
           title="Your organizations"
           information="Your own organizations and organizations of which you are a member"
-          actions={pageActions}
+          actions={filteredItems && pageActions}
           filterProps={
-            profile?.data?.orgs
+            Object.keys(profile?.data?.orgs).length > 0
               ? {
                   filterValue: this.state.filterValue,
                   filterHandler: this.filterOrgsInputHandler,

ui/packages/platform/src/components/Dashboard/DashboardWrapper.tsx

@@ -82,9 +82,6 @@ export const DashboardWrapper = (props: DashboardProps) => {
           width: '200px',
         },
       },
-      createOrgButton: {
-        height: '37px',
-      },
       blockedStatus: {
         color: colors.state.error,
         fontSize: '1.1em',

ui/packages/platform/src/components/DbLabInstances/DbLabInstances.tsx

@@ -598,7 +598,7 @@ class DbLabInstances extends Component<
             key={4}
             onClick={(event) => this.menuHandler(event, 'destroy')}
           >
-            Remove
+            Remove from List
           </MenuItem>
         </Menu>
       )

ui/packages/platform/src/components/IndexPage/IndexPage.tsx

@@ -884,6 +884,7 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
       },
       userProfile: {
         data: {
+          orgs: {},
           info: {
             first_name: '',
             user_name: '',
@@ -907,7 +908,7 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
 
     document.getElementsByTagName('html')[0].style.overflow = 'hidden'
 
-     this.unsubscribe = (Store.listen as RefluxTypes["listen"]) (function () {
+    this.unsubscribe = (Store.listen as RefluxTypes['listen'])(function () {
       that.setState({ data: this.data })
 
       // redirect to new organization alias if need
@@ -1302,9 +1303,13 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
               <Route
                 path={ROUTES.ROOT.path}
                 exact
-                render={(props) => (
-                  <DashboardWrapper onlyProjects={false} {...props} />
-                )}
+                render={(props) => {
+                  if (env.data && env.data?.orgs) {
+                    return <DashboardWrapper onlyProjects={false} {...props} />
+                  } else {
+                    return <OrgFormWrapper mode={'new'} {...props} />
+                  }
+                }}
               />
               <Route
                 path={ROUTES.CREATE_ORG.path}