-
Notifications
You must be signed in to change notification settings - Fork 366
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Added Host name validation and support for editing publish prof…
…ile (#8131) * Added Host name validation and support for editing resource configuration * add logic that prevents going to next step when host name is invalid * Removed unnecessary code * Changes as per PR comments * Added useCallback for stashWizardState() * Removed useCallback for stashWizardState() and removed dependency for all the wizards * Added different callbacks for validation * Added Choose resources and review resources steps * Added ReviewResourcesStep * Changes as per PR comments
- Loading branch information
1 parent
685ece1
commit 27cc740
Showing
29 changed files
with
645 additions
and
142 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
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
101 changes: 98 additions & 3 deletions
101
extensions/azurePublishNew/src/components/provisioningWizards/steps/ChooseResourcesStep.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 |
|---|---|---|
| @@ -1,7 +1,102 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| import React from 'react'; | ||
| export const ChooseResourcesStep = () => { | ||
| return <>Add resources step works!</>; | ||
| import React, { FC } from 'react'; | ||
| import { ScrollablePane, ScrollbarVisibility, Stack } from 'office-ui-fabric-react'; | ||
| import formatMessage from 'format-message'; | ||
| import { Text } from 'office-ui-fabric-react/lib/Text'; | ||
| import styled from '@emotion/styled'; | ||
| import { FluentTheme } from '@uifabric/fluent-theme'; | ||
| import { usePublishApi } from '@bfc/extension-client'; | ||
| import { useRecoilValue } from 'recoil'; | ||
|
|
||
| import { ChooseResourcesList } from '../../shared/ChooseResourcesList'; | ||
| import { ResourcesItem } from '../../../types'; | ||
| import { useResourcesApi } from '../../../hooks/useResourcesApi'; | ||
| import { hostNameState } from '../../../recoilModel/atoms/resourceConfigurationState'; | ||
| import { useDispatcher } from '../../../hooks/useDispatcher'; | ||
|
|
||
| const AddResourcesSectionName = styled(Text)` | ||
| font-size: ${FluentTheme.fonts.mediumPlus.fontSize}; | ||
| `; | ||
|
|
||
| type Props = { | ||
| enabledResources: ResourcesItem[] | undefined; | ||
| onChangeSelection?: (requiredItems: ResourcesItem[]) => void; | ||
| }; | ||
|
|
||
| const Root = styled(ScrollablePane)` | ||
| height: calc(100vh - 65px); | ||
| `; | ||
|
|
||
| export const ChooseResourcesStep: FC<Props> = ({ enabledResources, onChangeSelection }) => { | ||
| const [items, setItems] = React.useState<ResourcesItem[]>([]); | ||
| const { getResourceList, getPreview, getExistingResources } = useResourcesApi(); | ||
| const { publishConfig } = usePublishApi(); | ||
| const hostName = useRecoilValue(hostNameState); | ||
| const { setRequiredResources } = useDispatcher(); | ||
| const { currentProjectId, getType } = usePublishApi(); | ||
|
|
||
| const requiredListItems = items.filter((item) => item.required); | ||
| const optionalListItems = items.filter((item) => !item.required); | ||
|
|
||
| React.useEffect(() => { | ||
| (async () => { | ||
| try { | ||
| const resources = await getResourceList(currentProjectId(), getType()); | ||
| const alreadyHave = getExistingResources(publishConfig); | ||
|
|
||
| const names = getPreview(hostName); | ||
| const result = []; | ||
| for (const resource of resources) { | ||
| if (alreadyHave.find((item) => item === resource.key)) { | ||
| continue; | ||
| } | ||
| const previewObject = names.find((n) => n.key === resource.key); | ||
| result.push({ | ||
| ...resource, | ||
| name: previewObject ? previewObject.name : `UNKNOWN NAME FOR ${resource.key}`, | ||
| icon: previewObject ? previewObject.icon : undefined, | ||
| }); | ||
| } | ||
| setItems(result); | ||
| } catch (err) { | ||
| // TODO(#8175): Add error handling on the choose resources step | ||
| // eslint-disable-next-line no-console | ||
| console.log('ERROR', err); | ||
| } | ||
| })(); | ||
| }, [getResourceList, getExistingResources, getPreview]); | ||
|
|
||
| React.useEffect(() => { | ||
| if (items.length > 0) { | ||
| setRequiredResources(requiredListItems); | ||
| !enabledResources && onChangeSelection(optionalListItems); // select all the optional items by default | ||
| } | ||
| }, [items]); | ||
|
|
||
| return ( | ||
| <Root data-is-scrollable="true" scrollbarVisibility={ScrollbarVisibility.auto}> | ||
| <Stack> | ||
| {requiredListItems.length > 0 && ( | ||
| <> | ||
| <AddResourcesSectionName>{formatMessage('Required')}</AddResourcesSectionName> | ||
| <ChooseResourcesList items={requiredListItems} /> | ||
| </> | ||
| )} | ||
| {optionalListItems.length > 0 && ( | ||
| <> | ||
| <AddResourcesSectionName>{formatMessage('Optional')}</AddResourcesSectionName> | ||
| <ChooseResourcesList | ||
| items={optionalListItems} | ||
| selectedKeys={enabledResources?.map((er) => er.key) ?? []} | ||
| onSelectionChanged={(keys) => { | ||
| onChangeSelection?.(optionalListItems.filter((item) => keys.includes(item.key))); | ||
| }} | ||
| /> | ||
| </> | ||
| )} | ||
| </Stack> | ||
| </Root> | ||
| ); | ||
| }; |
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.