diff --git a/Composer/packages/client/src/pages/botProject/PublishTargets.tsx b/Composer/packages/client/src/pages/botProject/PublishTargets.tsx index f043684034..07a0ccde94 100644 --- a/Composer/packages/client/src/pages/botProject/PublishTargets.tsx +++ b/Composer/packages/client/src/pages/botProject/PublishTargets.tsx @@ -14,7 +14,7 @@ import { OpenConfirmModal } from '@bfc/ui-shared'; import { dispatcherState, settingsState, publishTypesState } from '../../recoilModel'; import { AuthDialog } from '../../components/Auth/AuthDialog'; -import { isShowAuthDialog } from '../../utils/auth'; +import { isShowAuthDialog as shouldShowTokenDialog } from '../../utils/auth'; import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog'; import { tableRow, tableRowItem, tableColumnHeader, columnSizes, actionButton } from './styles'; @@ -27,6 +27,10 @@ const publishTargetsContainer = css` flex-direction: column; `; +const belowTargetsContainer = css` + padding: 0 20px 20px 20px; +`; + const publishTargetsHeader = css` display: flex; flex-direction: row; @@ -57,8 +61,8 @@ export const PublishTargets: React.FC = (props) => { const { getPublishTargetTypes, setPublishTargets } = useRecoilValue(dispatcherState); const publishTypes = useRecoilValue(publishTypesState(projectId)); - const [dialogHidden, setDialogHidden] = useState(true); - const [showAuthDialog, setShowAuthDialog] = useState(false); + const [showPublishDialog, setShowingPublishDialog] = useState(false); + const [showAuthDialog, setShowingAuthDialog] = useState(false); const publishTargetsRef = React.useRef(null); const [current, setCurrent] = useState<{ index: number; item: PublishTarget } | null>(null); @@ -66,10 +70,10 @@ export const PublishTargets: React.FC = (props) => { useEffect(() => { if (props.completePartial && publishTargets && publishTargets.length > 0) { setCurrent({ item: publishTargets[0], index: 0 }); - if (isShowAuthDialog(true)) { - setShowAuthDialog(true); + if (shouldShowTokenDialog(true)) { + setShowingAuthDialog(true); } else { - setDialogHidden(false); + setShowingPublishDialog(true); } } }, [props.completePartial, publishTargets]); @@ -103,6 +107,22 @@ export const PublishTargets: React.FC = (props) => { } }; + const addNewButton = ( + { + if (shouldShowTokenDialog(true)) { + setShowingAuthDialog(true); + } else { + setShowingPublishDialog(true); + } + }} + > + {formatMessage('Add new')} + + ); + return (
@@ -126,10 +146,10 @@ export const PublishTargets: React.FC = (props) => { styles={editPublishProfile} onClick={() => { setCurrent({ item: p, index: index }); - if (isShowAuthDialog(true)) { - setShowAuthDialog(true); + if (shouldShowTokenDialog(true)) { + setShowingAuthDialog(true); } else { - setDialogHidden(false); + setShowingPublishDialog(true); } }} > @@ -148,35 +168,23 @@ export const PublishTargets: React.FC = (props) => {
); })} - { - if (isShowAuthDialog(true)) { - setShowAuthDialog(true); - } else { - setDialogHidden(false); - } - }} - > - {formatMessage('Add new')} - +
{addNewButton}
{showAuthDialog && ( { - setDialogHidden(false); + setShowingPublishDialog(true); }} onDismiss={() => { - setShowAuthDialog(false); + setShowingAuthDialog(false); }} /> )} - {!dialogHidden ? ( + {showPublishDialog ? ( { - setDialogHidden(true); + setShowingPublishDialog(false); // reset current setCurrent(null); }} diff --git a/Composer/packages/client/src/utils/auth.ts b/Composer/packages/client/src/utils/auth.ts index cafa4326bc..78a6cd8bf8 100644 --- a/Composer/packages/client/src/utils/auth.ts +++ b/Composer/packages/client/src/utils/auth.ts @@ -327,27 +327,19 @@ export function getAccessTokenUrl(options: { clientId: string; redirectUrl: stri return url; } -export function isShowAuthDialog(needGraph: boolean): boolean { +export function userShouldProvideTokens(): boolean { if (isElectron()) { return false; - } else if (!(authConfig.clientId && authConfig.redirectUrl && authConfig.tenantId)) { - return isTokenExpired(getTokenFromCache('accessToken')) - ? true - : needGraph && isTokenExpired(getTokenFromCache('graphToken')) - ? true - : false; - } else { - return false; - } + } else return !(authConfig.clientId && authConfig.redirectUrl && authConfig.tenantId); } -export function userShouldProvideTokens(): boolean { - if (isElectron()) { - return false; - } else if (authConfig.clientId && authConfig.redirectUrl && authConfig.tenantId) { +export function isShowAuthDialog(needGraph: boolean): boolean { + if (userShouldProvideTokens()) + return ( + (needGraph && isTokenExpired(getTokenFromCache('graphToken'))) || isTokenExpired(getTokenFromCache('accessToken')) + ); + else { return false; - } else { - return true; } }