Merge branch 'edit-page-for-instances' into 'master'

fix(ui): edit page for instances, replace history to avoid crash, fix n/a texts

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

Author: NikolayS

ui/packages/platform/src/api/api.js

@@ -519,6 +519,7 @@ class Api {
       Authorization: 'Bearer ' + token,
     }
     let params = {
+      url: instanceData.url,
       instance_id: Number(instanceData.instanceId),
       project_name: instanceData.project,
       project_label: instanceData.projectLabel,

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

@@ -21,25 +21,26 @@ export const AddDbLabInstanceFormWrapper = (props: DbLabInstanceFormProps) => {
         maxWidth: 400,
       },
       errorMessage: {
+        marginTop: 10,
         color: 'red',
       },
       fieldBlock: {
         width: '100%',
       },
       urlOkIcon: {
-        marginBottom: -5,
-        marginLeft: 10,
         color: 'green',
       },
-      urlOk: {
-        color: 'green',
+      urlOk: { display: 'flex', gap: 5, alignItems: 'center', color: 'green' },
+      urlTextMargin: {
+        marginTop: 10,
       },
       urlFailIcon: {
-        marginBottom: -5,
-        marginLeft: 10,
         color: 'red',
       },
       urlFail: {
+        display: 'flex',
+        gap: 5,
+        alignItems: 'center',
         color: 'red',
       },
       warning: {

ui/packages/platform/src/components/AddDbLabInstanceFormWrapper/AddDblabInstanceForm.tsx

@@ -134,11 +134,16 @@ class DbLabInstanceForm extends Component<
 
       if (dbLabInstances.data) {
         that.setState({
-          project_label: dbLabInstances.data[instanceID]?.project_label_or_name,
+          project_label:
+            that.state.project_label ||
+            dbLabInstances.data[instanceID]?.project_label_or_name,
           token: dbLabInstances.data[instanceID]?.verify_token,
-          useTunnel: dbLabInstances.data[instanceID]?.use_tunnel,
-          url: dbLabInstances.data[instanceID]?.url,
-          sshServerUrl: dbLabInstances.data[instanceID]?.ssh_server_url,
+          useTunnel:
+            that.state.useTunnel || dbLabInstances.data[instanceID]?.use_tunnel,
+          url: that.state.url || dbLabInstances.data[instanceID]?.url,
+          sshServerUrl:
+            that.state.sshServerUrl ||
+            dbLabInstances.data[instanceID]?.ssh_server_url,
         })
       }
 
@@ -337,10 +342,6 @@ class DbLabInstanceForm extends Component<
           </span>
         )}
 
-        <div className={classes.errorMessage}>
-          {data?.errorMessage ? data.errorMessage : null}
-        </div>
-
         <Grid container>
           <div className={classes.fieldBlock}>
             <TextField
@@ -562,30 +563,32 @@ class DbLabInstanceForm extends Component<
               Verify URL
             </Button>
 
-            {data?.isCheckProcessed &&
-            data?.isChecked &&
-            (isHttps(this.state.url) || this.state.useTunnel) ? (
-              <span className={classes.urlOk}>
-                <CheckCircleOutlineIcon className={classes.urlOkIcon} />{' '}
-                Verified
-              </span>
-            ) : null}
-
-            {data?.isCheckProcessed &&
-            data?.isChecked &&
-            !isHttps(this.state.url) &&
-            !this.state.useTunnel ? (
-              <span className={classes.urlFail}>
-                <BlockIcon className={classes.urlFailIcon} /> Verified but is
-                not secure
-              </span>
-            ) : null}
-
-            {data?.isCheckProcessed && !data?.isChecked ? (
-              <span className={classes.urlFail}>
-                <BlockIcon className={classes.urlFailIcon} /> Not available
-              </span>
-            ) : null}
+            <div className={classes.urlTextMargin}>
+              {data?.isCheckProcessed &&
+              data?.isChecked &&
+              (isHttps(this.state.url) || this.state.useTunnel) ? (
+                <span className={classes.urlOk}>
+                  <CheckCircleOutlineIcon className={classes.urlOkIcon} />{' '}
+                  Verified
+                </span>
+              ) : null}
+
+              {data?.isCheckProcessed &&
+              data?.isChecked &&
+              !isHttps(this.state.url) &&
+              !this.state.useTunnel ? (
+                <span className={classes.urlFail}>
+                  <BlockIcon className={classes.urlFailIcon} /> Verified but is
+                  not secure
+                </span>
+              ) : null}
+
+              {data?.isCheckProcessed && !data?.isChecked ? (
+                <span className={classes.urlFail}>
+                  <BlockIcon className={classes.urlFailIcon} /> Not available
+                </span>
+              ) : null}
+            </div>
           </div>
 
           <div className={classes.fieldBlock} style={{ marginTop: 40 }}>
@@ -607,6 +610,9 @@ class DbLabInstanceForm extends Component<
               Cancel
             </Button>
           </div>
+          <div className={classes.errorMessage}>
+            {data?.errorMessage ? data.errorMessage : null}
+          </div>
         </Grid>
       </div>
     )

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

@@ -58,7 +58,7 @@ class InviteForm extends Component<InviteFormWithStylesProps, InviteFormState> {
       that.setState({ data: this.data })
 
       if (this.data.inviteUser.isProcessed && !this.data.inviteUser.error) {
-        that.props.history.push('/' + org + '/members')
+        window.location.href = '/' + org + '/members'
       }
 
       const auth: InviteFormState['data']['auth'] =

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

@@ -469,7 +469,7 @@ class DbLabInstances extends Component<
                     <TableCell className={classes.cell}>
                       {data.data[index].state && data.data[index].url
                         ? data.data[index].url
-                        : ''}
+                        : 'N/A'}
                       {!isHttps(data.data[index].url) &&
                       data.data[index].url &&
                       !data.data[index].use_tunnel ? (
@@ -480,9 +480,7 @@ class DbLabInstances extends Component<
                         >
                           <WarningIcon className={classes.warningIcon} />
                         </Tooltip>
-                      ) : (
-                        'N/A'
-                      )}
+                      ) : null}
                     </TableCell>
                     <TableCell className={classes.cell}>
                       {data.data[index]?.state?.cloning?.numClones ??

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

@@ -166,7 +166,7 @@ function ProjectWrapper(parentProps: Omit<ProjectWrapperProps, 'classes'>) {
       <Route
         path="/:org/:project/instances/edit/:instanceId"
         render={(props) => (
-          <DbLabInstanceFormWrapper edit {...props} {...customProps} />
+          <AddDbLabInstanceFormWrapper edit {...props} {...customProps} />
         )}
       />
       <Route
@@ -921,14 +921,14 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
         env.data &&
         env.data.orgs[orgProfile.data.alias]
       ) {
-        that.props.history.push('/' + orgProfile.data.alias + '/settings')
+        window.location.href = '/' + orgProfile.data.alias + '/settings'
       }
 
       if (
         (env.isConfirmProcessed || (env.data && env.data.info.is_active)) &&
         Urls.isRequestedPath('confirm')
       ) {
-        that.props.history.push(ROUTES.ROOT.path)
+        window.location.href = ROUTES.ROOT.path
       }
     })
 

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

@@ -403,7 +403,7 @@ class JoeInstances extends Component<
                     </TableCell>
 
                     <TableCell className={classes.cell}>
-                      {data.data[i].url ? data.data[i].url : ''}
+                      {data.data[i].url ? data.data[i].url : 'N/A'}
                       {data.data[i].url &&
                       !isHttps(data.data[i].url) &&
                       !data.data[i].use_tunnel ? (
@@ -414,9 +414,7 @@ class JoeInstances extends Component<
                         >
                           <WarningIcon className={classes.warningIcon} />
                         </Tooltip>
-                      ) : (
-                        'N/A'
-                      )}
+                      ) : null}
                     </TableCell>
 
                     <TableCell align={'right'}>