feat: add filter to begin dialog selection

Composer/packages/client/src/images/systemTopicIcon.svg → Composer/packages/client/src/components/SystemTopicIcon.tsx

@@ -1,7 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 
-<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 12H9V11H15V12Z" fill="#323130"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M15 14H9V13H15V14Z" fill="#323130"/>
-  <path d="M4.4558 14.4872L5.92534 15.0235V16L3.43418 15.0235L3.97642 12.6463C3.90832 12.5823 3.84021 12.5183 3.7721 12.4542C3.70923 12.3902 3.64637 12.3208 3.5835 12.2461L1.24951 12.7904L0 9.72486L2.03536 8.43622C2.03012 8.38819 2.0275 8.34284 2.0275 8.30015C2.0275 8.25213 2.0275 8.2041 2.0275 8.15608C2.0275 8.10272 2.0275 8.05203 2.0275 8.004C2.03274 7.95598 2.03536 7.90795 2.03536 7.85993L0 6.57129L1.24951 3.49775L3.5835 4.05002C3.64637 3.98066 3.70923 3.91396 3.7721 3.84993C3.83497 3.78056 3.90308 3.71386 3.97642 3.64983L3.44204 1.27264L6.45187 0L7.71709 2.07304C7.76424 2.07304 7.8114 2.07304 7.85855 2.07304C7.9057 2.0677 7.95285 2.06503 8 2.06503C8.04715 2.06503 8.0943 2.0677 8.14145 2.07304C8.18861 2.07304 8.23576 2.07304 8.28291 2.07304L9.54813 0L12.5658 1.27264L12.0236 3.64983C12.0917 3.71386 12.1572 3.77789 12.22 3.84192C12.2881 3.90595 12.3536 3.97532 12.4165 4.05002L14.7505 3.50575L16 6.57129L13.9646 7.85993C13.9699 7.93463 13.9646 7.9253 13.9646 8C13.9646 7.9253 13.9646 8.06937 13.9646 8C13.9699 7.85593 13.9646 8.14941 13.9646 8C13.9646 7.85593 13.9646 8.14407 13.9646 8H13.0766C13.0766 7.87194 13.0871 7.88661 13.0766 7.76388C13.0661 7.63582 13.0557 7.51042 13.0452 7.38769L14.8998 6.21111L14.224 4.53827L12.0943 5.05053C11.9214 4.84242 11.7511 4.65566 11.5835 4.49025C11.4211 4.32483 11.2377 4.15408 11.0334 3.97799L11.5442 1.8089L9.90177 1.12056L8.74656 3.01751C8.62082 3.0015 8.49509 2.98816 8.36935 2.97749C8.24885 2.96682 8.12574 2.96148 8 2.96148C7.8795 2.96148 7.75639 2.96682 7.63065 2.97749C7.50491 2.98282 7.37918 2.99083 7.25344 3.0015L6.09823 1.12056L4.4558 1.8089L4.9666 3.97799C4.75704 4.14874 4.57105 4.31949 4.40864 4.49025C4.25147 4.661 4.08382 4.84776 3.9057 5.05053L1.77603 4.53827L1.1002 6.21111L2.96267 7.38769C2.94695 7.51576 2.93386 7.64382 2.92338 7.77189C2.9129 7.89995 2.90766 8.02801 2.90766 8.15608C2.90766 8.28414 2.9129 8.41221 2.92338 8.54027C2.93386 8.663 2.94434 8.78573 2.95481 8.90845L1.1002 10.085L1.77603 11.7579L3.9057 11.2376C4.07335 11.4457 4.241 11.6352 4.40864 11.8059C4.58153 11.9767 4.76752 12.1474 4.9666 12.3182L4.4558 14.4872ZM6.15324 9.10855L5.92534 10.0859C5.92534 10.0859 5.5036 9.82091 5.32024 9.42071C5.13687 9.02051 5.04519 8.5963 5.04519 8.14807C5.04519 7.73187 5.12115 7.34234 5.27308 6.97949C5.43026 6.61131 5.64244 6.29115 5.90963 6.01901C6.17682 5.74687 6.48854 5.53343 6.84479 5.37869C7.20629 5.21861 7.59136 5.13857 8 5.13857C8.40864 5.13857 8.79109 5.21861 9.14735 5.37869C9.50884 5.53343 9.82318 5.74687 10.0904 6.01901C10.3576 6.29115 10.5671 6.61131 10.7191 6.97949C10.8762 7.34234 11 7.58379 11 8H10C10 7.70652 10.0196 7.57979 9.90963 7.32366C9.80485 7.06753 9.65815 6.84342 9.46955 6.65133C9.28094 6.45923 9.0609 6.30982 8.80943 6.2031C8.55796 6.09105 8.28815 6.03502 8 6.03502C7.71185 6.03502 7.44204 6.09105 7.19057 6.2031C6.9391 6.30982 6.71906 6.45923 6.53045 6.65133C6.34185 6.84342 6.19253 7.06753 6.08251 7.32366C5.97773 7.57979 5.92534 7.85459 5.92534 8.14807C5.92534 8.48958 6.00131 8.80974 6.15324 9.10855Z" fill="#323130"/>
-  <path d="M6.95312 9H16.9531V16H12.6641L8.95312 19.7109V16H6.95312V9ZM15.9531 15V10H7.95312V15H9.95312V17.2891L12.2422 15H15.9531Z" fill="#323130"/>
-</svg>
+import React from 'react';
+
+export const SystemTopicIcon: React.FC = () => {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      style={{ verticalAlign: 'middle' }}
+      viewBox="0 0 17 20"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path clipRule="evenodd" d="M15 12H9V11H15V12Z" fill="currentColor" fillRule="evenodd" />
+      <path clipRule="evenodd" d="M15 14H9V13H15V14Z" fill="currentColor" fillRule="evenodd" />
+      <path
+        d="M4.4558 14.4872L5.92534 15.0235V16L3.43418 15.0235L3.97642 12.6463C3.90832 12.5823 3.84021 12.5183 3.7721 12.4542C3.70923 12.3902 3.64637 12.3208 3.5835 12.2461L1.24951 12.7904L0 9.72486L2.03536 8.43622C2.03012 8.38819 2.0275 8.34284 2.0275 8.30015C2.0275 8.25213 2.0275 8.2041 2.0275 8.15608C2.0275 8.10272 2.0275 8.05203 2.0275 8.004C2.03274 7.95598 2.03536 7.90795 2.03536 7.85993L0 6.57129L1.24951 3.49775L3.5835 4.05002C3.64637 3.98066 3.70923 3.91396 3.7721 3.84993C3.83497 3.78056 3.90308 3.71386 3.97642 3.64983L3.44204 1.27264L6.45187 0L7.71709 2.07304C7.76424 2.07304 7.8114 2.07304 7.85855 2.07304C7.9057 2.0677 7.95285 2.06503 8 2.06503C8.04715 2.06503 8.0943 2.0677 8.14145 2.07304C8.18861 2.07304 8.23576 2.07304 8.28291 2.07304L9.54813 0L12.5658 1.27264L12.0236 3.64983C12.0917 3.71386 12.1572 3.77789 12.22 3.84192C12.2881 3.90595 12.3536 3.97532 12.4165 4.05002L14.7505 3.50575L16 6.57129L13.9646 7.85993C13.9699 7.93463 13.9646 7.9253 13.9646 8C13.9646 7.9253 13.9646 8.06937 13.9646 8C13.9699 7.85593 13.9646 8.14941 13.9646 8C13.9646 7.85593 13.9646 8.14407 13.9646 8H13.0766C13.0766 7.87194 13.0871 7.88661 13.0766 7.76388C13.0661 7.63582 13.0557 7.51042 13.0452 7.38769L14.8998 6.21111L14.224 4.53827L12.0943 5.05053C11.9214 4.84242 11.7511 4.65566 11.5835 4.49025C11.4211 4.32483 11.2377 4.15408 11.0334 3.97799L11.5442 1.8089L9.90177 1.12056L8.74656 3.01751C8.62082 3.0015 8.49509 2.98816 8.36935 2.97749C8.24885 2.96682 8.12574 2.96148 8 2.96148C7.8795 2.96148 7.75639 2.96682 7.63065 2.97749C7.50491 2.98282 7.37918 2.99083 7.25344 3.0015L6.09823 1.12056L4.4558 1.8089L4.9666 3.97799C4.75704 4.14874 4.57105 4.31949 4.40864 4.49025C4.25147 4.661 4.08382 4.84776 3.9057 5.05053L1.77603 4.53827L1.1002 6.21111L2.96267 7.38769C2.94695 7.51576 2.93386 7.64382 2.92338 7.77189C2.9129 7.89995 2.90766 8.02801 2.90766 8.15608C2.90766 8.28414 2.9129 8.41221 2.92338 8.54027C2.93386 8.663 2.94434 8.78573 2.95481 8.90845L1.1002 10.085L1.77603 11.7579L3.9057 11.2376C4.07335 11.4457 4.241 11.6352 4.40864 11.8059C4.58153 11.9767 4.76752 12.1474 4.9666 12.3182L4.4558 14.4872ZM6.15324 9.10855L5.92534 10.0859C5.92534 10.0859 5.5036 9.82091 5.32024 9.42071C5.13687 9.02051 5.04519 8.5963 5.04519 8.14807C5.04519 7.73187 5.12115 7.34234 5.27308 6.97949C5.43026 6.61131 5.64244 6.29115 5.90963 6.01901C6.17682 5.74687 6.48854 5.53343 6.84479 5.37869C7.20629 5.21861 7.59136 5.13857 8 5.13857C8.40864 5.13857 8.79109 5.21861 9.14735 5.37869C9.50884 5.53343 9.82318 5.74687 10.0904 6.01901C10.3576 6.29115 10.5671 6.61131 10.7191 6.97949C10.8762 7.34234 11 7.58379 11 8H10C10 7.70652 10.0196 7.57979 9.90963 7.32366C9.80485 7.06753 9.65815 6.84342 9.46955 6.65133C9.28094 6.45923 9.0609 6.30982 8.80943 6.2031C8.55796 6.09105 8.28815 6.03502 8 6.03502C7.71185 6.03502 7.44204 6.09105 7.19057 6.2031C6.9391 6.30982 6.71906 6.45923 6.53045 6.65133C6.34185 6.84342 6.19253 7.06753 6.08251 7.32366C5.97773 7.57979 5.92534 7.85459 5.92534 8.14807C5.92534 8.48958 6.00131 8.80974 6.15324 9.10855Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.95312 9H16.9531V16H12.6641L8.95312 19.7109V16H6.95312V9ZM15.9531 15V10H7.95312V15H9.95312V17.2891L12.2422 15H15.9531Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

Composer/packages/client/src/setupIcons.tsx

@@ -5,14 +5,14 @@ import React from 'react';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { registerIcons } from 'office-ui-fabric-react/lib/Styling';
 
-import systemTopicIcon from './images/systemTopicIcon.svg';
+import { SystemTopicIcon } from './components/SystemTopicIcon';
 
 export function setupIcons() {
   initializeIcons(undefined, { disableWarnings: true });
 
   registerIcons({
     icons: {
-      SystemTopic: <img alt="" aria-hidden="true" src={systemTopicIcon} style={{ width: '100%' }} />,
+      SystemTopic: <SystemTopicIcon />,
     },
   });
 }

Composer/packages/ui-plugins/select-dialog/src/SelectDialog.tsx

@@ -1,59 +1,34 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useState } from 'react';
-import { IComboBoxOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/ComboBox';
+import React, { useCallback, useState, useMemo } from 'react';
+import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { FieldProps, useShellApi } from '@bfc/extension-client';
 import formatMessage from 'format-message';
 import { IntellisenseTextField, WithTypeIcons } from '@bfc/adaptive-form';
 
-import ComboBoxField, { ADD_DIALOG } from './ComboBoxField';
+import ComboBoxField, { ADD_DIALOG } from './SelectDialogMenu';
 
 const IntellisenseTextFieldWithIcon = WithTypeIcons(IntellisenseTextField);
 
 export const SelectDialog: React.FC<FieldProps> = (props) => {
   const { value = '', onBlur, onChange } = props;
 
-  const {
-    currentDialog: { id: currentDialogId },
-    dialogs,
-    topics,
-    shellApi,
-  } = useShellApi();
+  const { currentDialog, dialogs, topics, shellApi } = useShellApi();
   const { createDialog, navTo } = shellApi;
   const [comboboxTitle, setComboboxTitle] = useState<string | null>(null);
-  const [showIntellisenseField, setShowIntellisenseField] = useState(!dialogs.find(({ id }) => id !== value));
+  const isDialogSelected = useMemo(() => {
+    return Boolean(dialogs.find(({ id }) => id === value) || topics.find(({ content }) => content?.id === value));
+  }, [value, dialogs, topics]);
+  // if there is no dialog selected but there is a value, show the intellisense field
+  const [showIntellisenseField, setShowIntellisenseField] = useState(!isDialogSelected && value.length > 0);
+  const dialogsWithoutCurrent = useMemo(() => {
+    return dialogs.filter((d) => d.id !== currentDialog?.id);
+  }, [dialogs.map((d) => d.id)]);
 
-  const options: IComboBoxOption[] = dialogs
-    .concat(topics)
-    .filter(({ id }) => id !== currentDialogId)
-    .map((d) => ({
-      key: d.isTopic ? d.content?.id : d.id,
-      text: d.displayName,
-      isSelected: value === d.displayName,
-      data: d,
-    }));
-
-  options.push(
-    {
-      key: 'separator',
-      itemType: SelectableOptionMenuItemType.Divider,
-      text: '',
-    },
-    {
-      key: 'expression',
-      text: formatMessage('Write an expression'),
-    },
-    { key: ADD_DIALOG, text: formatMessage('Create a new dialog') }
-  );
-
-  if (comboboxTitle) {
-    options.push({ key: 'customTitle', text: comboboxTitle });
-  }
-
-  const handleChange = (_, option) => {
-    if (option) {
-      if (option.key === ADD_DIALOG) {
+  const handleChange = (item?: IContextualMenuItem) => {
+    if (item) {
+      if (item.key === ADD_DIALOG) {
         setComboboxTitle(formatMessage('Create a new dialog'));
         createDialog([]).then((newDialog) => {
           if (newDialog) {
@@ -64,11 +39,11 @@ export const SelectDialog: React.FC<FieldProps> = (props) => {
           }
         });
       } else {
-        if (option.key === 'expression') {
+        if (item.key === 'expression') {
           setShowIntellisenseField(true);
           onChange('');
         } else {
-          onChange(option.key);
+          onChange(item.key);
         }
       }
     } else {
@@ -89,6 +64,12 @@ export const SelectDialog: React.FC<FieldProps> = (props) => {
   return showIntellisenseField ? (
     <IntellisenseTextFieldWithIcon {...props} onBlur={blur} />
   ) : (
-    <ComboBoxField {...props} comboboxTitle={comboboxTitle} options={options} onChange={handleChange} />
+    <ComboBoxField
+      {...props}
+      comboboxTitle={comboboxTitle}
+      dialogs={dialogsWithoutCurrent}
+      topics={topics}
+      onChange={handleChange}
+    />
   );
 };