Merge pull request #1209 from gchq/BAI-1133/disable-create-buttons-if…

…-error

Disable create and edit buttons on failure

Former-commit-id: 22bb031

frontend/pages/model/[modelId]/inference/new.tsx

@@ -6,7 +6,7 @@ import { Stack } from '@mui/system'
 import { CreateInferenceParams, postInference } from 'actions/inferencing'
 import { useGetModel } from 'actions/model'
 import { useRouter } from 'next/router'
-import { FormEvent, useState } from 'react'
+import { FormEvent, useCallback, useState } from 'react'
 import Loading from 'src/common/Loading'
 import Title from 'src/common/Title'
 import InferenceForm from 'src/entry/model/inferencing/InferenceForm'
@@ -20,6 +20,7 @@ export default function NewInference() {
   const [port, setPort] = useState('')
   const [processorType, setProcessorType] = useState('cpu')
   const [memory, setMemory] = useState(2)
+  const [isRegistryError, setIsRegistryError] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
   const [loading, setLoading] = useState(false)
 
@@ -31,6 +32,8 @@ export default function NewInference() {
 
   const { model, isModelLoading, isModelError } = useGetModel(modelId)
 
+  const handleRegistryError = useCallback((value: boolean) => setIsRegistryError(value), [])
+
   if (isModelError) {
     return <MessageAlert message={isModelError.info.message} severity='error' />
   }
@@ -101,6 +104,7 @@ export default function NewInference() {
                   formData={{ image, description, memory, port, processorType }}
                   onImageChange={(value) => setImage(value)}
                   onDescriptionChange={(value) => setDescription(value)}
+                  onRegistryError={handleRegistryError}
                   onProcessorTypeChange={(value) => setProcessorType(value)}
                   onMemoryChange={(value) => setMemory(value)}
                   onPortChange={(value) => setPort(value)}
@@ -110,7 +114,7 @@ export default function NewInference() {
                 <LoadingButton
                   variant='contained'
                   type='submit'
-                  disabled={!(image && description && port)}
+                  disabled={!(image && description && port && !isRegistryError)}
                   loading={loading}
                 >
                   Create Inferencing Service

frontend/pages/model/[modelId]/release/new.tsx

@@ -5,7 +5,7 @@ import { useGetModel } from 'actions/model'
 import { CreateReleaseParams, postRelease, postSimpleFileForRelease } from 'actions/release'
 import { AxiosProgressEvent } from 'axios'
 import { useRouter } from 'next/router'
-import { FormEvent, useState } from 'react'
+import { FormEvent, useCallback, useState } from 'react'
 import Loading from 'src/common/Loading'
 import Title from 'src/common/Title'
 import ReleaseForm from 'src/entry/model/releases/ReleaseForm'
@@ -26,6 +26,7 @@ export default function NewRelease() {
   const [imageList, setImageList] = useState<FlattenedModelImage[]>([])
   const [errorMessage, setErrorMessage] = useState('')
   const [loading, setLoading] = useState(false)
+  const [isRegistryError, setIsRegistryError] = useState(false)
   const [currentFileUploadProgress, setCurrentFileUploadProgress] = useState<FileUploadProgress | undefined>(undefined)
   const [uploadedFiles, setUploadedFiles] = useState<string[]>([])
   const router = useRouter()
@@ -34,6 +35,8 @@ export default function NewRelease() {
   const { modelId }: { modelId?: string } = router.query
   const { model, isModelLoading, isModelError } = useGetModel(modelId)
 
+  const handleRegistryError = useCallback((value: boolean) => setIsRegistryError(value), [])
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault()
 
@@ -156,6 +159,7 @@ export default function NewRelease() {
                   filesMetadata={filesMetadata}
                   onFilesMetadataChange={(value) => setFilesMetadata(value)}
                   onImageListChange={(value) => setImageList(value)}
+                  onRegistryError={handleRegistryError}
                   currentFileUploadProgress={currentFileUploadProgress}
                   uploadedFiles={uploadedFiles}
                   filesToUploadCount={files.length}
@@ -165,7 +169,7 @@ export default function NewRelease() {
                     variant='contained'
                     loading={loading}
                     type='submit'
-                    disabled={!semver || !releaseNotes || !isValidSemver(semver)}
+                    disabled={!(semver && releaseNotes && isValidSemver(semver) && !isRegistryError)}
                     sx={{ width: 'fit-content' }}
                     data-test='createReleaseButton'
                   >

frontend/src/Form/EditableFormHeading.tsx

@@ -11,6 +11,7 @@ type EditableFormHeadingProps = {
   onEdit: () => void
   onCancel: () => void
   onSubmit: () => void
+  isRegistryError?: boolean
   onDelete?: () => void
   errorMessage?: string
   deleteButtonText?: string
@@ -29,6 +30,7 @@ export default function EditableFormHeading({
   errorMessage = '',
   deleteButtonText = 'Delete',
   showDeleteButton = false,
+  isRegistryError = false,
 }: EditableFormHeadingProps) {
   return (
     <Stack sx={{ pb: 2 }}>
@@ -41,11 +43,17 @@ export default function EditableFormHeading({
         {heading}
         {!isEdit && (
           <Stack direction='row' spacing={1} justifyContent='flex-end' alignItems='center' sx={{ mb: { xs: 2 } }}>
-            <Button variant='outlined' onClick={onEdit} data-test='editFormButton'>
+            <Button variant='outlined' onClick={onEdit} data-test='editFormButton' disabled={isRegistryError}>
               {editButtonText}
             </Button>
             {showDeleteButton && (
-              <Button variant='contained' color='secondary' onClick={onDelete} data-test='deleteFormButton'>
+              <Button
+                variant='contained'
+                color='secondary'
+                onClick={onDelete}
+                data-test='deleteFormButton'
+                disabled={isRegistryError}
+              >
                 {deleteButtonText}
               </Button>
             )}
@@ -56,7 +64,13 @@ export default function EditableFormHeading({
             <Button variant='outlined' onClick={onCancel} data-test='cancelEditFormButton'>
               Cancel
             </Button>
-            <LoadingButton variant='contained' loading={isLoading} onClick={onSubmit} data-test='saveEditFormButton'>
+            <LoadingButton
+              variant='contained'
+              loading={isLoading}
+              onClick={onSubmit}
+              data-test='saveEditFormButton'
+              disabled={isRegistryError}
+            >
               Save
             </LoadingButton>
           </Stack>

frontend/src/entry/model/ModelImageList.tsx

@@ -2,7 +2,7 @@ import { Typography } from '@mui/material'
 import Autocomplete, { AutocompleteRenderInputParams } from '@mui/material/Autocomplete'
 import TextField from '@mui/material/TextField'
 import { useGetModelImages } from 'actions/model'
-import { SyntheticEvent, useMemo } from 'react'
+import { SyntheticEvent, useEffect, useMemo } from 'react'
 import Loading from 'src/common/Loading'
 import MessageAlert from 'src/MessageAlert'
 import { EntryInterface, FlattenedModelImage } from 'types/types'
@@ -22,12 +22,24 @@ type PartialModelImageListProps =
 
 type ModelImageListProps = {
   model: EntryInterface
+  onRegistryError: (value: boolean) => void
   readOnly?: boolean
 } & PartialModelImageListProps
 
-export default function ModelImageList({ model, value, onChange, readOnly = false, multiple }: ModelImageListProps) {
+export default function ModelImageList({
+  model,
+  value,
+  onChange,
+  onRegistryError,
+  readOnly = false,
+  multiple,
+}: ModelImageListProps) {
   const { modelImages, isModelImagesLoading, isModelImagesError } = useGetModelImages(model.id)
 
+  useEffect(() => {
+    onRegistryError(!!isModelImagesError)
+  }, [isModelImagesError, onRegistryError])
+
   const sortedImageList = useMemo(() => {
     const flattenedImageList: FlattenedModelImage[] = []
 

frontend/src/entry/model/inferencing/EditableInference.tsx

@@ -27,6 +27,7 @@ export default function EditableInference({ inference }: EditableInferenceProps)
   const [processorType, setProcessorType] = useState(inference.settings.processorType)
   const [memory, setMemory] = useState(inference.settings.memory)
   const [errorMessage, setErrorMessage] = useState('')
+  const [isRegistryError, setIsRegistryError] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [isEdit, onIsEditChange] = useState(false)
 
@@ -41,6 +42,8 @@ export default function EditableInference({ inference }: EditableInferenceProps)
     setMemory(inference.settings.memory)
   }, [setDescription, setPort, setProcessorType, setMemory, inference])
 
+  const handleRegistryError = useCallback((value: boolean) => setIsRegistryError(value), [])
+
   useEffect(() => {
     resetForm()
   }, [resetForm])
@@ -108,6 +111,7 @@ export default function EditableInference({ inference }: EditableInferenceProps)
         onCancel={handleCancel}
         onSubmit={handleSubmit}
         errorMessage={errorMessage}
+        isRegistryError={isRegistryError}
         editButtonText='Edit Settings'
       />
       <InferenceForm
@@ -117,6 +121,7 @@ export default function EditableInference({ inference }: EditableInferenceProps)
         formData={{ image, description, port, processorType, memory }}
         onImageChange={(value) => setImage(value)}
         onDescriptionChange={(value) => setDescription(value)}
+        onRegistryError={handleRegistryError}
         onProcessorTypeChange={(value) => setProcessorType(value)}
         onMemoryChange={(value) => setMemory(value)}
         onPortChange={(value) => setPort(value)}

frontend/src/entry/model/inferencing/InferenceForm.tsx

@@ -33,6 +33,7 @@ type InferenceFormProps = {
   onDescriptionChange: (value: string) => void
   onPortChange: (value: string) => void
   onProcessorTypeChange: (value: string) => void
+  onRegistryError: (value: boolean) => void
   onMemoryChange: (value: number) => void
 } & EditableInferenceFormProps
 
@@ -44,6 +45,7 @@ export default function InferenceForm({
   onPortChange,
   onProcessorTypeChange,
   onMemoryChange,
+  onRegistryError,
   editable = false,
   isEdit = false,
 }: InferenceFormProps) {
@@ -91,7 +93,12 @@ export default function InferenceForm({
             Image
             {!isReadOnly && <span style={{ color: theme.palette.error.main }}>*</span>}
           </Typography>
-          <ModelImageList model={model} value={formData.image} onChange={handleImageChange} />
+          <ModelImageList
+            model={model}
+            value={formData.image}
+            onChange={handleImageChange}
+            onRegistryError={onRegistryError}
+          />
         </>
       )}
       <Stack>

frontend/src/entry/model/releases/EditableRelease.tsx

@@ -43,6 +43,7 @@ export default function EditableRelease({ release, isEdit, onIsEditChange }: Edi
   const [imageList, setImageList] = useState<FlattenedModelImage[]>(release.images)
   const [errorMessage, setErrorMessage] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [isRegistryError, setIsRegistryError] = useState(false)
   const [currentFileUploadProgress, setCurrentFileUploadProgress] = useState<FileUploadProgress | undefined>(undefined)
   const [uploadedFiles, setUploadedFiles] = useState<string[]>([])
   const [open, setOpen] = useState(false)
@@ -57,6 +58,8 @@ export default function EditableRelease({ release, isEdit, onIsEditChange }: Edi
   const { setUnsavedChanges } = useContext(UnsavedChangesContext)
   const router = useRouter()
 
+  const handleRegistryError = useCallback((value: boolean) => setIsRegistryError(value), [])
+
   const handleDeleteConfirm = useCallback(async () => {
     setErrorMessage('')
     if (model) {
@@ -195,6 +198,7 @@ export default function EditableRelease({ release, isEdit, onIsEditChange }: Edi
         onSubmit={handleSubmit}
         onDelete={() => setOpen(true)}
         errorMessage={errorMessage}
+        isRegistryError={isRegistryError}
       />
       <ReleaseForm
         editable
@@ -214,6 +218,7 @@ export default function EditableRelease({ release, isEdit, onIsEditChange }: Edi
         onFilesChange={(value) => setFiles(value)}
         onFilesMetadataChange={(value) => setFilesMetadata(value)}
         onImageListChange={(value) => setImageList(value)}
+        onRegistryError={handleRegistryError}
         currentFileUploadProgress={currentFileUploadProgress}
         uploadedFiles={uploadedFiles}
         filesToUploadCount={filesToUploadCount}

frontend/src/entry/model/releases/ReleaseForm.tsx

@@ -41,6 +41,7 @@ type ReleaseFormProps = {
   filesMetadata: FileWithMetadata[]
   onFilesMetadataChange: (value: FileWithMetadata[]) => void
   onImageListChange: (value: FlattenedModelImage[]) => void
+  onRegistryError: (value: boolean) => void
   currentFileUploadProgress?: FileUploadProgress
   uploadedFiles: string[]
   filesToUploadCount: number
@@ -56,6 +57,7 @@ export default function ReleaseForm({
   filesMetadata,
   onFilesMetadataChange,
   onImageListChange,
+  onRegistryError,
   editable = false,
   isEdit = false,
   currentFileUploadProgress,
@@ -222,6 +224,7 @@ export default function ReleaseForm({
           value={formData.imageList}
           readOnly={isReadOnly}
           onChange={onImageListChange}
+          onRegistryError={onRegistryError}
         />
         {isReadOnly && formData.imageList.length === 0 && <ReadOnlyAnswer value='No images' />}
       </Stack>