Merge branch 'project-label-enhancements' into 'master'

fix(ui): project label enhancements, redirect on editing project

See merge request postgres-ai/database-lab!710

Author: Adrinlol

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

@@ -18,6 +18,7 @@ import BlockIcon from '@material-ui/icons/Block'
 import WarningIcon from '@material-ui/icons/Warning'
 
 import { styles } from '@postgres.ai/shared/styles/styles'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner'
 import {
   ClassesType,
@@ -594,6 +595,9 @@ class DbLabInstanceForm extends Component<
               onClick={this.buttonHandler}
             >
               {this.props.edit ? 'Update' : 'Add'}
+              {isDataUpdating && (
+                <Spinner size="sm" className={classes.spinner} />
+              )}
             </Button>
             &nbsp;&nbsp;
             <Button

ui/packages/platform/src/components/DbLabInstanceForm/DbLabInstanceFormWrapper.tsx

@@ -52,6 +52,10 @@ export const DbLabInstanceFormWrapper = (props: DbLabInstanceFormProps) => {
         position: 'relative',
         marginBottom: -3,
       },
+      spinner: {
+        marginLeft: 8,
+        color: 'inherit',
+      },
     },
     { index: 1 },
   )

ui/packages/platform/src/pages/Instance/index.tsx

@@ -67,15 +67,22 @@ export const Instance = () => {
         project={params.project}
         breadcrumbs={[
           { name: 'Database Lab Instances', url: 'instances' },
-          { name: 'Instance #' + params.instanceId, url: null },
+          {
+            name: `Instance #${params.instanceId} ${
+              params.project ? `(${params.project})` : ''
+            }`,
+            url: null,
+          },
         ]}
       />
     ),
   }
 
   return (
     <InstancePage
-      title={`Database Lab instance #${params.instanceId}`}
+      title={`Database Lab instance #${params.instanceId} ${
+        params.project ? `(${params.project})` : ''
+      }`}
       instanceId={params.instanceId}
       hideInstanceTabs
       routes={routes}

ui/packages/platform/src/pages/JoeInstance/Command/index.tsx

@@ -22,7 +22,7 @@ type Props = {
   onSend: (value: string) => void
 }
 
-const LABEL_FONT_SIZE = '18px'
+const LABEL_FONT_SIZE = '14px'
 
 const useStyles = makeStyles(
   {

ui/packages/platform/src/stores/store.js

@@ -1193,6 +1193,47 @@ const Store = Reflux.createStore({
     this.trigger(this.data);
   },
 
+  onEditDbLabInstanceFailed: function (error) {
+    this.data.newDbLabInstance.isUpdating = false;
+    this.data.newDbLabInstance.isProcessed = false;
+    this.data.newDbLabInstance.updateError = true;
+    this.data.newDbLabInstance.updateErrorMessage = error.message;
+    this.trigger(this.data);
+  },
+
+  onEditDbLabInstanceProgressed: function (data) {
+    this.data.newDbLabInstance.updateErrorFields = null
+    this.data.newDbLabInstance.isUpdating = true
+    this.data.newDbLabInstance.data = {}
+
+    if (data && data.email) {
+      this.data.newDbLabInstance.data.email = data.email
+    }
+      
+    this.trigger(this.data)
+  },
+
+  onEditDbLabInstanceCompleted: function (data) {
+    this.data.newDbLabInstance.isUpdating = false;
+    this.data.newDbLabInstance.errorMessage = this.getError(data.data);
+    this.data.newDbLabInstance.error = !!this.data.newDbLabInstance.errorMessage;
+
+    if (!this.data.newDbLabInstance.error && data.data) {
+      this.data.newDbLabInstance.data = data.data;
+      this.data.newDbLabInstance.isProcessed = true;
+      // Update orgs and projects.
+      Actions.getUserProfile(this.data.auth.token);
+      Actions.getDbLabInstances(this.data.auth.token, data.orgId, data.data
+        .project_id);
+      
+      if (window.location.href.indexOf('edit') > -1) {
+        let url = window.location.href.split('/edit')[0]
+        window.location.href = url
+      }
+    }
+    this.trigger(this.data);
+  },
+
 
   onCheckDbLabInstanceUrlFailed: function (error) {
     this.data.newDbLabInstance.isChecked = false;