Merge branch '536-generic-fields-for-ce' into 'master'

fix(ui): set correct docker image initially, render missing fields for CE (https://gitlab.com/postgres-ai/database-lab/-/issues/536)

Closes #536

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

Author: NikolayS

ui/packages/ce/src/App/Menu/StickyTopBar/index.tsx

@@ -11,7 +11,7 @@ import { activateBilling } from 'api/configs/activateBilling'
 
 import styles from './styles.module.scss'
 
-const AUTO_HIDE_DURATION = 1500
+const AUTO_HIDE_DURATION = 3000
 
 export const StickyTopBar = () => {
   const useStyles = makeStyles(

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

@@ -32,7 +32,7 @@ import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex'
 import { Select } from '@postgres.ai/shared/components/Select'
 
-import { generateToken } from 'utils/utils'
+import { generateToken, validateDLEName } from 'utils/utils'
 import urls from 'utils/urls'
 
 import { AnsibleInstance } from 'components/DbLabInstanceForm/DbLabFormSteps/AnsibleInstance'
@@ -483,6 +483,12 @@ const DbLabInstanceForm = (props: DbLabInstanceFormWithStylesProps) => {
                     InputLabelProps={{
                       shrink: true,
                     }}
+                    helperText={
+                      validateDLEName(state.name)
+                        ? 'Name must be lowercase and contain only letters and numbers.'
+                        : ''
+                    }
+                    error={validateDLEName(state.name)}
                     onChange={(
                       event: React.ChangeEvent<
                         HTMLTextAreaElement | HTMLInputElement
@@ -595,7 +601,10 @@ const DbLabInstanceForm = (props: DbLabInstanceFormWithStylesProps) => {
             </div>
             <DbLabInstanceFormSidebar
               state={state}
-              handleCreate={() => handleSetFormStep('docker')}
+              disabled={validateDLEName(state.name)}
+              handleCreate={() =>
+                !validateDLEName(state.name) && handleSetFormStep('docker')
+              }
             />
           </>
         ) : state.formStep === 'ansible' && permitted ? (

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

@@ -88,9 +88,11 @@ const useStyles = makeStyles({
 export const DbLabInstanceFormSidebar = ({
   state,
   handleCreate,
+  disabled,
 }: {
   state: typeof initialState
   handleCreate: () => void
+  disabled: boolean
 }) => {
   const classes = useStyles()
 
@@ -200,7 +202,7 @@ export const DbLabInstanceFormSidebar = ({
         variant="contained"
         color="primary"
         onClick={handleCreate}
-        disabled={!state.name || !state.verificationToken}
+        disabled={!state.name || !state.verificationToken || disabled}
       >
         Create DLE
       </Button>

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

@@ -21,7 +21,7 @@ import { DockerInstance } from 'components/DbLabInstanceInstallForm/DbLabFormSte
 import { availableTags } from 'components/DbLabInstanceForm/utils'
 import { Select } from '@postgres.ai/shared/components/Select'
 
-import { generateToken } from 'utils/utils'
+import { generateToken, validateDLEName } from 'utils/utils'
 import urls from 'utils/urls'
 
 interface DbLabInstanceFormWithStylesProps extends DbLabInstanceFormProps {
@@ -93,6 +93,12 @@ const DbLabInstanceInstallForm = (props: DbLabInstanceFormWithStylesProps) => {
                 InputLabelProps={{
                   shrink: true,
                 }}
+                helperText={
+                  validateDLEName(state.name)
+                    ? 'Name must be lowercase and contain only letters and numbers.'
+                    : ''
+                }
+                error={validateDLEName(state.name)}
                 onChange={(
                   event: React.ChangeEvent<
                     HTMLTextAreaElement | HTMLInputElement
@@ -192,7 +198,10 @@ const DbLabInstanceInstallForm = (props: DbLabInstanceFormWithStylesProps) => {
             </div>
             <DbLabInstanceFormInstallSidebar
               state={state}
-              handleCreate={() => handleSetFormStep('docker')}
+              disabled={validateDLEName(state.name)}
+              handleCreate={() =>
+                !validateDLEName(state.name) && handleSetFormStep('docker')
+              }
             />
           </>
         ) : state.formStep === 'ansible' && permitted ? (

ui/packages/platform/src/components/DbLabInstanceInstallForm/DbLabInstanceInstallFormSidebar.tsx

@@ -72,9 +72,11 @@ const useStyles = makeStyles({
 export const DbLabInstanceFormInstallSidebar = ({
   state,
   handleCreate,
+  disabled,
 }: {
   state: typeof initialState
   handleCreate: () => void
+  disabled: boolean
 }) => {
   const classes = useStyles()
 
@@ -97,7 +99,7 @@ export const DbLabInstanceFormInstallSidebar = ({
           variant="contained"
           color="primary"
           onClick={handleCreate}
-          disabled={!state.name || !state.verificationToken}
+          disabled={!state.name || !state.verificationToken || !disabled}
         >
           Install DLE
         </Button>

ui/packages/platform/src/utils/utils.ts

@@ -24,3 +24,10 @@ export const isHttps = function (url: string | string[]) {
 
 export const snakeToCamel = (str: string) =>
   str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase())
+
+export const validateDLEName = (name: string) => {
+  return (
+    name.length > 0 &&
+    !name.match(/^([a-z](?:[-a-z0-9]{0,61}[a-z0-9])?|[1-9][0-9]{0,19})$/)
+  )
+}