fix: Disable onboarding

Composer/cypress/integration/Onboarding.spec.ts

@@ -15,7 +15,8 @@ context('Onboarding', () => {
     cy.visitPage('Design');
   });
 
-  it('walk through product tour teaching bubbles', () => {
+  // The onboarding test is disabled since we are temporarily disabling onboarding
+  xit('walk through product tour teaching bubbles', () => {
     cy.findByTestId('onboardingNextSet').click();
     cy.findByTestId('onboardingNext').click();
     cy.findByTestId('onboardingNext').click();

Composer/packages/client/__tests__/components/appSettings.test.tsx

@@ -18,14 +18,13 @@ describe('<AppSettings /> & <ElectronSettings />', () => {
   });
 
   it('should render the user settings page', () => {
-    const { getByText, getAllByText } = renderWithRecoil(<AppSettings />, ({ set }) => {
+    const { getByText } = renderWithRecoil(<AppSettings />, ({ set }) => {
       set(onboardingState, {
         coachMarkRefs: {},
         complete: false,
       });
     });
     // there are 2 onboarding texts
-    getAllByText('Onboarding');
     getByText('Property editor preferences');
     getByText('Application Updates');
   });

Composer/packages/client/src/components/AppComponents/Assistant.tsx

@@ -6,6 +6,8 @@ import { useRecoilValue } from 'recoil';
 import { Suspense, Fragment } from 'react';
 import React from 'react';
 
+import { onboardingDisabled } from '../../constants';
+
 import { isElectron } from './../../utils/electronUtil';
 import { appUpdateState, userSettingsState, onboardingState } from './../../recoilModel';
 
@@ -20,7 +22,8 @@ export const Assistant = () => {
 
   const renderDataCollectionDialog =
     isElectron() && !appUpdaterDialogShowing && typeof telemetry.allowDataCollection === 'undefined';
-  const renderOnboarding = !renderDataCollectionDialog && !appUpdaterDialogShowing && !onboarding.complete;
+  const renderOnboarding =
+    !onboardingDisabled && !renderDataCollectionDialog && !appUpdaterDialogShowing && !onboarding.complete;
   const renderAppUpdater = isElectron();
 
   return (

Composer/packages/client/src/constants.ts

@@ -409,3 +409,5 @@ export const runtimeOptions: IDropdownOption[] = [
   { key: defaultRuntime, text: 'Azure Web App' },
   { key: 'azureFunctions', text: 'Azure Functions' },
 ];
+
+export const onboardingDisabled = true;

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { lazy, useCallback, useState, Suspense } from 'react';
+import React, { lazy, useCallback, useState, Suspense } from 'react';
 import formatMessage from 'format-message';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
@@ -14,6 +14,7 @@ import { useRecoilValue } from 'recoil';
 
 import { isElectron } from '../../../utils/electronUtil';
 import { onboardingState, userSettingsState, dispatcherState } from '../../../recoilModel';
+import { onboardingDisabled } from '../../../constants';
 
 import { container, section } from './styles';
 import { SettingToggle } from './SettingToggle';
@@ -104,57 +105,61 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
             onChange={onLocaleChange}
           />
         </section>
-        <h2>{formatMessage('Onboarding')}</h2>
-        <SettingToggle
-          checked={!complete}
-          description={formatMessage('Introduction of key concepts and user experience elements for Composer.')}
-          id="onboardingToggle"
-          image={images.onboarding}
-          title={formatMessage('Onboarding')}
-          onToggle={onOnboardingChange}
-        />
-        <TeachingBubble
-          calloutProps={{
-            hidden: !calloutIsShown,
-            role: 'status',
-            directionalHint: DirectionalHint.rightCenter,
-            isBeakVisible: false,
-          }}
-          styles={{
-            bodyContent: {
-              padding: '0px',
-            },
-            body: {
-              margin: '0px',
-            },
-          }}
-          target="#onboardingToggle"
-        >
-          <div
-            css={css`
-              display: flex;
-              align-items: center;
-            `}
-          >
-            <div
-              css={css`
-                font-size: 24px;
-                background: ${NeutralColors.gray20};
-                color: black;
-                padding: 4px;
-              `}
-            >
-              <FontIcon iconName="SplitObject" />
-            </div>
-            <div
-              css={css`
-                padding-left: 8px;
-              `}
+        {!onboardingDisabled && (
+          <React.Fragment>
+            <h2>{formatMessage('Onboarding')}</h2>
+            <SettingToggle
+              checked={!complete}
+              description={formatMessage('Introduction of key concepts and user experience elements for Composer.')}
+              id="onboardingToggle"
+              image={images.onboarding}
+              title={formatMessage('Onboarding')}
+              onToggle={onOnboardingChange}
+            />
+            <TeachingBubble
+              calloutProps={{
+                hidden: !calloutIsShown,
+                role: 'status',
+                directionalHint: DirectionalHint.rightCenter,
+                isBeakVisible: false,
+              }}
+              styles={{
+                bodyContent: {
+                  padding: '0px',
+                },
+                body: {
+                  margin: '0px',
+                },
+              }}
+              target="#onboardingToggle"
             >
-              {formatMessage('Please return to Design View to start the Onboarding tutorial.')}
-            </div>
-          </div>
-        </TeachingBubble>
+              <div
+                css={css`
+                  display: flex;
+                  align-items: center;
+                `}
+              >
+                <div
+                  css={css`
+                    font-size: 24px;
+                    background: ${NeutralColors.gray20};
+                    color: black;
+                    padding: 4px;
+                  `}
+                >
+                  <FontIcon iconName="SplitObject" />
+                </div>
+                <div
+                  css={css`
+                    padding-left: 8px;
+                  `}
+                >
+                  {formatMessage('Please return to Design View to start the Onboarding tutorial.')}
+                </div>
+              </div>
+            </TeachingBubble>
+          </React.Fragment>
+        )}
       </section>
 
       <section css={section}>