Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: move publishing profiles into a tab on the publish page #6751

Merged
benbrown merged 1 commit into from
Apr 7, 2021
Merged

fix: move publishing profiles into a tab on the publish page #6751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {

const linkToPackageManager = `/bot/${rootBotProjectId}/plugin/package-manager/package-manager`;
const linkToConnections = `/bot/${rootBotProjectId}/botProjectsSettings/#connections`;
const linkToPublishProfile = `/bot/${rootBotProjectId}/botProjectsSettings/#addNewPublishProfile`;
const linkToPublishProfile = `/bot/${rootBotProjectId}/publish/all#addNewPublishProfile`;
const linkToLUISSettings = `/bot/${rootBotProjectId}/botProjectsSettings/#luisKey`;
const linktoQNASettings = `/bot/${rootBotProjectId}/botProjectsSettings/#qnaKey`;
const linkToLGEditor = `/bot/${rootBotProjectId}/language-generation`;
Expand Down
10 changes: 1 addition & 9 deletions Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { AppIdAndPassword } from './AppIdAndPassword';
import { ExternalService } from './ExternalService';
import { BotLanguage } from './BotLanguage';
import { RuntimeSettings } from './RuntimeSettings';
import { PublishTargets } from './PublishTargets';
import AdapterSection from './adapters/AdapterSection';

// -------------------- Styles -------------------- //
Expand All @@ -29,10 +28,6 @@ const container = css`
height: 100%;
`;

const publishTargetsWrap = (isLastComponent) => css`
margin-bottom: ${isLastComponent ? '120px' : 0};
`;

const idsInTab: Record<PivotItemKey, string[]> = {
Basics: ['runtimeSettings'],
LuisQna: [],
Expand Down Expand Up @@ -93,10 +88,7 @@ export const BotProjectSettingsTabView: React.FC<RouteComponentProps<{
headerText={formatMessage('Connections')}
itemKey={PivotItemKey.Connections}
>
<div css={publishTargetsWrap(!isRootBot)}>
<PublishTargets projectId={projectId} scrollToSectionId={scrollToSectionId} />
{isRootBot && <AdapterSection projectId={projectId} scrollToSectionId={scrollToSectionId} />}
</div>
{isRootBot && <AdapterSection projectId={projectId} scrollToSectionId={scrollToSectionId} />}
</PivotItem>
<PivotItem
data-testid="skillsTab"
Expand Down
118 changes: 58 additions & 60 deletions Composer/packages/client/src/pages/botProject/PublishTargets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ import { SharedColors } from '@uifabric/fluent-theme';
import { OpenConfirmModal } from '@bfc/ui-shared';

import { dispatcherState, settingsState, publishTypesState } from '../../recoilModel';
import { CollapsableWrapper } from '../../components/CollapsableWrapper';
import { AuthDialog } from '../../components/Auth/AuthDialog';
import { isShowAuthDialog } from '../../utils/auth';

import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
import { title, tableRow, tableRowItem, tableColumnHeader, columnSizes, actionButton } from './styles';
import { tableRow, tableRowItem, tableColumnHeader, columnSizes, actionButton } from './styles';

// -------------------- Styles -------------------- //

const publishTargetsContainer = css`
display: flex;
padding: 20px;
flex-direction: column;
`;

Expand Down Expand Up @@ -93,65 +93,63 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (props) => {

return (
<Fragment>
<CollapsableWrapper title={formatMessage('Publish profiles')} titleStyle={title}>
<div ref={publishTargetsRef} css={publishTargetsContainer} id="addNewPublishProfile">
<div css={publishTargetsHeader}>
<div css={tableColumnHeader(columnSizes[0])}>{formatMessage('Name')} </div>
<div css={tableColumnHeader(columnSizes[1])}>{formatMessage('Target')} </div>
<div css={tableColumnHeader(columnSizes[2])}> </div>
</div>
{publishTargets?.map((p, index) => {
return (
<div key={index} css={tableRow}>
<div css={tableRowItem(columnSizes[0])} title={p.name}>
{p.name}
</div>
<div css={tableRowItem(columnSizes[1])} title={p.type}>
{p.type}
</div>
<div css={tableRowItem(columnSizes[2])}>
<ActionButton
data-testid={'editPublishProfile'}
styles={editPublishProfile}
onClick={() => {
setCurrent({ item: p, index: index });
if (isShowAuthDialog(true)) {
setShowAuthDialog(true);
} else {
setDialogHidden(false);
}
}}
>
{formatMessage('Edit')}
</ActionButton>
</div>
<div css={tableRowItem(columnSizes[2])}>
<ActionButton
data-testid={'deletePublishProfile'}
styles={editPublishProfile}
onClick={() => onDeletePublishTarget(p)}
>
{formatMessage('Delete')}
</ActionButton>
</div>
</div>
);
})}
<ActionButton
data-testid={'addNewPublishProfile'}
styles={actionButton}
onClick={() => {
if (isShowAuthDialog(true)) {
setShowAuthDialog(true);
} else {
setDialogHidden(false);
}
}}
>
{formatMessage('Add new')}
</ActionButton>
<div ref={publishTargetsRef} css={publishTargetsContainer} id="addNewPublishProfile">
<div css={publishTargetsHeader}>
<div css={tableColumnHeader(columnSizes[0])}>{formatMessage('Name')} </div>
<div css={tableColumnHeader(columnSizes[1])}>{formatMessage('Target')} </div>
<div css={tableColumnHeader(columnSizes[2])}> </div>
</div>
</CollapsableWrapper>
{publishTargets?.map((p, index) => {
return (
<div key={index} css={tableRow}>
<div css={tableRowItem(columnSizes[0])} title={p.name}>
{p.name}
</div>
<div css={tableRowItem(columnSizes[1])} title={p.type}>
{p.type}
</div>
<div css={tableRowItem(columnSizes[2])}>
<ActionButton
data-testid={'editPublishProfile'}
styles={editPublishProfile}
onClick={() => {
setCurrent({ item: p, index: index });
if (isShowAuthDialog(true)) {
setShowAuthDialog(true);
} else {
setDialogHidden(false);
}
}}
>
{formatMessage('Edit')}
</ActionButton>
</div>
<div css={tableRowItem(columnSizes[2])}>
<ActionButton
data-testid={'deletePublishProfile'}
styles={editPublishProfile}
onClick={() => onDeletePublishTarget(p)}
>
{formatMessage('Delete')}
</ActionButton>
</div>
</div>
);
})}
<ActionButton
data-testid={'addNewPublishProfile'}
styles={actionButton}
onClick={() => {
if (isShowAuthDialog(true)) {
setShowAuthDialog(true);
} else {
setDialogHidden(false);
}
}}
>
{formatMessage('Add new')}
</ActionButton>
</div>
{showAuthDialog && (
<AuthDialog
needGraph
Expand Down
77 changes: 56 additions & 21 deletions Composer/packages/client/src/pages/publish/Publish.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { RouteComponentProps } from '@reach/router';
import formatMessage from 'format-message';
import { useRecoilValue } from 'recoil';
import { PublishResult, PublishTarget } from '@bfc/shared';
import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
import { Stack } from 'office-ui-fabric-react/lib/Stack';

import { dispatcherState, localBotPublishHistorySelector, localBotsDataSelector } from '../../recoilModel';
import { AuthDialog } from '../../components/Auth/AuthDialog';
Expand All @@ -22,11 +24,13 @@ import {
getTenantIdFromCache,
} from '../../utils/auth';
// import { vaultScopes } from '../../constants';
import { useLocation } from '../../utils/hooks';
import { AuthClient } from '../../utils/authClient';
import TelemetryClient from '../../telemetry/TelemetryClient';
import { ApiStatus, PublishStatusPollingUpdater, pollingUpdaterList } from '../../utils/publishStatusPollingUpdater';
import { navigateTo } from '../../utils/navigation';
import { PublishTargets } from '../botProject/PublishTargets';

import { ProjectList } from './components/projectList/ProjectList';
import { PublishDialog } from './PublishDialog';
import { ContentHeaderStyle, HeaderText, ContentStyle, contentEditor } from './styles';
import { BotStatusList } from './BotStatusList';
Expand All @@ -43,7 +47,6 @@ import {

const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: string }>> = (props) => {
const { projectId = '' } = props;

const botProjectData = useRecoilValue(localBotsDataSelector);
const publishHistoryList = useRecoilValue(localBotPublishHistorySelector);
const {
Expand All @@ -57,10 +60,13 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
addNotification,
deleteNotification,
} = useRecoilValue(dispatcherState);
const { location } = useLocation();

const pendingNotificationRef = useRef<Notification>();
const showNotificationsRef = useRef<Record<string, boolean>>({});

const [activeTab, setActiveTab] = useState<string>('publish');
const [provisionProject, setProvisionProject] = useState(projectId);
const [currentBotList, setCurrentBotList] = useState<Bot[]>([]);
const [publishDialogVisible, setPublishDialogVisiblity] = useState(false);
const [pullDialogVisible, setPullDialogVisiblity] = useState(false);
Expand Down Expand Up @@ -227,13 +233,17 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
};

const manageSkillPublishProfile = (skillId: string) => {
const url =
skillId === projectId
? `/bot/${projectId}/botProjectsSettings/#addNewPublishProfile`
: `bot/${projectId}/skill/${skillId}/botProjectsSettings/#addNewPublishProfile`;
navigateTo(url);
setActiveTab('provision');
setProvisionProject(skillId);
};

// pop out get started if #getstarted is in the URL
useEffect(() => {
if (location.hash === '#addNewPublishProfile') {
setActiveTab('provision');
}
}, [location]);

const isPublishingToAzure = (target?: PublishTarget) => {
return target?.type === 'azurePublish' || target?.type === 'azureFunctionsPublish';
};
Expand Down Expand Up @@ -412,20 +422,45 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
<div css={ContentHeaderStyle}>
<h1 css={HeaderText}>{formatMessage('Publish your bots')}</h1>
</div>
<div css={ContentStyle} data-testid="Publish" role="main">
<div aria-label={formatMessage('List view')} css={contentEditor} role="region">
<BotStatusList
botPublishHistoryList={publishHistoryList}
botStatusList={botStatusList}
checkedIds={checkedSkillIds}
disableCheckbox={isPublishPending}
onChangePublishTarget={changePublishTarget}
onCheck={updateCheckedSkills}
onManagePublishProfile={manageSkillPublishProfile}
onRollbackClick={onRollbackToVersion}
/>
</div>
</div>

<Pivot
selectedKey={activeTab}
styles={{ root: { marginLeft: 12 } }}
onLinkClick={(link) => setActiveTab(link?.props?.itemKey || '')}
>
<PivotItem headerText={formatMessage('Publish')} itemKey={'publish'}>
<div css={ContentStyle} data-testid="Publish" role="main">
<div aria-label={formatMessage('List view')} css={contentEditor} role="region">
<BotStatusList
botPublishHistoryList={publishHistoryList}
botStatusList={botStatusList}
checkedIds={checkedSkillIds}
disableCheckbox={isPublishPending}
onChangePublishTarget={changePublishTarget}
onCheck={updateCheckedSkills}
onManagePublishProfile={manageSkillPublishProfile}
onRollbackClick={onRollbackToVersion}
/>
</div>
</div>
</PivotItem>
<PivotItem headerText={formatMessage('Publishing Profile')} itemKey={'provision'}>
<Stack horizontal verticalFill styles={{ root: { borderTop: '1px solid #CCC' } }}>
{botProjectData && botProjectData.length > 1 && (
<Stack.Item styles={{ root: { width: '175px', borderRight: '1px solid #CCC' } }}>
<ProjectList
defaultSelected={provisionProject}
projectCollection={botProjectData}
onSelect={(link) => setProvisionProject(link.projectId)}
/>
</Stack.Item>
)}
<Stack.Item align="stretch" styles={{ root: { flexGrow: 1, overflow: 'auto', maxHeight: '100%' } }}>
<PublishTargets projectId={provisionProject} />
</Stack.Item>
</Stack>
</PivotItem>
</Pivot>
</Fragment>
);
};
Expand Down
Loading