fix: Remove Attachment Lg template when they are deleted in the Response Editor

Composer/packages/lib/code-editor/src/lg/modalityEditors/AttachmentArrayEditor.tsx

@@ -67,6 +67,7 @@ type AttachmentArrayEditorProps = {
   memoryVariables?: readonly string[];
   lgOption?: LGOption;
   onChange: (items: string[]) => void;
+  onRemoveTemplate: (templateId: string) => void;
   onTemplateChange: (templateId: string, body?: string) => void;
   telemetryClient: TelemetryClient;
   codeEditorSettings?: Partial<CodeEditorSettings>;
@@ -80,6 +81,7 @@ export const AttachmentArrayEditor = React.memo(
     memoryVariables,
     onChange,
     onTemplateChange,
+    onRemoveTemplate,
     telemetryClient,
     codeEditorSettings,
   }: AttachmentArrayEditorProps) => {
@@ -108,11 +110,12 @@ export const AttachmentArrayEditor = React.memo(
     );
 
     const onRemove = React.useCallback(
-      (index: number) => () => {
-        const newItems = items.filter((_, idx) => idx !== index);
+      (templateId: string) => () => {
+        const newItems = items.filter((id) => id !== templateId);
         onChange(newItems);
+        onRemoveTemplate(templateId);
       },
-      [items, onChange]
+      [items, onChange, onRemoveTemplate]
     );
 
     const onAddTemplateClick = React.useCallback(
@@ -239,11 +242,12 @@ export const AttachmentArrayEditor = React.memo(
             lgTemplates={lgTemplates}
             memoryVariables={memoryVariables}
             mode={idx === currentIndex ? 'edit' : 'view'}
+            removeTooltipTextContent={formatMessage('Remove attachment')}
             telemetryClient={telemetryClient}
             value={body}
             onFocus={onFocus(idx)}
             onLgChange={onLgCodeChange(name)}
-            onRemove={onRemove(idx)}
+            onRemove={onRemove(name)}
             onRenderDisplayText={onRenderDisplayText(idx)}
           />
         ))}

Composer/packages/lib/code-editor/src/lg/modalityEditors/AttachmentModalityEditor.tsx

@@ -33,6 +33,7 @@ const AttachmentModalityEditor = React.memo(
     onAttachmentLayoutChange,
     onUpdateResponseTemplate,
     onRemoveModality,
+    onRemoveTemplate,
     onTemplateChange,
     telemetryClient,
     editorSettings,
@@ -108,6 +109,7 @@ const AttachmentModalityEditor = React.memo(
           selectedKey="text"
           telemetryClient={telemetryClient}
           onChange={handleChange}
+          onRemoveTemplate={onRemoveTemplate}
           onTemplateChange={onTemplateChange}
         />
       </ModalityEditorContainer>

Composer/packages/lib/code-editor/src/lg/modalityEditors/StringArrayItem.tsx

@@ -99,6 +99,7 @@ type Props = {
   value: string;
   codeEditorSettings?: Partial<CodeEditorSettings>;
   telemetryClient: TelemetryClient;
+  removeTooltipTextContent?: string;
   onRenderDisplayText?: () => React.ReactNode;
   onBlur?: () => void;
   onJumpTo?: (direction: 'next' | 'previous') => void;
@@ -109,47 +110,62 @@ type Props = {
   onShowCallout?: (target: HTMLTextAreaElement) => void;
 };
 
-type TextViewItemProps = Pick<Props, 'value' | 'onRemove' | 'onFocus' | 'onRenderDisplayText' | 'codeEditorSettings'>;
+type TextViewItemProps = Pick<
+  Props,
+  'value' | 'onRemove' | 'onFocus' | 'onRenderDisplayText' | 'codeEditorSettings' | 'removeTooltipTextContent'
+>;
 
-const TextViewItem = React.memo(({ value, onRemove, onFocus, onRenderDisplayText }: TextViewItemProps) => {
-  const remove = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      e.stopPropagation();
-      e.preventDefault();
-      onRemove();
-    },
-    [onRemove]
-  );
+const TextViewItem = React.memo(
+  ({ removeTooltipTextContent, value, onRemove, onFocus, onRenderDisplayText }: TextViewItemProps) => {
+    const remove = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onRemove();
+      },
+      [onRemove]
+    );
 
-  const focus = React.useCallback(
-    (e: React.FocusEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      onFocus();
-    },
-    [onFocus]
-  );
+    const focus = React.useCallback(
+      (e: React.FocusEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        onFocus();
+      },
+      [onFocus]
+    );
 
-  const click = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      onFocus();
-    },
-    [onFocus]
-  );
+    const click = React.useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        onFocus();
+      },
+      [onFocus]
+    );
 
-  const RemoveIcon = React.useMemo(() => withTooltip({ content: formatMessage('Remove variation') }, IconButton), []);
+    const RemoveIcon = React.useMemo(
+      () => withTooltip({ content: removeTooltipTextContent ?? formatMessage('Remove variation') }, IconButton),
+      [removeTooltipTextContent]
+    );
 
-  return (
-    <TextViewItemRoot horizontal tokens={textViewRootTokens} verticalAlign="center">
-      <Stack grow styles={textViewContainerStyles} tabIndex={0} verticalAlign="center" onClick={click} onFocus={focus}>
-        <Text styles={displayTextStyles} variant="small">
-          {onRenderDisplayText?.() ?? value}
-        </Text>
-      </Stack>
-      <RemoveIcon className={removeIconClassName} iconProps={{ iconName: 'Trash' }} tabIndex={-1} onClick={remove} />
-    </TextViewItemRoot>
-  );
-});
+    return (
+      <TextViewItemRoot horizontal tokens={textViewRootTokens} verticalAlign="center">
+        <Stack
+          grow
+          styles={textViewContainerStyles}
+          tabIndex={0}
+          verticalAlign="center"
+          onClick={click}
+          onFocus={focus}
+        >
+          <Text styles={displayTextStyles} variant="small">
+            {onRenderDisplayText?.() ?? value}
+          </Text>
+        </Stack>
+        <RemoveIcon className={removeIconClassName} iconProps={{ iconName: 'Trash' }} tabIndex={-1} onClick={remove} />
+      </TextViewItemRoot>
+    );
+  }
+);
 
 type TextFieldItemProps = Omit<Props, 'onRemove' | 'mode' | 'onFocus' | 'telemetryClient'>;
 
@@ -226,6 +242,7 @@ export const StringArrayItem = (props: Props) => {
     value,
     telemetryClient,
     codeEditorSettings,
+    removeTooltipTextContent,
   } = props;
 
   const onEditorDidMount = React.useCallback(
@@ -259,7 +276,13 @@ export const StringArrayItem = (props: Props) => {
           </LgCodeEditorContainer>
         )
       ) : (
-        <TextViewItem value={value} onFocus={onFocus} onRemove={onRemove} onRenderDisplayText={onRenderDisplayText} />
+        <TextViewItem
+          removeTooltipTextContent={removeTooltipTextContent}
+          value={value}
+          onFocus={onFocus}
+          onRemove={onRemove}
+          onRenderDisplayText={onRenderDisplayText}
+        />
       )}
     </Root>
   );

Composer/packages/server/src/locales/en-US.json

@@ -1568,9 +1568,6 @@
   "getting_template_910a4116": {
     "message": "Getting template"
   },
-  "getting_yeoman_environment_4f50aae3": {
-    "message": "Getting Yeoman environment"
-  },
   "go_to_qna_all_up_view_page_d475333d": {
     "message": "Go to QnA all-up view page."
   },
@@ -1721,12 +1718,6 @@
   "install_the_update_and_restart_composer_fac30a61": {
     "message": "Install the update and restart Composer."
   },
-  "installing_yeoman_template_38cf1e48": {
-    "message": "Installing Yeoman template"
-  },
-  "instantiating_yeoman_template_5acf7e3f": {
-    "message": "Instantiating Yeoman template"
-  },
   "integer_7f378275": {
     "message": "integer"
   },
@@ -2711,6 +2702,9 @@
   "remove_all_text_responses_77592d1a": {
     "message": "Remove all text responses"
   },
+  "remove_attachment_81f30aa3": {
+    "message": "Remove attachment"
+  },
   "remove_f47dc62a": {
     "message": "Remove"
   },