-
Notifications
You must be signed in to change notification settings - Fork 375
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Breaking change upgrade UX from 1.4 to 2.0 (#7388)
* Added mechanism to show custom UX on breaking updates * Minor updates / l10n * Fixed some minor bugs and added l10n * Cleaned up types * Fixed "Not now" behavior * Reenabled nightly feed to composer Signed-off-by: Srinaath Ravichandran <[email protected]> * Revert "Reenabled nightly feed to composer" This reverts commit f26216fb76065b760fbfecffb0e1f0f8036d3f78. Signed-off-by: Srinaath Ravichandran <[email protected]> * Updated changelog and set correct feed URL Signed-off-by: Srinaath Ravichandran <[email protected]> * revert updates Signed-off-by: Srinaath Ravichandran <[email protected]> Revert import order Signed-off-by: Srinaath Ravichandran <[email protected]> Removed logs Signed-off-by: Srinaath Ravichandran <[email protected]> * Handle unit test upgrades Signed-off-by: Srinaath Ravichandran <[email protected]> Co-authored-by: Tony <[email protected]> Co-authored-by: Srinaath Ravichandran <[email protected]>
- Loading branch information
3 people
authored
May 4, 2021
1 parent
113e420
commit e2e35e6
Showing
18 changed files
with
367 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
Composer/packages/client/src/components/AppUpdater/breakingUpdates/breakingUpdatesMap.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| import React from 'react'; | ||
| import { BreakingUpdateId } from '@botframework-composer/types'; | ||
|
|
||
| import { BreakingUpdateProps } from './types'; | ||
| import { Version1To2Content } from './version1To2'; | ||
|
|
||
| /** | ||
| * A map of breaking update identifiers to the React components responsible | ||
| * for showing each breaking update's special UX before proceeding to the | ||
| * standard update flow. | ||
| * | ||
| * Ex. 'Version2.5.xTo3.x.x': DialogWithDisclaimerAndDocsAboutNewChanges | ||
| */ | ||
|
|
||
| export const breakingUpdatesMap: Record<BreakingUpdateId, React.FC<BreakingUpdateProps>> = { | ||
| 'Version1.x.xTo2.x.x': Version1To2Content, | ||
| }; |
11 changes: 11 additions & 0 deletions
11
Composer/packages/client/src/components/AppUpdater/breakingUpdates/types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| export type BreakingUpdateProps = { | ||
| explicitCheck: boolean; | ||
| /** Called when the user dismisses the breaking changes UX; stops the update flow completely. */ | ||
| onCancel: () => void; | ||
| /** Called when the breaking changes UX is ready to continue into the normal update flow. */ | ||
| onContinue: () => void; | ||
| version?: string; | ||
| }; |
142 changes: 142 additions & 0 deletions
142
Composer/packages/client/src/components/AppUpdater/breakingUpdates/version1To2.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| /** @jsx jsx */ | ||
| import { jsx, css } from '@emotion/core'; | ||
| import React, { useCallback, useState } from 'react'; | ||
| import { DefaultButton, PrimaryButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button'; | ||
| import { Dialog, DialogType, IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog'; | ||
| import { Link } from 'office-ui-fabric-react/lib/Link'; | ||
| import { NeutralColors } from '@uifabric/fluent-theme'; | ||
| import formatMessage from 'format-message'; | ||
| import { useRecoilValue } from 'recoil'; | ||
|
|
||
| import { dispatcherState, userSettingsState } from '../../../recoilModel'; | ||
|
|
||
| import { BreakingUpdateProps } from './types'; | ||
|
|
||
| const dismissButton: Partial<IButtonStyles> = { | ||
| root: { | ||
| marginRight: '6px;', | ||
| marginLeft: 'auto', | ||
| }, | ||
| }; | ||
|
|
||
| const dialogContent: Partial<IDialogContentStyles> = { | ||
| content: { color: NeutralColors.black }, | ||
| }; | ||
|
|
||
| const dialogContentWithoutHeader: Partial<IDialogContentStyles> = { | ||
| ...dialogContent, | ||
| header: { | ||
| display: 'none', | ||
| }, | ||
| inner: { | ||
| padding: '36px 24px 24px 24px', | ||
| }, | ||
| }; | ||
|
|
||
| const buttonRow = css` | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| justify-items: flex-end; | ||
| `; | ||
|
|
||
| const gotItButton = css` | ||
| margin-left: auto; | ||
| `; | ||
|
|
||
| const updateCancelledCopy = css` | ||
| margin-top: 0; | ||
| margin-bottom: 27px; | ||
| `; | ||
|
|
||
| type ModalState = 'Default' | 'PressedNotNow'; | ||
|
|
||
| export const Version1To2Content: React.FC<BreakingUpdateProps> = (props) => { | ||
| const { explicitCheck, onCancel, onContinue } = props; | ||
| const [currentState, setCurrentState] = useState<ModalState>('Default'); | ||
| const userSettings = useRecoilValue(userSettingsState); | ||
| const { updateUserSettings } = useRecoilValue(dispatcherState); | ||
| const onNotNow = useCallback(() => { | ||
| if (userSettings.appUpdater.autoDownload) { | ||
| // disable auto update and notify the user | ||
| updateUserSettings({ | ||
| appUpdater: { | ||
| autoDownload: false, | ||
| }, | ||
| }); | ||
| setCurrentState('PressedNotNow'); | ||
| } else { | ||
| onCancel(); | ||
| } | ||
| }, []); | ||
|
|
||
| return currentState === 'Default' ? ( | ||
| <Dialog | ||
| dialogContentProps={{ | ||
| styles: dialogContent, | ||
| title: formatMessage('Composer 2.0 is now available!'), | ||
| type: DialogType.largeHeader, | ||
| }} | ||
| hidden={false} | ||
| maxWidth={427} | ||
| minWidth={427} | ||
| modalProps={{ | ||
| isBlocking: false, | ||
| }} | ||
| > | ||
| <p> | ||
| {formatMessage( | ||
| 'Bot Framework Composer 2.0 provides more built-in capabilities so you can build complex bots quickly. Update to Composer 2.0 for advanced bot templates, prebuilt components, and a runtime that is fully extensible through packages.' | ||
| )} | ||
| </p> | ||
|
|
||
| <p> | ||
| {formatMessage.rich( | ||
| 'Note: If your bot is using custom actions, they will not be supported in Composer 2.0. <a>Learn more about updating to Composer 2.0.</a>', | ||
| { | ||
| // TODO: needs real link | ||
| a: ({ children }) => ( | ||
| <Link key="v2-breaking-changes-docs" href="https://aka.ms/bot-framework-composer-2.0"> | ||
| {children} | ||
| </Link> | ||
| ), | ||
| } | ||
| )} | ||
| </p> | ||
| <div css={buttonRow}> | ||
| {explicitCheck ? ( | ||
| <DefaultButton styles={dismissButton} text={formatMessage('Cancel')} onClick={onCancel} /> | ||
| ) : ( | ||
| <DefaultButton styles={dismissButton} text={formatMessage('Not now')} onClick={onNotNow} /> | ||
| )} | ||
| <PrimaryButton text={formatMessage('Update and restart')} onClick={onContinue} /> | ||
| </div> | ||
| </Dialog> | ||
| ) : ( | ||
| <Dialog | ||
| dialogContentProps={{ | ||
| styles: dialogContentWithoutHeader, | ||
| title: undefined, | ||
| type: DialogType.normal, | ||
| }} | ||
| hidden={false} | ||
| maxWidth={427} | ||
| minWidth={427} | ||
| modalProps={{ | ||
| isBlocking: false, | ||
| }} | ||
| > | ||
| <p css={updateCancelledCopy}> | ||
| {formatMessage.rich( | ||
| 'Update cancelled. Auto-update has been turned off for this release. You can update at any time by selecting <b>Help > Check for updates.</b>', | ||
| { b: ({ children }) => <b key="v2-breaking-changes-re-enable-auto-updates">{children}</b> } | ||
| )} | ||
| </p> | ||
| <div css={buttonRow}> | ||
| <PrimaryButton css={gotItButton} text={formatMessage('Got it!')} onClick={onCancel} /> | ||
| </div> | ||
| </Dialog> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| export { AppUpdater } from './AppUpdater'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.