feat: new validation pipeline - schema existence validation

Composer/packages/client/src/components/BotRuntimeController/ErrorCallout.tsx

@@ -33,8 +33,8 @@ const descriptionText = css`
 `;
 
 const descriptionLongText = css`
-  overflow: auto;
   font-size: small;
+  white-space: pre-wrap;
 `;
 const descriptionShow = css``;
 const descriptionHide = css`

Composer/packages/client/src/components/GetStarted/GetStarted.tsx

@@ -5,8 +5,9 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import formatMessage from 'format-message';
-import { Panel, IPanelStyles } from 'office-ui-fabric-react/lib/Panel';
-import { Pivot, PivotItem, IPivotStyles } from 'office-ui-fabric-react/lib/Pivot';
+import { Panel, IPanelStyles, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 import { GetStartedNextSteps } from './GetStartedNextSteps';
 import { GetStartedLearn } from './GetStartedLearn';
@@ -25,45 +26,35 @@ const panelStyles = {
   root: {
     marginTop: 50,
   },
-  navigation: {
-    display: 'block',
-    height: 'auto',
-  },
 } as IPanelStyles;
 
-const pivotStyles = { root: { paddingLeft: 20, paddingTop: 10, width: '100%' } } as IPivotStyles;
-
 export const GetStarted: React.FC<GetStartedProps> = (props) => {
   const { projectId, onDismiss } = props;
 
   const renderTabs = () => {
     return (
-      <Pivot styles={pivotStyles}>
-        <PivotItem headerText={formatMessage('Next steps')}>
-          <GetStartedNextSteps {...props} />
-        </PivotItem>
-        <PivotItem headerText={formatMessage('Learning')}>
-          <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
-        </PivotItem>
-      </Pivot>
+      <Stack grow styles={{ root: { alignSelf: 'flex-start', padding: '0 20px' } }}>
+        <Pivot>
+          <PivotItem headerText={formatMessage('Next steps')}>
+            <GetStartedNextSteps {...props} />
+          </PivotItem>
+          <PivotItem headerText={formatMessage('Learning')}>
+            <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
+          </PivotItem>
+        </Pivot>
+      </Stack>
     );
   };
 
-  const onRenderNavigationContent = React.useCallback(
-    (props, defaultRender) => (
-      <div css={{ position: 'absolute', top: 15, right: 0, zIndex: 1 }}>{defaultRender(props)}</div>
-    ),
-    []
-  );
-
   return (
     <Panel
+      customWidth="395px"
       isBlocking={false}
       isOpen={props.isOpen}
       styles={panelStyles}
+      type={PanelType.custom}
       onDismiss={props.onDismiss}
       onRenderHeader={renderTabs}
-      onRenderNavigationContent={onRenderNavigationContent}
     />
   );
 };

Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx

@@ -18,6 +18,8 @@ import { dispatcherState, settingsState } from '../../recoilModel';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 import { navigateTo } from '../../utils/navigation';
+import { DisableFeatureToolTip } from '../DisableFeatureToolTip';
+import { usePVACheck } from '../../hooks/usePVACheck';
 
 import { GetStartedTask } from './GetStartedTask';
 import { NextSteps } from './types';
@@ -48,6 +50,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
 
   const [highlightLUIS, setHighlightLUIS] = useState<boolean>(false);
   const [highlightQNA, setHighlightQNA] = useState<boolean>(false);
+  const isPVABot = usePVACheck(projectId);
 
   const hideManageLuis = () => {
     setDisplayManageLuis(false);
@@ -131,6 +134,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             setDisplayManageLuis(true);
           }
         },
+        isDisabled: isPVABot,
       });
     }
     if (props.requiresQNA) {
@@ -151,6 +155,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             setDisplayManageQNA(true);
           }
         },
+        isDisabled: isPVABot,
       });
     }
     setRequiredNextSteps(newNextSteps);
@@ -170,6 +175,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'publishing', priority: 'recommended' });
           openLink(linkToPublishProfile);
         },
+        isDisabled: false,
       });
     }
     setRecommendedNextSteps(newRecomendedSteps);
@@ -185,6 +191,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'packages', priority: 'optional' });
           openLink(linkToPackageManager);
         },
+        isDisabled: isPVABot,
       },
       {
         key: 'editlg',
@@ -196,6 +203,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'editlg', priority: 'optional' });
           openLink(linkToLGEditor);
         },
+        isDisabled: false,
       },
       {
         key: 'editlu',
@@ -207,6 +215,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'editlu', priority: 'optional' });
           openLink(linkToLUEditor);
         },
+        isDisabled: false,
       },
       {
         key: 'insights',
@@ -220,6 +229,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'insights', priority: 'optional' });
           openLink(linkToAppInsights);
         },
+        isDisabled: isPVABot,
       },
       {
         key: 'devops',
@@ -231,6 +241,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'devops', priority: 'optional' });
           openLink(linkToDevOps);
         },
+        isDisabled: false,
       },
     ];
 
@@ -245,12 +256,19 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
           TelemetryClient.track('GettingStartedActionClicked', { taskName: 'connections', priority: 'optional' });
           openLink(linkToConnections);
         },
+        isDisabled: isPVABot,
       });
     }
 
     setOptionalSteps(optSteps);
   }, [botProject, props.requiresLUIS, props.requiresQNA, props.showTeachingBubble]);
 
+  const getStartedTaskElement = (step: NextSteps) => (
+    <DisableFeatureToolTip key={'disableToolTip-' + step.key} isPVABot>
+      <GetStartedTask key={step.key} step={step} />
+    </DisableFeatureToolTip>
+  );
+
   return (
     <ScrollablePane styles={{ root: { marginTop: 60 } }}>
       <div css={{ paddingTop: 20, paddingLeft: 27, paddingRight: 20 }}>
@@ -304,27 +322,21 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
         {requiredNextSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Required')}</h3>
-            {requiredNextSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {requiredNextSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
 
         {recommendedNextSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Recommended')}</h3>
-            {recommendedNextSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {recommendedNextSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
 
         {optionalSteps.length ? (
           <div>
             <h3 style={h3Style}>{formatMessage('Optional')}</h3>
-            {optionalSteps.map((step) => (
-              <GetStartedTask key={step.key} step={step} />
-            ))}
+            {optionalSteps.map((step) => getStartedTaskElement(step))}
           </div>
         ) : null}
       </div>

Composer/packages/client/src/components/GetStarted/GetStartedTask.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import React from 'react';
 import { FluentTheme, SharedColors } from '@uifabric/fluent-theme';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
@@ -15,6 +15,12 @@ type TaskProps = {
   step: NextSteps;
 };
 
+const getStartedStepStyle = (disabled?: boolean) => css`
+  margin-bottom: 20px;
+  pointer-events: ${disabled ? 'none' : 'auto'};
+  opacity: ${disabled ? 0.4 : 1};
+`;
+
 export const GetStartedTask: React.FC<TaskProps> = (props) => {
   const icon = props.step.checked ? 'CompletedSolid' : props.step.required ? 'Error' : 'Completed';
   const color = props.step.checked
@@ -23,7 +29,7 @@ export const GetStartedTask: React.FC<TaskProps> = (props) => {
     ? SharedColors.orange20
     : SharedColors.cyanBlue10;
   return (
-    <div css={{ marginBottom: 20 }}>
+    <div css={getStartedStepStyle(props.step.isDisabled)}>
       <ActionButton
         iconProps={{ iconName: icon, id: props.step.key }}
         styles={{

Composer/packages/client/src/components/GetStarted/types.ts

@@ -10,4 +10,5 @@ export type NextSteps = {
   label: string;
   onClick: (step?: NextSteps) => void;
   highlight?: (step?: NextSteps) => void;
+  isDisabled: boolean;
 };

Composer/packages/client/src/components/Header.tsx

@@ -158,7 +158,7 @@ export const Header = () => {
   const locale = useRecoilValue(localeState(projectId));
   const appUpdate = useRecoilValue(appUpdateState);
   const [teachingBubbleVisibility, setTeachingBubbleVisibility] = useState<boolean>();
-  const [showGetStartedTeachingBubble, setshowGetStartedTeachingBubble] = useState<boolean>(false);
+  const [showGetStartedTeachingBubble, setShowGetStartedTeachingBubble] = useState<boolean>(false);
   const settings = useRecoilValue(settingsState(projectId));
   const isWebChatPanelVisible = useRecoilValue(isWebChatPanelVisibleState);
   const botProjectSolutionLoaded = useRecoilValue(botProjectSpaceLoadedState);
@@ -213,10 +213,10 @@ export const Header = () => {
   // pop out get started if #getstarted is in the URL
   useEffect(() => {
     if (location.hash === '#getstarted') {
-      setshowGetStartedTeachingBubble(true);
+      setShowGetStartedTeachingBubble(true);
       setShowGetStarted(true);
     } else {
-      setshowGetStartedTeachingBubble(false);
+      setShowGetStartedTeachingBubble(false);
     }
   }, [location]);
 
@@ -386,7 +386,7 @@ export const Header = () => {
       <Panel
         isHiddenOnDismiss
         closeButtonAriaLabel={formatMessage('Close')}
-        customWidth={'395px'}
+        customWidth="395px"
         headerText={projectName}
         isBlocking={false}
         isOpen={isWebChatPanelVisible}
@@ -418,20 +418,21 @@ export const Header = () => {
             isWebChatPanelVisible={isWebChatPanelVisible}
           />
         ) : null}
-        <GetStarted
-          isOpen={botProjectSolutionLoaded && showGetStarted}
-          projectId={rootBotProjectId}
-          requiresLUIS={requiresLUIS}
-          requiresQNA={requiresQNA}
-          showTeachingBubble={botProjectSolutionLoaded && showGetStartedTeachingBubble}
-          onBotReady={() => {
-            setShowTeachingBubble(true);
-          }}
-          onDismiss={() => {
-            toggleGetStarted(false);
-          }}
-        />
       </Panel>
+
+      <GetStarted
+        isOpen={botProjectSolutionLoaded && showGetStarted}
+        projectId={rootBotProjectId}
+        requiresLUIS={requiresLUIS}
+        requiresQNA={requiresQNA}
+        showTeachingBubble={botProjectSolutionLoaded && showGetStartedTeachingBubble}
+        onBotReady={() => {
+          setShowTeachingBubble(true);
+        }}
+        onDismiss={() => {
+          toggleGetStarted(false);
+        }}
+      />
     </div>
   );
 };

Composer/packages/client/src/components/NavItem.tsx

@@ -42,6 +42,7 @@ const link = (active: boolean, disabled: boolean) => css`
     : `&:hover {
       background-color: ${NeutralColors.gray50};
     }
+
     &:focus {
       outline: none;
       .ms-Fabric--isFocusVisible &::after {

Composer/packages/client/src/components/Notifications/NotificationContainer.tsx

@@ -4,23 +4,28 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import isEmpty from 'lodash/isEmpty';
+import { Layer } from 'office-ui-fabric-react/lib/Layer';
 import { useRecoilValue } from 'recoil';
 
 import { dispatcherState } from '../../recoilModel';
 import { notificationsSelector } from '../../recoilModel/selectors/notifications';
+import { zIndices } from '../../utils/zIndices';
 
 import { NotificationCard } from './NotificationCard';
 
 // -------------------- Styles -------------------- //
 
 const container = css`
   cursor: default;
+  top: 50px;
+  height: calc(100vh - 50px);
   position: absolute;
   right: 0px;
   padding: 6px;
-  z-index: 1;
 `;
 
+const layerStyles = { root: { zIndex: zIndices.notificationContainer } };
+
 // -------------------- NotificationContainer -------------------- //
 
 export const NotificationContainer = () => {
@@ -30,18 +35,20 @@ export const NotificationContainer = () => {
   if (isEmpty(notifications)) return null;
 
   return (
-    <div css={container} role="presentation">
-      {notifications.map((item) => {
-        return (
-          <NotificationCard
-            key={item.id}
-            cardProps={item}
-            id={item.id}
-            onDismiss={deleteNotification}
-            onHide={hideNotification}
-          />
-        );
-      })}
-    </div>
+    <Layer styles={layerStyles}>
+      <div css={container} role="presentation">
+        {notifications.map((item) => {
+          return (
+            <NotificationCard
+              key={item.id}
+              cardProps={item}
+              id={item.id}
+              onDismiss={deleteNotification}
+              onHide={hideNotification}
+            />
+          );
+        })}
+      </div>
+    </Layer>
   );
 };