fix: [Assets --> Applications] Changes to attachment types affect both current and new version (Issue #2128) (#2135)

Author: ya092

apps/ai-dial-admin/src/components/Common/AttachmentInput/AttachmentInput.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
+import { useState } from 'react';
 
 import { AttachmentsI18nKey } from '@/src/constants/i18n';
 
@@ -15,6 +16,26 @@ const placeHolder = 'Attachment Input';
 
 const onChange = vi.fn();
 
+// Wrapper component to simulate controlled behavior
+const ControlledAttachmentInput = (props: Partial<Props> & { initialValues?: string[] }) => {
+  const [values, setValues] = useState<string[] | undefined>(props.initialValues);
+
+  const handleChange = (newValues?: string[]) => {
+    setValues(newValues);
+    onChange(newValues);
+  };
+
+  return (
+    <AttachmentInput
+      {...props}
+      availableItems={options}
+      onChange={handleChange}
+      placeholder={placeHolder}
+      initialValues={values}
+    />
+  );
+};
+
 describe('Common components - AttachmentInput', () => {
   beforeAll(() => {
     const resizeObserverMock = vi.fn().mockImplementation(() => ({
@@ -123,5 +144,5 @@ describe('Common components - AttachmentInput', () => {
 });
 
 function renderComponent(extra: Partial<Props> = {}) {
-  return render(<AttachmentInput availableItems={options} onChange={onChange} placeholder={placeHolder} {...extra} />);
+  return render(<ControlledAttachmentInput {...extra} />);
 }

apps/ai-dial-admin/src/components/Common/AttachmentInput/AttachmentInput.tsx

@@ -10,7 +10,6 @@ import Field from '@/src/components/Common/Field/Field';
 import { ALL_ATTACHMENTS } from '@/src/constants/dial-base-entity';
 import { AttachmentsI18nKey } from '@/src/constants/i18n';
 import { CONTROL_WITH_BUTTON_WIDTH, STANDARD_CONTROL_WIDTH } from '@/src/constants/main-layout';
-import { useSaveValidationContext } from '@/src/context/SaveValidationContext';
 import { useI18n } from '@/src/locales/client';
 import Suggestions from './Suggestions';
 
@@ -32,44 +31,42 @@ export interface Props {
   fieldTitle?: string;
   elementId?: string;
   optional?: boolean;
-  onChange?: (values: string[]) => void;
+  onChange?: (values?: string[]) => void;
 }
 
 const ALL_ATTACHMENTS_VALUE = [{ label: ALL_ATTACHMENTS, value: ALL_ATTACHMENTS }];
 
 const AttachmentInput: FC<Props> = ({
   availableItems,
-  initialValues = [],
+  initialValues,
   fieldTitle,
   placeholder,
   elementId,
   optional,
   onChange,
 }) => {
   const t = useI18n();
-  const { resetCounter } = useSaveValidationContext();
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const initialSelected = useMemo(() => {
+  const selected = useMemo(() => {
+    if (!initialValues) return [];
     return initialValues
       .map((val) => availableItems.find((o) => o.value === val) || { label: val, value: val })
       .filter(Boolean) as AttachmentOption[];
   }, [availableItems, initialValues]);
 
-  const initialRadio = useMemo(() => {
-    return initialValues.length === 0
-      ? AttachmentType.NONE
-      : isEqual(initialSelected, ALL_ATTACHMENTS_VALUE)
-        ? AttachmentType.ALL
-        : AttachmentType.SPECIFIC;
-  }, [initialSelected, initialValues.length]);
+  const selectedRadio = useMemo(() => {
+    if (!initialValues) {
+      return AttachmentType.NONE;
+    } else {
+      return isEqual(selected, ALL_ATTACHMENTS_VALUE) ? AttachmentType.ALL : AttachmentType.SPECIFIC;
+    }
+  }, [initialValues, selected]);
 
-  const [selected, setSelected] = useState<AttachmentOption[]>(initialSelected);
   const [inputValue, setInputValue] = useState('');
   const [wraps, setWraps] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [highlight, setHighlight] = useState(0);
-  const [selectedRadio, setSelectedRadio] = useState<AttachmentType>(initialRadio);
 
   const filteredSuggestions = useMemo(() => {
     return availableItems
@@ -86,14 +83,6 @@ const AttachmentInput: FC<Props> = ({
     return selectedRadio === AttachmentType.SPECIFIC && showSuggestions && filteredSuggestions.length > 0;
   }, [filteredSuggestions.length, selectedRadio, showSuggestions]);
 
-  useEffect(() => {
-    if (resetCounter) {
-      setSelected(initialSelected);
-      setSelectedRadio(initialRadio);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resetCounter]);
-
   useEffect(() => {
     const observer = new ResizeObserver(() => {
       if (containerRef.current) {
@@ -110,15 +99,18 @@ const AttachmentInput: FC<Props> = ({
   }, []);
 
   const fireChange = useCallback(
-    (items: AttachmentOption[]) => {
-      onChange?.(items.map((i) => i.value));
+    (items?: AttachmentOption[]) => {
+      if (!items) {
+        onChange?.(void 0);
+        return;
+      }
+      onChange?.(items?.map((i) => i.value));
     },
     [onChange],
   );
 
   const setValues = useCallback(
-    (value: AttachmentOption[]) => {
-      setSelected(value);
+    (value?: AttachmentOption[]) => {
       fireChange(value);
       setInputValue('');
       setShowSuggestions(false);
@@ -155,9 +147,9 @@ const AttachmentInput: FC<Props> = ({
 
   const handleRadioChange = useCallback(
     (option: AttachmentType) => {
-      setSelectedRadio(option);
-
-      if (option === AttachmentType.NONE || option === AttachmentType.SPECIFIC) {
+      if (option === AttachmentType.NONE) {
+        setValues(void 0);
+      } else if (option === AttachmentType.SPECIFIC) {
         setValues([]);
       } else if (option === AttachmentType.ALL) {
         setValues(ALL_ATTACHMENTS_VALUE);

apps/ai-dial-admin/src/components/EntityMainProperties/EntityAttachments/EntityAttachments.tsx

@@ -36,8 +36,8 @@ const EntityAttachments: FC<Props> = ({ entity, onChangeEntity }) => {
   );
 
   const onChangeAttachmentTypes = useCallback(
-    (types: string[]) => {
-      if (types.length) {
+    (types?: string[]) => {
+      if (types) {
         onChangeEntity({ ...entity, inputAttachmentTypes: types });
       } else {
         onChangeEntity({