Merge branch 'main' into publish/refactor-wave1

* main: (22 commits)
  fix: Added missing dependencies to /types and /extensions packages. (#4436)
  fix: Updated publish extensions to use updated APIs (#5346)
  docs: Supported/Recommended OS Documentation (#5330)
  chore: suppress/fix lgtm alerts (#4678)
  v1.3.0
  release: update changelog
  release: update changelog github user map
  RC5 (#5327)
  fix: security analysis failed because of [email protected] (#5326)
  fix: undo failed after click create trigger and remove trigger (#5325)
  fix: LG diagnostics mismatch by update reference in cache  (#5323)
  fix: Start panel open on start/restart operation (#5322)
  fix sentence wrap bug (#5310)
  fix: use dropdown for LUIS region in skill bot settings (#5318)
  chore: Updated to latest lib (#5316)
  feat: provisioning in app (#4221)
  surface dotnet build error on runtime (#5314)
  fix: runtime throw exception when there is no cosmosdb config (#5313)
  chore: Remove onnxruntime.pdb from Publishing (#5291)
  fix UX bug in setting page (#5306)
  ...

Author: alanlong9278

Composer/cypress/integration/Publish.spec.ts

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

Composer/package.json

@@ -38,6 +38,7 @@ export class JsonBlock extends Component {
 
   onReset() {
     this.setState({
+      // lgtm [js/react/inconsistent-state-update]
       displayedText: JSON.stringify(this.state.defaultValue, null, '\t'),
     });
   }

Composer/packages/adaptive-flow/demo/src/components/json-block/index.js

@@ -14,7 +14,8 @@ const defaultFile = sampleFileNames[1];
 
 const getEventData = (obiJson) => transformRootDialog(obiJson).ruleGroup;
 
-export class EventsEditorDemo extends Component {
+// prettier-ignore
+export class EventsEditorDemo extends Component { // lgtm [js/react/unused-or-undefined-state-property]
   state = {
     selectedFile: defaultFile,
     data: getEventData(ObiExamples[defaultFile]),
@@ -42,7 +43,8 @@ export class EventsEditorDemo extends Component {
 
   onFocus(id) {
     console.log('focus node', id);
-    this.setState({
+    // prettier-ignore
+    this.setState({ // lgtm [js/react/inconsistent-state-update]
       focusPath: this.state.selectedFile + id,
       data: getEventData(this.state.data),
     });

Composer/packages/adaptive-flow/demo/src/stories/EventsEditorDemo.js

@@ -17,7 +17,8 @@ const copyJson = (json) => JSON.parse(JSON.stringify(json));
 
 const getStepData = (obiJson) => transformObiRules(obiJson.events[0]).stepGroup;
 
-export class StepEditorDemo extends Component {
+// prettier-ignore
+export class StepEditorDemo extends Component {  // lgtm [js/react/unused-or-undefined-state-property]
   state = {
     selectedFile: defaultFile,
     stepData: getStepData(ObiExamples[defaultFile]),
@@ -45,7 +46,8 @@ export class StepEditorDemo extends Component {
 
   onFocus(id) {
     console.log('focus node', id);
-    this.setState({
+    // prettier-ignore
+    this.setState({ // lgtm [js/react/inconsistent-state-update]
       focusPath: this.state.selectedFile + id,
       stepData: getStepData(copyJson(this.state.stepData)),
     });

Composer/packages/adaptive-flow/demo/src/stories/StepEditorDemo.js

@@ -33,7 +33,8 @@ export class VisualSDKDemo extends Component {
   }
 
   insertActionPreview($kind) {
-    this.setState({
+    // prettier-ignore
+    this.setState({ // lgtm [js/react/inconsistent-state-update]
       actions: [this.factory.create($kind), ...this.state.actions],
     });
   }

Composer/packages/adaptive-flow/demo/src/stories/VisualSDKDemo.js

@@ -123,7 +123,6 @@ function handleSwitchCasePrevMoveFilter(
   elements: SelectorElement[]
 ): SelectorElement[] {
   const currentElementSelectors = parseSelector(transformDefaultBranch(currentElement.selectedId)) as string[];
-  let candidateElements = elements;
   let swicthPosition = -1;
   swicthPosition = currentElementSelectors.lastIndexOf('cases');
   const samePath = currentElementSelectors.slice(0, swicthPosition).join('.');
@@ -142,7 +141,7 @@ function handleSwitchCasePrevMoveFilter(
     });
   const minSwitchCasesElement = parseSelector(transformDefaultBranch(sortedElement[0].selectedId)) as string[];
   const minSwitchCasesIndex = Number(minSwitchCasesElement[swicthPosition + 1]);
-  candidateElements = elements.filter((ele) => {
+  const candidateElements = elements.filter((ele) => {
     const eleSelectors = parseSelector(transformDefaultBranch(ele.selectedId)) as string[];
     return Number(eleSelectors[swicthPosition + 1]) === minSwitchCasesIndex;
   });
@@ -151,7 +150,6 @@ function handleSwitchCasePrevMoveFilter(
 
 function handleSwitchCaseNextMoveFilter(currentElement: SelectorElement, elements: SelectorElement[]) {
   const currentElementSelectors = parseSelector(transformDefaultBranch(currentElement.selectedId)) as string[];
-  let candidateElements = elements;
   let swicthPosition = -1;
   if (currentElementSelectors.lastIndexOf('default') > currentElementSelectors.lastIndexOf('cases')) {
     swicthPosition = currentElementSelectors.lastIndexOf('default');
@@ -174,7 +172,7 @@ function handleSwitchCaseNextMoveFilter(currentElement: SelectorElement, element
     });
   const minSwitchCasesElement = parseSelector(transformDefaultBranch(sortedElement[0].selectedId)) as string[];
   const minSwitchCasesIndex = Number(minSwitchCasesElement[swicthPosition + 1]);
-  candidateElements = elements.filter((ele) => {
+  const candidateElements = elements.filter((ele) => {
     const eleSelectors = parseSelector(transformDefaultBranch(ele.selectedId)) as string[];
     return Number(eleSelectors[swicthPosition + 1]) === minSwitchCasesIndex;
   });

Composer/packages/adaptive-flow/src/adaptive-flow-editor/utils/cursorTracker/calculate/calculateBySchema.ts

@@ -15,7 +15,7 @@ export function moveCursor(
 ): { [key: string]: string | undefined } {
   const currentElement = selectableElements.find((element) => element.selectedId === id || element.focusedId === id);
   if (!currentElement) return { selected: id, focused: undefined };
-  let element: SelectorElement = currentElement;
+  let element: SelectorElement;
 
   // tab move or arrow move
   switch (command) {

Composer/packages/adaptive-flow/src/adaptive-flow-editor/utils/cursorTracker/index.ts

@@ -19,9 +19,7 @@ export function locateNearestElement(
   filterAttrs?: string[]
 ): SelectorElement {
   // Get elements that meet the filter criteria
-  let elementArr = elements.filter(
-    (element) => !filterAttrs || (filterAttrs && filterAttrs.find((key) => !!element[key]))
-  );
+  let elementArr = elements.filter((element) => !filterAttrs || filterAttrs.find((key) => !!element[key]));
 
   elementArr = filterPromptElementsBySchema(currentElement, elementArr, direction);
   elementArr = filterElementsByVector(currentElement, elementArr, direction);

Composer/packages/adaptive-flow/src/adaptive-flow-editor/utils/cursorTracker/locateElement.ts

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

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

@@ -88,9 +88,12 @@ function getClientEnvironment(publicUrl) {
         PUBLIC_URL: publicUrl,
         GIT_SHA: getGitSha().toString().replace('\n', ''),
         SDK_PACKAGE_VERSION: '4.11.0', // TODO: change this when Composer supports custom schema/custom runtime
-        COMPOSER_VERSION: '1.3.0-rc4',
+        COMPOSER_VERSION: '1.3.0',
         LOCAL_PUBLISH_PATH:
           process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../../../extensions/localPublish/hostedBots'),
+        WEBLOGIN_CLIENTID: process.env.WEBLOGIN_CLIENTID,
+        WEBLOGIN_TENANTID: process.env.WEBLOGIN_TENANTID,
+        WEBLOGIN_REDIRECTURL: process.env.WEBLOGIN_REDIRECTURL,
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin

Composer/packages/client/config/env.js

@@ -1,3 +1,6 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 'use strict';
 
 const path = require('path');
@@ -16,6 +19,7 @@ function ensureSlash(inputPath, needsSlash) {
   if (hasSlash && !needsSlash) {
     return inputPath.substr(0, inputPath.length - 1);
   } else if (!hasSlash && needsSlash) {
+    // lgtm [js/trivial-conditional]
     return `${inputPath}/`;
   } else {
     return inputPath;

Composer/packages/client/config/paths.js

@@ -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/package.json

@@ -5,7 +5,7 @@ const proxySetting = require(paths.appPackageJson).proxy;
 
 module.exports = function (app) {
   const wsProxy = proxy(['/lg-language-server', '/lu-language-server', '/intellisense-language-server'], {
-    target: proxySetting.replace('/^http/', 'ws'),
+    target: proxySetting.replace(/^http/, 'ws'),
     changeOrigin: true,
     ws: true,
   });

Composer/packages/client/setupProxy.js

@@ -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>
+  );
+};