feat: provisioning in app

Composer/package.json

@@ -126,4 +126,4 @@
     "wait-on": "^5.2.0",
     "wsrun": "^5.2.0"
   }
-}
+}

Composer/packages/client/__tests__/pages/publish/Publish.test.tsx

@@ -47,6 +47,7 @@ const rootState = {
         status: true,
         rollback: true,
         pull: true,
+        provision: true,
       },
     },
   ],

Composer/packages/client/package.json

@@ -25,7 +25,6 @@
     "@bfc/form-dialogs": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
-    "@bfc/ui-shared": "*",
     "@bfc/ui-plugin-composer": "*",
     "@bfc/ui-plugin-cross-trained": "*",
     "@bfc/ui-plugin-dialog-schema-editor": "*",
@@ -47,6 +46,7 @@
     "format-message": "^6.2.3",
     "format-message-generate-id": "^6.2.3",
     "immer": "^5.2.0",
+    "jsonwebtoken": "^8.5.1",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.19",
     "office-ui-fabric-react": "^7.121.11",

Composer/packages/client/src/components/Auth/AuthDialog.tsx

@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
+import formatMessage from 'format-message';
+import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { useCallback, useState } from 'react';
+
+import storage from '../../utils/storage';
+import { isTokenExpired } from '../../utils/auth';
+
+export interface AuthDialogProps {
+  needGraph: boolean;
+  onDismiss: () => void;
+  next: () => void;
+}
+export const AuthDialog: React.FC<AuthDialogProps> = (props) => {
+  const [graphToken, setGraphToken] = useState('');
+  const [accessToken, setAccessToken] = useState('');
+  const [tokenError, setTokenError] = useState<string>('');
+  const [graphError, setGraphError] = useState<string>('');
+  const isAble = useCallback(() => {
+    if (!accessToken) {
+      return false;
+    } else if (tokenError) {
+      return false;
+    }
+
+    if (props.needGraph && (!graphToken || graphError)) {
+      return false;
+    }
+    return true;
+  }, [accessToken, graphToken]);
+
+  return (
+    <DialogWrapper
+      isBlocking
+      isOpen
+      dialogType={DialogTypes.CreateFlow}
+      subText={formatMessage(
+        'To perform provisioning and publishing actions, Composer requires access to your Azure and MS Graph accounts.  Paste access tokens from the az command line tool using the commands highlighted below.'
+      )}
+      title={formatMessage('Provide access tokens')}
+      onDismiss={props.onDismiss}
+    >
+      <TextField
+        multiline
+        errorMessage={tokenError}
+        label={formatMessage('Provide ARM token by running `az account get-access-token`')}
+        placeholder={formatMessage('Paste token here')}
+        rows={4}
+        onChange={(event, newValue) => {
+          newValue && setAccessToken(newValue);
+          if (isTokenExpired(newValue || '')) {
+            setTokenError('Token Expire or token invalid');
+          } else {
+            setTokenError('');
+          }
+        }}
+      />
+      {props.needGraph ? (
+        <TextField
+          multiline
+          errorMessage={graphError}
+          label={formatMessage(
+            'Provide graph token by running `az account get-access-token  --resource-type ms-graph`'
+          )}
+          placeholder={formatMessage('Paste token here')}
+          rows={4}
+          onChange={(event, newValue) => {
+            newValue && setGraphToken(newValue);
+            if (isTokenExpired(newValue || '')) {
+              setGraphError('Token Expire or token invalid');
+            } else {
+              setGraphError('');
+            }
+          }}
+        />
+      ) : null}
+      <DialogFooter>
+        <DefaultButton text={formatMessage('Cancel')} onClick={props.onDismiss} />
+        <PrimaryButton
+          disabled={!isAble()}
+          text={formatMessage('Continue')}
+          onClick={() => {
+            props.onDismiss();
+            // cache tokens
+            storage.set('accessToken', accessToken);
+            storage.set('graphToken', graphToken);
+            props.next();
+          }}
+        />
+      </DialogFooter>
+    </DialogWrapper>
+  );
+};

Composer/packages/client/src/constants.ts

@@ -295,6 +295,18 @@ export const addSkillDialog = {
   },
 };
 
+export const PublishProfileDialog = {
+  ADD_PROFILE: {
+    title: formatMessage('Add a publish profile'),
+    subText: formatMessage(
+      'Publish profile informs your bot where to use resources from. The resoruces you provision for your bot will live within this profile'
+    ),
+  },
+  EDIT_PROFILE: {
+    title: formatMessage('Edit a publish profile'),
+  },
+};
+
 export const repairSkillDialog = (name: string) => {
   return {
     title: formatMessage('Link to this skill has been broken'),
@@ -337,6 +349,28 @@ export const QnABotTemplateId = 'QnASample';
 
 export const nameRegex = /^[a-zA-Z0-9-_]+$/;
 
+export const authConfig = {
+  // for web login
+  clientId: process.env.WEBLOGIN_CLIENTID,
+  scopes: [
+    'https://management.core.windows.net/user_impersonation',
+    'https://graph.microsoft.com/Application.ReadWrite.All',
+  ],
+  tenantId: process.env.WEBLOGIN_TENANTID,
+  redirectUrl: process.env.WEBLOGIN_REDIRECTURL,
+};
+
+export const armScopes = {
+  scopes: ['https://management.core.windows.net/user_impersonation'],
+  targetResource: 'https://management.core.windows.net/',
+};
+export const graphScopes = {
+  scopes: ['https://graph.microsoft.com/Application.ReadWrite.All'],
+  targetResource: 'https://graph.microsoft.com/',
+};
+
+export const authUrl = `https://login.microsoftonline.com/${authConfig.tenantId}/oauth2/v2.0/authorize`;
+
 export const triggerNotSupportedWarning = () =>
   formatMessage(
     'This trigger type is not supported by the RegEx recognizer. To ensure this trigger is fired, change the recognizer type.'