INFRA-3285 | make submit button disable on validation failure and add additonal condition on maxAllocationStorageInGb validation

src/coreform/baseform/BaseForm.tsx

@@ -55,7 +55,6 @@ const BaseForm = (props: BaseFormProps) => {
     justifyContent: 'flex-end',
     float: 'right',
   };
-  const submitChangeRequestStyle = { ...defaultSubmitButtonStyle, backgroundColor: '#fd7700' };
   const { setCrDescription } = props;
 
   const [currentTab, setCurrentTab] = React.useState(0);
@@ -65,12 +64,18 @@ const BaseForm = (props: BaseFormProps) => {
   const [manifestVersion, setManifestVersion] = React.useState();
   const [versionListData, setVersionListData] = React.useState<any>([]);
   const [isSubmitButtonDisabled, disableSubmitButton] = React.useState(false);
+  const [haveValidationError, setHaveValidationError] = React.useState(false);
   const preChangeManifest = useSelector((state: RootState) => state.initial.preChangeManifest);
   const [rolloutPopupOpen, setRolloutPopupOpen] = React.useState(false);
   const [isCrRequired, setCrRequired] = React.useState(false);
   const tabList = BaseFormTabList(props.type);
 
-  const isDisabled = () => {
+  const submitChangeRequestStyle = {
+    ...defaultSubmitButtonStyle,
+    ...(!haveValidationError ? { backgroundColor: '#fd7700' } : {}),
+  };
+  const isDisabled = (): boolean => {
+    if (haveValidationError) return true;
     if (
       manifestVersion === LATEST_VERSION ||
       manifestVersion === undefined ||
@@ -159,7 +164,9 @@ const BaseForm = (props: BaseFormProps) => {
 
           try {
             await validateYupSchema(value, manifestValidationSchema, false, value);
+            setHaveValidationError(false);
           } catch (err) {
+            setHaveValidationError(true);
             return yupToFormErrors(err); //for rendering validation errors
           }
           return {};

src/models/ManifestValidationSchema.ts

@@ -800,14 +800,18 @@ const databaseValidationSchema = yup.object({
   }),
   maxAllocatedStorageInGb: yup
     .number()
-    .test('test', 'Max Allocated should not be less than DB size', (value, context) => {
-      const maxAllocated =
-        context.options?.context?.extraResources?.database?.maxAllocatedStorageInGb;
-      if (maxAllocated < context.options?.context?.extraResources?.database?.sizeInGb) {
-        return false;
-      }
-      return true;
-    }),
+    .test(
+      'test',
+      'Max Allocated should be at least 10% more than than DB size',
+      (value, context) => {
+        const maxAllocated =
+          context.options?.context?.extraResources?.database?.maxAllocatedStorageInGb;
+        if (maxAllocated < 1.1 * context.options?.context?.extraResources?.database?.sizeInGb) {
+          return false;
+        }
+        return true;
+      },
+    ),
   iops: iopsValidationSchema,
   storageThroughput: storageThroughputValidationSchema,
   dbNames: yup