fix: Display error w/o token on auth failure

extensions/azurePublish/src/components/api.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 /* eslint-disable no-underscore-dangle */
 import axios from 'axios';
+import formatMessage from 'format-message';
 import { SubscriptionClient } from '@azure/arm-subscriptions';
 import { Subscription } from '@azure/arm-subscriptions/esm/models';
 import { ResourceManagementClient } from '@azure/arm-resources';
@@ -27,6 +28,11 @@ import * as Images from './images';
 
 const logger = debug('composer:extension:azureProvision');
 
+/**
+ * Retrieves the list of subscriptions from Azure
+ * @param token The authentication token
+ * @returns The list of subscriptions or throws
+ */
 export const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
   const tokenCredentials = new TokenCredentials(token);
   try {
@@ -37,15 +43,22 @@ export const getSubscriptions = async (token: string): Promise<Array<Subscriptio
         status: AzureAPIStatus.ERROR,
         message: subscriptionsResult._response.bodyAsText,
       });
-      return [];
+      throw new Error(subscriptionsResult._response.bodyAsText);
     }
     return subscriptionsResult._response.parsedBody;
   } catch (err) {
+    let message = JSON.stringify(err, Object.getOwnPropertyNames(err));
+    if (err?.code === 12 && err?.message?.match(/Bearer/gi)) {
+      message = formatMessage(
+        'There was an authentication problem retrieving subscriptions. Verify your login session has not expired and you have permission to list subscriptions in this account.'
+      );
+    }
+
     logger({
       status: AzureAPIStatus.ERROR,
-      message: JSON.stringify(err, Object.getOwnPropertyNames(err)),
+      message,
     });
-    return [];
+    throw new Error(message);
   }
 };
 

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -55,6 +55,12 @@ const AddResourcesSectionName = styled(Text)`
   font-size: ${FluentTheme.fonts.mediumPlus.fontSize};
 `;
 
+const labelTooltipStyles = {
+  root: {
+    userSelect: 'none',
+  },
+};
+
 const iconStyle = (required) => {
   return {
     root: {
@@ -124,7 +130,7 @@ const onRenderLabel = (props) => {
         {' '}
         {props.label}{' '}
       </div>
-      <TooltipHost content={props.ariaLabel}>
+      <TooltipHost content={props.ariaLabel} styles={labelTooltipStyles}>
         <Icon iconName="Info" styles={iconStyle(props.required)} />
       </TooltipHost>
     </div>
@@ -229,6 +235,7 @@ export const AzureProvisionDialog: React.FC = () => {
   const extensionState = { ...defaultExtensionState, ...getItem(profileName) };
 
   const [subscriptions, setSubscriptions] = useState<Subscription[] | undefined>();
+  const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState<string>();
   const [deployLocations, setDeployLocations] = useState<DeployLocation[]>([]);
   const [luisLocations, setLuisLocations] = useState<DeployLocation[]>([]);
 
@@ -366,8 +373,10 @@ export const AzureProvisionDialog: React.FC = () => {
 
   const getResources = async () => {
     try {
-      const resources = await getResourceList(currentProjectId(), publishType);
-      setExtensionResourceOptions(resources);
+      if (isMounted.current) {
+        const resources = await getResourceList(currentProjectId(), publishType);
+        setExtensionResourceOptions(resources);
+      }
     } catch (err) {
       // todo: how do we handle API errors in this component
       console.log('ERROR', err);
@@ -376,11 +385,26 @@ export const AzureProvisionDialog: React.FC = () => {
 
   useEffect(() => {
     if (token) {
-      getSubscriptions(token).then((data) => {
-        if (isMounted.current) {
-          setSubscriptions(data);
-        }
-      });
+      setSubscriptionsErrorMessage(undefined);
+      getSubscriptions(token)
+        .then((data) => {
+          if (isMounted.current) {
+            setSubscriptions(data);
+            if (data.length === 0) {
+              setSubscriptionsErrorMessage(
+                formatMessage(
+                  'Your subscription list is empty, please add your subscription, or login with another account.'
+                )
+              );
+            }
+          }
+        })
+        .catch((err) => {
+          if (isMounted.current) {
+            setSubscriptionsErrorMessage(err.message);
+          }
+        });
+
       getResources();
     }
   }, [token]);
@@ -389,14 +413,18 @@ export const AzureProvisionDialog: React.FC = () => {
     if (token && currentSubscription) {
       try {
         const resourceGroups = await getResourceGroups(token, currentSubscription);
-        setResourceGroups(resourceGroups);
+        if (isMounted.current) {
+          setResourceGroups(resourceGroups);
 
-        // After the resource groups load, isNewResourceGroupName can be determined
-        setIsNewResourceGroupName(!resourceGroups?.some((r) => r.name === currentResourceGroupName));
+          // After the resource groups load, isNewResourceGroupName can be determined
+          setIsNewResourceGroupName(!resourceGroups?.some((r) => r.name === currentResourceGroupName));
+        }
       } catch (err) {
         // todo: how do we handle API errors in this component
         console.log('ERROR', err);
-        setResourceGroups(undefined);
+        if (isMounted.current) {
+          setResourceGroups(undefined);
+        }
       }
     } else {
       setResourceGroups(undefined);
@@ -407,7 +435,7 @@ export const AzureProvisionDialog: React.FC = () => {
     loadResourceGroups();
   }, [token, currentSubscription]);
 
-  const subscriptionOption = useMemo(() => {
+  const subscriptionOptions = useMemo(() => {
     return subscriptions?.map((t) => ({ key: t.subscriptionId, text: t.displayName }));
   }, [subscriptions]);
 
@@ -563,6 +591,7 @@ export const AzureProvisionDialog: React.FC = () => {
       !currentResourceGroupName ||
       !currentHostName ||
       !currentLocation ||
+      subscriptionsErrorMessage ||
       errorResourceGroupName ||
       errorHostName !== ''
     );
@@ -599,10 +628,12 @@ export const AzureProvisionDialog: React.FC = () => {
         </div>
         <div style={{ flex: 1, height: '100%' }}>
           <Suspense fallback={<Spinner label={formatMessage('Loading')} />}>
-            {subscriptionOption?.length > 0 && choice.key === 'create' && (
+            {choice.key === 'create' && (
               <form style={{ width: '100%' }}>
                 <Dropdown
-                  required
+                  ariaLabel={formatMessage(
+                    'The Azure AD directory includes the tenant’s users, groups, and apps and is used to perform identity and access management functions for tenant resources.'
+                  )}
                   disabled={allTenants.length === 1 || currentConfig?.tenantId}
                   errorMessage={loginErrorMsg}
                   label={formatMessage('Azure Directory')}
@@ -612,22 +643,17 @@ export const AzureProvisionDialog: React.FC = () => {
                   onChange={(_e, o) => {
                     setSelectedTenant(o.key as string);
                   }}
+                  onRenderLabel={onRenderLabel}
                 />
                 <Dropdown
                   required
                   ariaLabel={formatMessage('All resources in an Azure subscription are billed together')}
-                  defaultSelectedKey={currentSubscription}
                   disabled={currentConfig?.subscriptionId}
-                  errorMessage={
-                    currentUser && subscriptionOption?.length < 1
-                      ? formatMessage(
-                          'Your subscription list is empty, please add your subscription, or login with another account.'
-                        )
-                      : undefined
-                  }
+                  errorMessage={subscriptionsErrorMessage}
                   label={formatMessage('Subscription')}
-                  options={subscriptionOption}
+                  options={subscriptionOptions}
                   placeholder={formatMessage('Select one')}
+                  selectedKey={currentSubscription}
                   styles={{ root: { paddingBottom: '8px' } }}
                   onChange={(_e, o: IDropdownOption) => {
                     setCurrentSubscription(o.key as string);
@@ -766,7 +792,7 @@ export const AzureProvisionDialog: React.FC = () => {
                   items={optionalListItems}
                   selectedKeys={selectedResourceKeys}
                   onSelectionChanged={(keys) => {
-                    const newSelection = listItems.filter((item) => item.required === true || keys.includes(item.key));
+                    const newSelection = optionalListItems.filter((item) => keys.includes(item.key));
                     setEnabledResources(newSelection);
                   }}
                 />
@@ -885,7 +911,7 @@ export const AzureProvisionDialog: React.FC = () => {
               onClick={() => {
                 setPage(PageTypes.ReviewResource);
                 setTitle(DialogTitle.REVIEW);
-                let selectedResources = enabledResources.slice();
+                let selectedResources = requireResources.concat(enabledResources);
                 selectedResources = selectedResources.map((item) => {
                   let region = currentConfig?.region || currentLocation;
                   if (item.key.includes('luis')) {