fix(deployments): show error indicator in collapsed sections (Issue #2130) (#2146)

dearsimanovich-epam · web-flow · commit cbed3a9aaed3 · 2026-02-13T09:11:29.000Z
diff --git a/apps/ai-dial-admin/src/components/Common/Accordion/Accordion.spec.tsx b/apps/ai-dial-admin/src/components/Common/Accordion/Accordion.spec.tsx
@@ -39,4 +39,14 @@ describe('Common components :: Accordion', () => {
     fireEvent.click(toggleButton);
     expect(content).toHaveClass('hidden');
   });
+
+  test('render error indicator', () => {
+    render(
+      <Accordion title={'title'} errorIndicator={true}>
+        <div>Child content</div>
+      </Accordion>,
+    );
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
 });
diff --git a/apps/ai-dial-admin/src/components/Common/Accordion/Accordion.tsx b/apps/ai-dial-admin/src/components/Common/Accordion/Accordion.tsx
@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
 
 import { BASE_BUTTON_ICON_PROPS } from '@/src/constants/main-layout';
+import { ErrorI18nKey } from '@/src/constants/i18n';
+import { useI18n } from '@/src/locales/client';
 
 interface Props {
   title?: string;
@@ -12,6 +14,7 @@ interface Props {
   header?: ReactElement<{ isCollapsed: boolean }>;
   containerClassName?: string;
   contentClassName?: string;
+  errorIndicator?: boolean;
 }
 
 const Accordion: FC<Props> = ({
@@ -22,7 +25,9 @@ const Accordion: FC<Props> = ({
   actionButtons,
   contentClassName,
   containerClassName,
+  errorIndicator,
 }) => {
+  const t = useI18n();
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
 
   const toggleCollapse = useCallback(() => {
@@ -42,6 +47,13 @@ const Accordion: FC<Props> = ({
           <button className="flex items-center w-full" onClick={toggleCollapse}>
             {icon}
             <h3 className="mx-2">{title}</h3>
+            {errorIndicator && (
+              <span
+                role="status"
+                className="flex w-2 h-2 rounded no-user-select bg-red-400"
+                aria-label={t(ErrorI18nKey.Error)}
+              />
+            )}
           </button>
           {actionButtons}
         </div>
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerAutoscaling.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerAutoscaling.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { DialNumberInputField, DialSelectField } from '@epam/ai-dial-ui-kit';
 
 import { AutoscalingStrategy, Container } from '@/src/models/deployments/containers';
@@ -10,7 +10,7 @@ import { AUTOSCALE_OPTIONS } from '@/src/constants/deployments/containers';
 import { useI18n } from '@/src/locales/client';
 
 import Accordion from '@/src/components/Common/Accordion/Accordion';
-import { isEditDisabled } from '@/src/utils/deployments/containers';
+import { isEditDisabled, isErrorPresent } from '@/src/utils/deployments/containers';
 
 interface Props {
   container: Container;
@@ -19,10 +19,19 @@ interface Props {
 
 const ContainerAutoscaling: FC<Props> = ({ container, setContainer }) => {
   const t = useI18n();
-  const { dispatch, resetCounter } = useSaveValidationContext();
-  const scalingOptions = AUTOSCALE_OPTIONS(t);
+  const { dispatch, resetCounter, isValid, errorFields } = useSaveValidationContext();
 
+  const scalingOptions = useMemo(() => AUTOSCALE_OPTIONS(t), [t]);
   const [replicasError, setReplicasError] = useState<FieldError | null>(null);
+  const [isSectionInvalid, setSectionInvalid] = useState(false);
+
+  useEffect(() => {
+    if (!isValid) {
+      setSectionInvalid(isErrorPresent(errorFields, ['scaling']));
+    } else {
+      setSectionInvalid(false);
+    }
+  }, [errorFields, isValid]);
 
   useEffect(() => {
     if (resetCounter || (container.scaling?.maxReplicas && container.scaling.maxReplicas)) {
@@ -108,7 +117,7 @@ const ContainerAutoscaling: FC<Props> = ({ container, setContainer }) => {
   );
 
   return (
-    <Accordion title={t(EntityFieldsI18nKey.Autoscaling)}>
+    <Accordion title={t(EntityFieldsI18nKey.Autoscaling)} errorIndicator={isSectionInvalid}>
       <div className="flex flex-col gap-6">
         <div className="flex gap-4 flex-col lg:flex-row">
           <DialSelectField
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerEndpoint.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerEndpoint.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { EntityFieldsI18nKey } from '@/src/constants/i18n';
 import { Container } from '@/src/models/deployments/containers';
@@ -9,6 +9,8 @@ import Accordion from '@/src/components/Common/Accordion/Accordion';
 import Transport from '@/src/components/Deployments/Fields/ContainerEndpoint/Transport';
 import Port from '@/src/components/Deployments/Fields/ContainerEndpoint/Port';
 import EndpointPath from '@/src/components/Deployments/Fields/ContainerEndpoint/EndpointPath';
+import { isErrorPresent } from '@/src/utils/deployments/containers';
+import { useSaveValidationContext } from '@/src/context/SaveValidationContext';
 
 interface Props {
   container: Container;
@@ -18,9 +20,22 @@ interface Props {
 
 const ContainerEndpoint: FC<Props> = ({ container, setContainer, route }) => {
   const t = useI18n();
+  const { errorFields, isValid } = useSaveValidationContext();
+
+  const [isSectionInvalid, setSectionInvalid] = useState(false);
+
+  useEffect(() => {
+    if (!isValid) {
+      setSectionInvalid(
+        isErrorPresent(errorFields, ['transport', 'mcpEndpointPath', 'containerGrpcPort', 'containerPort']),
+      );
+    } else {
+      setSectionInvalid(false);
+    }
+  }, [errorFields, isValid]);
 
   return (
-    <Accordion title={t(EntityFieldsI18nKey.EndpointConfiguration)}>
+    <Accordion title={t(EntityFieldsI18nKey.EndpointConfiguration)} errorIndicator={isSectionInvalid}>
       <div className="flex flex-col gap-y-8">
         {route === ApplicationRoute.McpContainers && (
           <div className="flex gap-4">
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerEndpoint/Port.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerEndpoint/Port.tsx
@@ -28,7 +28,7 @@ const Port: FC<Props> = ({ container, setContainer }) => {
         const { containerPort: __, ...rest } = container;
         setContainer(rest);
       } else {
-        const error = getPortError(containerPort as number);
+        const error = getPortError(containerPort as number, t);
         setPortError(error);
         dispatch({ type: ValidationActionType.SetField, field: 'containerPort', isValid: !error });
         setContainer({
@@ -37,7 +37,7 @@ const Port: FC<Props> = ({ container, setContainer }) => {
         });
       }
     },
-    [container, dispatch, setContainer],
+    [container, dispatch, setContainer, t],
   );
 
   const onGRPCPortChange = useCallback(
@@ -46,7 +46,7 @@ const Port: FC<Props> = ({ container, setContainer }) => {
         const { containerGrpcPort: __, ...rest } = container;
         setContainer(rest);
       } else {
-        const error = getPortError(containerGrpcPort as number);
+        const error = getPortError(containerGrpcPort as number, t);
         setGrpcPortError(error);
         dispatch({ type: ValidationActionType.SetField, field: 'containerGrpcPort', isValid: !error });
         setContainer({
@@ -55,24 +55,24 @@ const Port: FC<Props> = ({ container, setContainer }) => {
         });
       }
     },
-    [container, dispatch, setContainer],
+    [container, dispatch, setContainer, t],
   );
 
   useEffect(() => {
     if (resetCounter || container.containerPort) {
-      const error = getPortError(container.containerPort as number);
+      const error = getPortError(container.containerPort as number, t);
       setPortError(error);
       dispatch({ type: ValidationActionType.SetField, field: 'containerPort', isValid: !error });
     }
-  }, [container.containerPort, dispatch, resetCounter]);
+  }, [container.containerPort, dispatch, resetCounter, t]);
 
   useEffect(() => {
     if (resetCounter || container.containerGrpcPort) {
-      const error = getPortError(container.containerGrpcPort as number);
+      const error = getPortError(container.containerGrpcPort as number, t);
       setGrpcPortError(error);
       dispatch({ type: ValidationActionType.SetField, field: 'containerGrpcPort', isValid: !error });
     }
-  }, [container.containerGrpcPort, dispatch, resetCounter]);
+  }, [container.containerGrpcPort, dispatch, resetCounter, t]);
 
   return (
     <div className="flex gap-4">
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerResources.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerResources.tsx
@@ -7,7 +7,7 @@ import { EntityFieldsI18nKey } from '@/src/constants/i18n';
 import { FieldError } from '@/src/models/error';
 import { useSaveValidationContext, ValidationActionType } from '@/src/context/SaveValidationContext';
 import { getGpuError } from '@/src/utils/deployments/validation';
-import { isEditDisabled } from '@/src/utils/deployments/containers';
+import { isEditDisabled, isErrorPresent } from '@/src/utils/deployments/containers';
 import { useI18n } from '@/src/locales/client';
 
 import Accordion from '@/src/components/Common/Accordion/Accordion';
@@ -22,9 +22,20 @@ interface Props {
 
 const ContainerResources: FC<Props> = ({ container, setContainer, route }) => {
   const t = useI18n();
-  const { dispatch, resetCounter } = useSaveValidationContext();
+  const { dispatch, resetCounter, errorFields, isValid } = useSaveValidationContext();
 
   const [error, setError] = useState<FieldError | null>(null);
+  const [isSectionInvalid, setSectionInvalid] = useState(false);
+
+  useEffect(() => {
+    if (!isValid) {
+      setSectionInvalid(
+        isErrorPresent(errorFields, ['gpuRequest', 'cpuRequest', 'cpuLimit', 'memoryRequest', 'memoryLimit']),
+      );
+    } else {
+      setSectionInvalid(false);
+    }
+  }, [errorFields, isValid]);
 
   const onChangeGpuRequest = useCallback(
     (gpuRequest?: string | number) => {
@@ -66,7 +77,7 @@ const ContainerResources: FC<Props> = ({ container, setContainer, route }) => {
   }, [container.resources?.requests, dispatch, resetCounter, t]);
 
   return (
-    <Accordion title={t(EntityFieldsI18nKey.Resources)}>
+    <Accordion title={t(EntityFieldsI18nKey.Resources)} errorIndicator={isSectionInvalid}>
       <div className="flex flex-col gap-x-2 gap-y-8">
         <CPUFields container={container} setContainer={setContainer} />
         <MemoryFields container={container} setContainer={setContainer} />
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { IconPlus } from '@tabler/icons-react';
@@ -8,12 +8,13 @@ import { EnvironmentVariable } from '@/src/models/deployments/variables';
 import { MOUNT_TYPE, VALUE_TYPE } from '@/src/types/deployments/variables';
 import { EntityFieldsI18nKey, EnvVariablesI18nKey } from '@/src/constants/i18n';
 import { Container } from '@/src/models/deployments/containers';
-import { isEditDisabled } from '@/src/utils/deployments/containers';
+import { isEditDisabled, isErrorPresent } from '@/src/utils/deployments/containers';
 import { useI18n } from '@/src/locales/client';
 import { BASE_BUTTON_ICON_PROPS } from '@/src/constants/main-layout';
 
 import Accordion from '@/src/components/Common/Accordion/Accordion';
 import Variable from '@/src/components/Deployments/Fields/ContainerVariables/Variable';
+import { useSaveValidationContext } from '@/src/context/SaveValidationContext';
 
 interface Props {
   container: Container;
@@ -22,6 +23,9 @@ interface Props {
 
 const ContainerVariables: FC<Props> = ({ container, setContainer }) => {
   const t = useI18n();
+  const { errorFields, isValid } = useSaveValidationContext();
+
+  const [isSectionInvalid, setSectionInvalid] = useState(false);
 
   const variables = useMemo(() => container.metadata?.envs || [], [container]);
 
@@ -84,8 +88,16 @@ const ContainerVariables: FC<Props> = ({ container, setContainer }) => {
     [findColumn, onChangeVariables, variables],
   );
 
+  useEffect(() => {
+    if (!isValid) {
+      setSectionInvalid(isErrorPresent(errorFields, ['variable_']));
+    } else {
+      setSectionInvalid(false);
+    }
+  }, [errorFields, isValid]);
+
   return (
-    <Accordion title={t(EntityFieldsI18nKey.EnvironmentVariables)}>
+    <Accordion title={t(EntityFieldsI18nKey.EnvironmentVariables)} errorIndicator={isSectionInvalid}>
       <div className="flex flex-col gap-y-2">
         <DndProvider backend={HTML5Backend}>
           <div className="flex flex-col gap-2 lg:pr-2 overflow-auto">
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables/Value.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables/Value.tsx
@@ -105,6 +105,7 @@ const ContainerVariableValue: FC<Props> = ({ value, index, onValueChange, mountT
         iconBefore={<IconFileArrowRight {...BASE_BUTTON_ICON_PROPS} />}
         onClick={handleFileInputClick}
         className="absolute right-0"
+        disabled={disabled}
       />
       <input type="file" className="hidden" ref={inputRef} onChange={handleFileUpload} />
     </div>
diff --git a/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables/Variable.tsx b/apps/ai-dial-admin/src/components/Deployments/Fields/ContainerVariables/Variable.tsx
@@ -173,7 +173,7 @@ const Variable: FC<Props> = ({ index, variable, updateVariable, removeVariable,
           </div>
         </div>
         <div className="w-[40px] flex-shrink-0">
-          <DialRemoveButton onClick={onRemove} className={index === 0 ? 'mt-3 lg:mt-6' : ''} />
+          <DialRemoveButton onClick={onRemove} className={index === 0 ? 'mt-3 lg:mt-6' : ''} disabled={disabled} />
         </div>
       </div>
     </DraggableItem>
diff --git a/apps/ai-dial-admin/src/components/EntityHeaderControls/ContainersHeader.tsx b/apps/ai-dial-admin/src/components/EntityHeaderControls/ContainersHeader.tsx
@@ -14,7 +14,6 @@ interface Props extends ContainersButtonsWrapperProps {
   tabs: TabModel[];
   activeTab: EntityViewTab;
   children?: ReactNode;
-
   onChangeActiveTab: (tab: EntityViewTab) => void;
 }
 
diff --git a/apps/ai-dial-admin/src/components/EntityHeaderControls/Wrappers/ContainersButtonsWrapper.tsx b/apps/ai-dial-admin/src/components/EntityHeaderControls/Wrappers/ContainersButtonsWrapper.tsx
@@ -208,13 +208,15 @@ const ContainersButtonsWrapper: FC<ContainersButtonsWrapperProps> = ({
                         items={createToolsetOptions}
                         variant={ButtonVariant.Neutral}
                         appearance={ButtonAppearance.Outlined}
+                        disabled={!isValid}
                       />
                     ) : (
                       <DialNeutralButton
                         className={buttonsClassNames}
                         label={t(CreateI18nKey.CreateEntity, { entity: getTranslatedEntity(route, t) })}
                         iconBefore={<IconPlus {...BASE_BUTTON_ICON_PROPS} />}
                         onClick={onOpenCreateModal}
+                        disabled={!isValid}
                       />
                     )}
                   </>
diff --git a/apps/ai-dial-admin/src/constants/i18n.ts b/apps/ai-dial-admin/src/constants/i18n.ts
@@ -838,6 +838,7 @@ export enum ErrorI18nKey {
   UrlField = 'Error.UrlField',
   WarningEndpoint = 'Error.WarningEndpoint',
   ServerError = 'Error.ServerError',
+  Error = 'Error.Error',
   DescriptionLength = 'Error.DescriptionLength',
   DisplayNameErrorVersion = 'Error.DisplayNameErrorVersion',
   NameExists = 'Error.NameExists',
diff --git a/apps/ai-dial-admin/src/context/SaveValidationContext.tsx b/apps/ai-dial-admin/src/context/SaveValidationContext.tsx
@@ -29,6 +29,7 @@ interface SaveValidationContextType {
   jsonErrorNotifications: JSONEditorErrorNotification[];
   jsonErrors: JSONEditorError[] | null;
   resetCounter: number;
+  errorFields: Map<string, boolean>;
 }
 
 const validationReducer = (state: ValidationState, action: ValidationAction): ValidationState => {
@@ -94,6 +95,7 @@ export const SaveValidationContextProvider = ({ children }: { children: ReactNod
         dispatch,
         jsonErrors: state.jsonErrors,
         resetCounter: state.resetCounter,
+        errorFields: state.fieldValidations,
       }}
     >
       {children}
diff --git a/apps/ai-dial-admin/src/locales/en.ts b/apps/ai-dial-admin/src/locales/en.ts
@@ -1085,6 +1085,7 @@ export default {
     Domain: 'Enter domain',
   },
   Error: {
+    Error: 'Error',
     ServerError: 'Server Error',
     EmptyField: 'This field could not be empty',
     RequiredField: 'This field is required',
diff --git a/apps/ai-dial-admin/src/utils/deployments/containers.ts b/apps/ai-dial-admin/src/utils/deployments/containers.ts
@@ -138,3 +138,7 @@ export const convertMbToBytes = (value?: string): string => {
 export const convertBytesToMb = (value?: string): string => {
   return String(Math.round(Number(value) / (1024 * 1024)));
 };
+
+export const isErrorPresent = (errors: Map<string, boolean>, errorKeys: string[]) => {
+  return [...errors].some(([key, value]) => errorKeys.some((errorKey) => key.includes(errorKey)) && !value);
+};
diff --git a/apps/ai-dial-admin/src/utils/deployments/tests/containers.spec.ts b/apps/ai-dial-admin/src/utils/deployments/tests/containers.spec.ts
@@ -9,6 +9,7 @@ import {
   convertMbToBytes,
   convertBytesToMb,
   normalizeContainerPorts,
+  isErrorPresent,
 } from '../containers';
 import { CONTAINER_STATUS, CONTAINER_TRANSPORT, CONTAINER_TYPE } from '@/src/types/deployments/containers';
 import { Container } from '@/src/models/deployments/containers';
@@ -216,4 +217,20 @@ describe('containers utils', () => {
       expect(normalizeContainerPorts([80, 8080])).toEqual([80, 8080]);
     });
   });
+
+  describe('isErrorPresent', () => {
+    const errors = new Map().set('name', false).set('version', true);
+
+    test('should return true when errors present', () => {
+      expect(isErrorPresent(errors, ['name'])).toBeTruthy();
+    });
+
+    test('should return false when errors present', () => {
+      expect(isErrorPresent(errors, ['displayName'])).toBeFalsy();
+    });
+
+    test('should return false when key exist but valid', () => {
+      expect(isErrorPresent(errors, ['version'])).toBeFalsy();
+    });
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@ interface Props extends ContainersButtonsWrapperProps {`
`14`	`14`	`tabs: TabModel[];`
`15`	`15`	`activeTab: EntityViewTab;`
`16`	`16`	`children?: ReactNode;`
`17`		`-`
`18`	`17`	`onChangeActiveTab: (tab: EntityViewTab) => void;`
`19`	`18`	`}`
`20`	`19`