fix: split "Add new" button into its own section on Publish Targets page

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,19 +61,19 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (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<HTMLDivElement>(null);
   const [current, setCurrent] = useState<{ index: number; item: PublishTarget } | null>(null);
 
   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<PublishTargetsProps> = (props) => {
     }
   };
 
+  const addNewButton = (
+    <ActionButton
+      data-testid={'addNewPublishProfile'}
+      styles={actionButton}
+      onClick={() => {
+        if (shouldShowTokenDialog(true)) {
+          setShowingAuthDialog(true);
+        } else {
+          setShowingPublishDialog(true);
+        }
+      }}
+    >
+      {formatMessage('Add new')}
+    </ActionButton>
+  );
+
   return (
     <Fragment>
       <div ref={publishTargetsRef} css={publishTargetsContainer} id="addNewPublishProfile">
@@ -126,10 +146,10 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (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<PublishTargetsProps> = (props) => {
             </div>
           );
         })}
-        <ActionButton
-          data-testid={'addNewPublishProfile'}
-          styles={actionButton}
-          onClick={() => {
-            if (isShowAuthDialog(true)) {
-              setShowAuthDialog(true);
-            } else {
-              setDialogHidden(false);
-            }
-          }}
-        >
-          {formatMessage('Add new')}
-        </ActionButton>
       </div>
+      <div css={belowTargetsContainer}>{addNewButton}</div>
       {showAuthDialog && (
         <AuthDialog
           needGraph
           next={() => {
-            setDialogHidden(false);
+            setShowingPublishDialog(true);
           }}
           onDismiss={() => {
-            setShowAuthDialog(false);
+            setShowingAuthDialog(false);
           }}
         />
       )}
-      {!dialogHidden ? (
+      {showPublishDialog ? (
         <PublishProfileDialog
           closeDialog={() => {
-            setDialogHidden(true);
+            setShowingPublishDialog(false);
             // reset current
             setCurrent(null);
           }}

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;
   }
 }