From 64ef04e9ce8b36ce23990c05121c1f607a40d6e6 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Fri, 8 Jan 2021 17:00:24 +0800 Subject: [PATCH 01/11] unify display name function in client, visual editor --- .../widgets/TriggerSummary/TriggerSummary.tsx | 14 +++++--- .../components/ProjectTree/ProjectTree.tsx | 3 +- .../client/src/pages/design/DesignPage.tsx | 34 ++++++++++++++----- .../content/SelectTriggers.tsx | 3 +- .../packages/client/src/utils/dialogUtil.ts | 14 +------- .../packages/lib/shared/src/dialogFactory.ts | 13 +++++++ 6 files changed, 50 insertions(+), 31 deletions(-) diff --git a/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx b/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx index e03c63b357..13ca7b1231 100644 --- a/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx +++ b/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx @@ -6,7 +6,6 @@ import { conceptLabels } from '@bfc/shared'; import { jsx } from '@emotion/core'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import get from 'lodash/get'; import { triggerContainerStyle, @@ -26,10 +25,15 @@ function getLabel(data: any): string { } function getName(data: any): string { - return ( - data.intent || - get(data, '$designer.name', conceptLabels()[data.$kind] ? conceptLabels()[data.$kind].title : data.$kind) - ); + if (data?.$designer?.name) { + return data?.$designer?.name; + } + + if (data?.intent) { + return `${data?.intent}`; + } + + return conceptLabels()[data.$kind]?.title ?? data.$kind; } export const TriggerSummary = ({ data, onClick = () => {} }): JSX.Element => { diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index 185fb55af7..bbdf054855 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -8,7 +8,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; import cloneDeep from 'lodash/cloneDeep'; import formatMessage from 'format-message'; -import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity, LanguageFileImport } from '@bfc/shared'; +import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity, LanguageFileImport, getFriendlyName } from '@bfc/shared'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; import { useRecoilValue } from 'recoil'; @@ -23,7 +23,6 @@ import { jsonSchemaFilesByProjectIdSelector, pageElementState, } from '../../recoilModel'; -import { getFriendlyName } from '../../utils/dialogUtil'; import { triggerNotSupported } from '../../utils/dialogValidator'; import { createBotSettingUrl, navigateTo } from '../../utils/navigation'; import { BotStatus } from '../../constants'; diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx index 2576821aae..058d4b6d63 100644 --- a/Composer/packages/client/src/pages/design/DesignPage.tsx +++ b/Composer/packages/client/src/pages/design/DesignPage.tsx @@ -8,7 +8,7 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru import formatMessage from 'format-message'; import { globalHistory, RouteComponentProps } from '@reach/router'; import get from 'lodash/get'; -import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic } from '@bfc/shared'; +import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic, getFriendlyName } from '@bfc/shared'; import { ActionButton } from 'office-ui-fabric-react/lib/Button'; import { JsonEditor } from '@bfc/code-editor'; import { EditorExtension, PluginConfig } from '@bfc/extension-client'; @@ -24,7 +24,6 @@ import { dialogStyle } from '../../components/Modal/dialogStyle'; import { ProjectTree, TreeLink } from '../../components/ProjectTree/ProjectTree'; import { Toolbar, IToolbarItem } from '../../components/Toolbar'; import { createDiagnosticsPageUrl, getFocusPath, navigateTo, createBotSettingUrl } from '../../utils/navigation'; -import { getFriendlyName } from '../../utils/dialogUtil'; import { useShell } from '../../shell'; import plugins, { mergePluginConfigs } from '../../plugins'; import { useElectronFeatures } from '../../hooks/useElectronFeatures'; @@ -308,6 +307,30 @@ const DesignPage: React.FC { + if (currentDialog.content) { + setBreadcrumbs((prev) => { + return prev.map((b) => { + const separatorIndex = b.key.indexOf('-'); + const type = b.key.substr(0, separatorIndex); + const name = b.key.substr(separatorIndex + 1); + switch (type) { + case 'dialog': + b.label = getFriendlyName(currentDialog.content); + break; + case 'trigger': + b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`)); + break; + case 'action': + b.label = getActionName(get(currentDialog.content, name)); + break; + } + return b; + }); + }); + } + }, [currentDialog?.content]); useEffect(() => { registerEditorAPI('Editing', { Undo: () => undo(), @@ -404,13 +427,6 @@ const DesignPage: React.FC get(x, 'disabled') !== true); const showEnableBtn = selectedActions.some((x) => get(x, 'disabled') === true); - if (selectedActions.length === 1 && selectedActions[0] != null) { - const action = selectedActions[0] as any; - const actionName = getActionName(action); - - setBreadcrumbs((prev) => [...prev.slice(0, 2), { key: 'action-' + actionName, label: actionName }]); - } - return { actionSelected, showDisableBtn, showEnableBtn }; }, [visualEditorSelection, currentDialog?.content]); diff --git a/Composer/packages/client/src/pages/design/exportSkillModal/content/SelectTriggers.tsx b/Composer/packages/client/src/pages/design/exportSkillModal/content/SelectTriggers.tsx index 56d8cd156d..f1a5127be7 100644 --- a/Composer/packages/client/src/pages/design/exportSkillModal/content/SelectTriggers.tsx +++ b/Composer/packages/client/src/pages/design/exportSkillModal/content/SelectTriggers.tsx @@ -4,13 +4,12 @@ /** @jsx jsx */ import { jsx } from '@emotion/core'; import React, { useMemo } from 'react'; -import { DialogInfo, ITrigger, SDKKinds } from '@bfc/shared'; +import { DialogInfo, ITrigger, SDKKinds, getFriendlyName } from '@bfc/shared'; import { Selection } from 'office-ui-fabric-react/lib/DetailsList'; import { useRecoilValue } from 'recoil'; import formatMessage from 'format-message'; import { ContentProps } from '../constants'; -import { getFriendlyName } from '../../../../utils/dialogUtil'; import { isSupportedTrigger } from '../generateSkillManifest'; import { dialogsSelectorFamily, schemasState } from '../../../../recoilModel'; diff --git a/Composer/packages/client/src/utils/dialogUtil.ts b/Composer/packages/client/src/utils/dialogUtil.ts index 64d430a4a1..ccf465ba53 100644 --- a/Composer/packages/client/src/utils/dialogUtil.ts +++ b/Composer/packages/client/src/utils/dialogUtil.ts @@ -3,6 +3,7 @@ import { conceptLabels as conceptLabelsFn, + getFriendlyName, DialogGroup, SDKKinds, dialogGroups, @@ -264,19 +265,6 @@ function getDialogsMap(dialogs: DialogInfo[]): DialogsMap { }, {}); } -export function getFriendlyName(data): string { - const conceptLabels = conceptLabelsFn(); - if (data?.$designer?.name) { - return data?.$designer?.name; - } - - if (data?.intent) { - return `${data?.intent}`; - } - - return conceptLabels[data.$kind]?.title ?? data.$kind; -} - const getLabel = (dialog: DialogInfo, dataPath: string) => { const data = get(dialog, dataPath); if (!data) return ''; diff --git a/Composer/packages/lib/shared/src/dialogFactory.ts b/Composer/packages/lib/shared/src/dialogFactory.ts index ccb45d1eee..b5b57ee6ac 100644 --- a/Composer/packages/lib/shared/src/dialogFactory.ts +++ b/Composer/packages/lib/shared/src/dialogFactory.ts @@ -10,6 +10,7 @@ import { copyAdaptiveAction } from './copyUtils'; import { deleteAdaptiveAction, deleteAdaptiveActionList } from './deleteUtils'; import { FieldProcessorAsync } from './copyUtils/ExternalApi'; import { generateDesignerId } from './generateUniqueId'; +import { conceptLabels } from './labelMap'; interface DesignerAttributes { name: string; @@ -24,6 +25,18 @@ const initialInputDialog = { defaultValueResponse: '', }; +export function getFriendlyName(data): string { + if (data?.$designer?.name) { + return data?.$designer?.name; + } + + if (data?.intent) { + return `${data?.intent}`; + } + + return conceptLabels()[data.$kind]?.title ?? data.$kind; +} + export function getNewDesigner(name: string, description: string) { return { $designer: { From d66571e4631cb8bc13245a986a902e6c4524654c Mon Sep 17 00:00:00 2001 From: zhixzhan <49866537+zhixzhan@users.noreply.github.com> Date: Fri, 8 Jan 2021 17:34:24 +0800 Subject: [PATCH 02/11] dialog displayName from $designer.name --- Composer/packages/lib/indexers/src/dialogIndexer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Composer/packages/lib/indexers/src/dialogIndexer.ts b/Composer/packages/lib/indexers/src/dialogIndexer.ts index 80a0deec54..2fc2b3f344 100644 --- a/Composer/packages/lib/indexers/src/dialogIndexer.ts +++ b/Composer/packages/lib/indexers/src/dialogIndexer.ts @@ -3,6 +3,7 @@ import has from 'lodash/has'; import uniq from 'lodash/uniq'; +import get from 'lodash/get'; import { extractLgTemplateRefs, SDKKinds, @@ -221,7 +222,7 @@ function index(files: FileInfo[], botName: string): DialogInfo[] { const isRoot = file.relativePath.includes('/') === false; // root dialog should be in root path const dialog: DialogInfo = { isRoot, - displayName: isRoot ? `${botName}` : id, + displayName: get(dialogJson, ['$designer', 'name'], isRoot ? `${botName}` : id), ...parse(id, dialogJson), }; dialogs.push(dialog); From 57a228d78d4f7f42a752ef9bd7087cc88d9b163d Mon Sep 17 00:00:00 2001 From: Long Alan Date: Fri, 8 Jan 2021 19:23:43 +0800 Subject: [PATCH 03/11] lint --- Composer/packages/lib/indexers/src/dialogIndexer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/lib/indexers/src/dialogIndexer.ts b/Composer/packages/lib/indexers/src/dialogIndexer.ts index 2fc2b3f344..323b29c8d3 100644 --- a/Composer/packages/lib/indexers/src/dialogIndexer.ts +++ b/Composer/packages/lib/indexers/src/dialogIndexer.ts @@ -222,7 +222,7 @@ function index(files: FileInfo[], botName: string): DialogInfo[] { const isRoot = file.relativePath.includes('/') === false; // root dialog should be in root path const dialog: DialogInfo = { isRoot, - displayName: get(dialogJson, ['$designer', 'name'], isRoot ? `${botName}` : id), + displayName: get(dialogJson, '$designer.name', isRoot ? `${botName}` : id), ...parse(id, dialogJson), }; dialogs.push(dialog); From 1e40c48495db55440ff9d5b03680de5ad204ba36 Mon Sep 17 00:00:00 2001 From: Long Jun Date: Mon, 11 Jan 2021 17:17:21 +0800 Subject: [PATCH 04/11] use getFriendlyName --- .../widgets/TriggerSummary/TriggerSummary.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx b/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx index 13ca7b1231..6ae3f09ae2 100644 --- a/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx +++ b/Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx @@ -3,7 +3,7 @@ /** @jsx jsx */ -import { conceptLabels } from '@bfc/shared'; +import { conceptLabels, getFriendlyName } from '@bfc/shared'; import { jsx } from '@emotion/core'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; @@ -24,20 +24,8 @@ function getLabel(data: any): string { return data.$kind; } -function getName(data: any): string { - if (data?.$designer?.name) { - return data?.$designer?.name; - } - - if (data?.intent) { - return `${data?.intent}`; - } - - return conceptLabels()[data.$kind]?.title ?? data.$kind; -} - export const TriggerSummary = ({ data, onClick = () => {} }): JSX.Element => { - const name = getName(data); + const name = getFriendlyName(data); const label = getLabel(data); return ( From c950af825b3c0c631404f81d5b522a2d282f2de5 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Tue, 12 Jan 2021 11:53:13 +0800 Subject: [PATCH 05/11] unify manager type in design page --- .../client/__tests__/utils/dialogUtil.test.js | 8 ------ .../client/src/pages/design/DesignPage.tsx | 25 ++++++++++++------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/Composer/packages/client/__tests__/utils/dialogUtil.test.js b/Composer/packages/client/__tests__/utils/dialogUtil.test.js index 718bcbe1e6..7b6f44df56 100644 --- a/Composer/packages/client/__tests__/utils/dialogUtil.test.js +++ b/Composer/packages/client/__tests__/utils/dialogUtil.test.js @@ -12,7 +12,6 @@ import { getTriggerTypes, getEventTypes, getActivityTypes, - getFriendlyName, getBreadcrumbLabel, getSelected, } from '../../src/utils/dialogUtil'; @@ -227,13 +226,6 @@ describe('getActivityTypes', () => { }); }); -describe('getFriendlyName', () => { - it('return friendly name', () => { - const name = getFriendlyName(dialogs[0].content); - expect(name).toBe('kind1'); - }); -}); - describe('getBreadcrumbLabel', () => { it('return breadcrumb label', () => { const name = getBreadcrumbLabel(dialogs, 'id1', null, null); diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx index e5d4722979..742ec15ee3 100644 --- a/Composer/packages/client/src/pages/design/DesignPage.tsx +++ b/Composer/packages/client/src/pages/design/DesignPage.tsx @@ -80,6 +80,13 @@ type BreadcrumbItem = { onClick?: () => void; }; +// field types +const Types = { + Dialog: 'dialog', + Trigger: 'trigger', + Action: 'action', +}; + const CreateSkillModal = React.lazy(() => import('../../components/CreateSkillModal')); const RepairSkillModal = React.lazy(() => import('../../components/RepairSkillModal')); const CreateDialogModal = React.lazy(() => import('./createDialogModal')); @@ -250,7 +257,7 @@ const DesignPage: React.FC = []; breadcrumbArray.push({ - key: 'dialog-' + props.dialogId, + key: `${Types.Dialog}-${props.dialogId}`, label: dialogMap[props.dialogId]?.$designer?.name ?? dialogMap[props.dialogId]?.$designer?.$designer?.name, link: { projectId: props.projectId, @@ -260,7 +267,7 @@ const DesignPage: React.FC { return prev.map((b) => { - const separatorIndex = b.key.indexOf('-'); - const type = b.key.substr(0, separatorIndex); - const name = b.key.substr(separatorIndex + 1); + // eslint-disable-next-line security/detect-unsafe-regex + const regexp = new RegExp(/(?[a-z]+)-(?.*)/); + const { type, name } = b.key.match(regexp)?.groups || {}; switch (type) { - case 'dialog': + case Types.Dialog: b.label = getFriendlyName(currentDialog.content); break; - case 'trigger': + case Types.Trigger: b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`)); break; - case 'action': + case Types.Action: b.label = getActionName(get(currentDialog.content, name)); break; } From c82d7e119c4b95a70c3ae2095c09eef543934b06 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Thu, 14 Jan 2021 15:24:54 +0800 Subject: [PATCH 06/11] refactor type enums --- .../packages/client/src/pages/design/DesignPage.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx index 5480d5e06f..c08f3bb349 100644 --- a/Composer/packages/client/src/pages/design/DesignPage.tsx +++ b/Composer/packages/client/src/pages/design/DesignPage.tsx @@ -82,9 +82,9 @@ type BreadcrumbItem = { // field types const Types = { - Dialog: 'dialog', - Trigger: 'trigger', - Action: 'action', + Dialog: 'D', + Trigger: 'T', + Action: 'A', }; const CreateSkillModal = React.lazy(() => import('../../components/CreateSkillModal')); @@ -320,9 +320,9 @@ const DesignPage: React.FC { return prev.map((b) => { - // eslint-disable-next-line security/detect-unsafe-regex - const regexp = new RegExp(/(?[a-z]+)-(?.*)/); - const { type, name } = b.key.match(regexp)?.groups || {}; + const type = b.key.charAt(0); + const name = b.key.substr(2); + switch (type) { case Types.Dialog: b.label = getFriendlyName(currentDialog.content); From 5c4c3bac55467d0099360bf4e0b3a2cca6fac048 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Fri, 15 Jan 2021 16:17:39 +0800 Subject: [PATCH 07/11] conflict --- .../client/src/pages/design/DesignPage.tsx | 33 +------------------ .../src/pages/design/VisualEditorHeader.tsx | 13 +++----- 2 files changed, 5 insertions(+), 41 deletions(-) diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx index 3df25b18c8..ad89e0cd5b 100644 --- a/Composer/packages/client/src/pages/design/DesignPage.tsx +++ b/Composer/packages/client/src/pages/design/DesignPage.tsx @@ -7,7 +7,7 @@ import React, { Suspense, useEffect, useMemo, useState, useCallback } from 'reac import formatMessage from 'format-message'; import { globalHistory, RouteComponentProps } from '@reach/router'; import get from 'lodash/get'; -import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic, getFriendlyName } from '@bfc/shared'; +import { DialogInfo, PromptTab, getEditorAPI, registerEditorAPI, Diagnostic } from '@bfc/shared'; import { JsonEditor } from '@bfc/code-editor'; import { EditorExtension, PluginConfig } from '@bfc/extension-client'; import { useRecoilValue, useRecoilState } from 'recoil'; @@ -65,13 +65,6 @@ import { PropertyEditor } from './PropertyEditor'; import { ManifestEditor } from './ManifestEditor'; import VisualEditorHeader from './VisualEditorHeader'; -// field types -const Types = { - Dialog: 'D', - Trigger: 'T', - Action: 'A', -}; - const CreateSkillModal = React.lazy(() => import('../../components/CreateSkillModal')); const RepairSkillModal = React.lazy(() => import('../../components/RepairSkillModal')); const CreateDialogModal = React.lazy(() => import('./createDialogModal')); @@ -261,30 +254,6 @@ const DesignPage: React.FC { - if (currentDialog.content) { - setBreadcrumbs((prev) => { - return prev.map((b) => { - const type = b.key.charAt(0); - const name = b.key.substr(2); - - switch (type) { - case Types.Dialog: - b.label = getFriendlyName(currentDialog.content); - break; - case Types.Trigger: - b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`)); - break; - case Types.Action: - b.label = getActionName(get(currentDialog.content, name)); - break; - } - return b; - }); - }); - } - }, [currentDialog?.content]); useEffect(() => { registerEditorAPI('Editing', { Undo: () => undo(), diff --git a/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx b/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx index ca779e2105..6cb0ece688 100644 --- a/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx +++ b/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx @@ -3,23 +3,18 @@ /** @jsx jsx */ import { jsx } from '@emotion/core'; -import React, { useEffect, useMemo } from 'react'; +import React, { useEffect } from 'react'; import formatMessage from 'format-message'; import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; import { ActionButton } from 'office-ui-fabric-react/lib/Button'; import { useRecoilValue } from 'recoil'; import { PluginConfig } from '@bfc/extension-client'; -import { DialogInfo } from '@bfc/shared'; +import { DialogInfo, getFriendlyName } from '@bfc/shared'; import get from 'lodash/get'; import { TreeLink } from '../../components/ProjectTree/ProjectTree'; -import { - designPageLocationState, - dialogsSelectorFamily, - dispatcherState, - visualEditorSelectionState, -} from '../../recoilModel'; -import { getDialogData, getFriendlyName } from '../../utils/dialogUtil'; +import { designPageLocationState, dialogsSelectorFamily, dispatcherState } from '../../recoilModel'; +import { getDialogData } from '../../utils/dialogUtil'; import { decodeDesignerPathToArrayPath } from '../../utils/convertUtils/designerPathEncoder'; import { getFocusPath } from '../../utils/navigation'; From 82955c558186727fbdeec39ee0cbb8975adc8398 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Wed, 20 Jan 2021 11:43:56 +0800 Subject: [PATCH 08/11] specs failed --- Composer/cypress/integration/RemoveDialog.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/cypress/integration/RemoveDialog.spec.ts b/Composer/cypress/integration/RemoveDialog.spec.ts index 6e419dc6aa..fdd32c2636 100644 --- a/Composer/cypress/integration/RemoveDialog.spec.ts +++ b/Composer/cypress/integration/RemoveDialog.spec.ts @@ -9,7 +9,7 @@ context('RemoveDialog', () => { it('can remove dialog', () => { cy.findByTestId('ProjectTree').within(() => { - cy.findByTestId('$Root_additem').within(() => { + cy.findByTestId('$Root_Additem').within(() => { cy.findByTestId('dialogMoreButton').first().invoke('attr', 'style', 'visibility: visible').click(); }); }); From 3e026a15743b3dcad6336ba1b6b30a0c2b272f1e Mon Sep 17 00:00:00 2001 From: Long Alan Date: Wed, 20 Jan 2021 15:35:54 +0800 Subject: [PATCH 09/11] spcs --- Composer/cypress/integration/RemoveDialog.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/cypress/integration/RemoveDialog.spec.ts b/Composer/cypress/integration/RemoveDialog.spec.ts index fdd32c2636..fb212a2cca 100644 --- a/Composer/cypress/integration/RemoveDialog.spec.ts +++ b/Composer/cypress/integration/RemoveDialog.spec.ts @@ -9,7 +9,7 @@ context('RemoveDialog', () => { it('can remove dialog', () => { cy.findByTestId('ProjectTree').within(() => { - cy.findByTestId('$Root_Additem').within(() => { + cy.findByTestId('$Root_AddItem').within(() => { cy.findByTestId('dialogMoreButton').first().invoke('attr', 'style', 'visibility: visible').click(); }); }); From 9507464795b36e62c4dbdc8e7df26d21857cb5e6 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Thu, 21 Jan 2021 16:35:06 +0800 Subject: [PATCH 10/11] refactor code --- .../src/pages/design/VisualEditorHeader.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx b/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx index 6cb0ece688..959505d764 100644 --- a/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx +++ b/Composer/packages/client/src/pages/design/VisualEditorHeader.tsx @@ -3,7 +3,7 @@ /** @jsx jsx */ import { jsx } from '@emotion/core'; -import React, { useEffect } from 'react'; +import React, { useMemo } from 'react'; import formatMessage from 'format-message'; import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb'; import { ActionButton } from 'office-ui-fabric-react/lib/Button'; @@ -36,7 +36,7 @@ type VisualEditorHeaderProps = { }; // field types -const Types = { +const BreadcrumbKeyPrefix = { Dialog: 'D', Trigger: 'T', Action: 'A', @@ -86,10 +86,10 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { const focusPath = getFocusPath(selected, focused); const trigger = triggerIndex != null && dialogData.triggers[triggerIndex]; - let breadcrumbArray: Array = []; + const array: Array = []; - breadcrumbArray.push({ - key: `${Types.Dialog}-${dialogId}`, + array.push({ + key: `${BreadcrumbKeyPrefix.Dialog}-${dialogId}`, label: dialogMap[dialogId]?.$designer?.name ?? dialogMap[dialogId]?.$designer?.$designer?.name, link: { projectId: projectId, @@ -99,8 +99,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { }); if (triggerIndex != null && trigger != null) { - breadcrumbArray.push({ - key: `${Types.Trigger}-${triggerIndex}`, + array.push({ + key: `${BreadcrumbKeyPrefix.Trigger}-${triggerIndex}`, label: trigger.$designer?.name || getFriendlyName(trigger), link: { projectId: projectId, @@ -116,8 +116,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { if (encodedFocused) { // we've linked to an action, so put that in too - breadcrumbArray.push({ - key: `${Types.Action}-${focusPath}`, + array.push({ + key: `${BreadcrumbKeyPrefix.Action}-${focusPath}`, label: getActionName(possibleAction, pluginConfig), }); } @@ -125,27 +125,28 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { const currentDialog = (dialogs.find(({ id }) => id === dialogId) ?? dialogs[0]) as DialogInfo; // get newest label for breadcrumbs - useEffect(() => { + const breadcrumbArray = useMemo(() => { if (currentDialog.content) { - breadcrumbArray = breadcrumbArray.map((b) => { - const type = b.key.charAt(0); + array.map((b) => { + const prefix = b.key.charAt(0); const name = b.key.substr(2); - switch (type) { - case Types.Dialog: + switch (prefix) { + case BreadcrumbKeyPrefix.Dialog: b.label = getFriendlyName(currentDialog.content); break; - case Types.Trigger: + case BreadcrumbKeyPrefix.Trigger: b.label = getFriendlyName(get(currentDialog.content, `triggers[${name}]`)); break; - case Types.Action: + case BreadcrumbKeyPrefix.Action: b.label = getActionName(get(currentDialog.content, name)); break; } return b; }); } - }, [currentDialog?.content]); + return array; + }, [currentDialog?.content, array]); return breadcrumbArray; }; From b7b2ebca87a90da635228459cf8e8a7f0141ff8a Mon Sep 17 00:00:00 2001 From: Long Jun Date: Mon, 1 Feb 2021 15:32:08 +0800 Subject: [PATCH 11/11] refactor --- .../src/pages/design/VisualPanelHeader.tsx | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx b/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx index aef2a2980a..6fed7931d1 100644 --- a/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx +++ b/Composer/packages/client/src/pages/design/VisualPanelHeader.tsx @@ -42,6 +42,14 @@ const BreadcrumbKeyPrefix = { Action: 'A', }; +const buildKey = (prefix: string, name: string | number): string => { + return `${prefix}-${name}`; +}; + +const parseKey = (key: string): { prefix: string; name: string } => { + return { prefix: key.charAt(0), name: key.substr(2) }; +}; + const parseTriggerId = (triggerId: string | undefined): number | undefined => { if (triggerId == null) return undefined; const indexString = triggerId.match(/\d+/)?.[0]; @@ -86,10 +94,10 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { const focusPath = getFocusPath(selected, focused); const trigger = triggerIndex != null && dialogData.triggers[triggerIndex]; - const array: Array = []; + const initialBreadcrumbArray: Array = []; - array.push({ - key: `${BreadcrumbKeyPrefix.Dialog}-${dialogId}`, + initialBreadcrumbArray.push({ + key: buildKey(BreadcrumbKeyPrefix.Dialog, dialogId), label: dialogMap[dialogId]?.$designer?.name ?? dialogMap[dialogId]?.$designer?.$designer?.name, link: { projectId: projectId, @@ -99,8 +107,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { }); if (triggerIndex != null && trigger != null) { - array.push({ - key: `${BreadcrumbKeyPrefix.Trigger}-${triggerIndex}`, + initialBreadcrumbArray.push({ + key: buildKey(BreadcrumbKeyPrefix.Trigger, triggerIndex), label: trigger.$designer?.name || getFriendlyName(trigger), link: { projectId: projectId, @@ -116,8 +124,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { if (encodedFocused) { // we've linked to an action, so put that in too - array.push({ - key: `${BreadcrumbKeyPrefix.Action}-${focusPath}`, + initialBreadcrumbArray.push({ + key: buildKey(BreadcrumbKeyPrefix.Action, focusPath), label: getActionName(possibleAction, pluginConfig), }); } @@ -127,9 +135,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { // get newest label for breadcrumbs const breadcrumbArray = useMemo(() => { if (currentDialog.content) { - array.map((b) => { - const prefix = b.key.charAt(0); - const name = b.key.substr(2); + initialBreadcrumbArray.map((b) => { + const { prefix, name } = parseKey(b.key); switch (prefix) { case BreadcrumbKeyPrefix.Dialog: @@ -145,8 +152,8 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => { return b; }); } - return array; - }, [currentDialog?.content, array]); + return initialBreadcrumbArray; + }, [currentDialog?.content, initialBreadcrumbArray]); return breadcrumbArray; };