feat: Adding feature flag infrastructure

Composer/packages/client/src/App.tsx

@@ -16,10 +16,15 @@ initializeIcons(undefined, { disableWarnings: true });
 
 export const App: React.FC = () => {
   const { appLocale } = useRecoilValue(userSettingsState);
+  const { fetchFeatureFlags } = useRecoilValue(dispatcherState);
   useEffect(() => {
     loadLocale(appLocale);
   }, [appLocale]);
 
+  useEffect(() => {
+    fetchFeatureFlags();
+  }, []);
+
   const { fetchExtensions } = useRecoilValue(dispatcherState);
   useEffect(() => {
     fetchExtensions();

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

@@ -48,6 +48,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     createNewBot,
     saveProjectAs,
     fetchProjectById,
+    fetchFeatureFlags,
   } = useRecoilValue(dispatcherState);
 
   const creationFlowStatus = useRecoilValue(creationFlowStatusState);

Composer/packages/client/src/pages/home/Home.tsx

@@ -10,6 +10,7 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { RouteComponentProps } from '@reach/router';
 import { navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
+import { Feature } from '@bfc/shared';
 
 import { CreationFlowStatus } from '../../constants';
 import { dispatcherState, botDisplayNameState } from '../../recoilModel';
@@ -18,6 +19,7 @@ import {
   templateProjectsState,
   templateIdState,
   currentProjectIdState,
+  featureFlagState,
 } from '../../recoilModel/atoms/appState';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 
@@ -66,6 +68,7 @@ const Home: React.FC<RouteComponentProps> = () => {
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const recentProjects = useRecoilValue(recentProjectsState);
   const templateId = useRecoilValue(templateIdState);
+  const featureFlagMap = useRecoilValue(featureFlagState);
   const { openProject, setCreationFlowStatus, onboardingAddCoachMarkRef, saveTemplateId } = useRecoilValue(
     dispatcherState
   );
@@ -135,7 +138,6 @@ const Home: React.FC<RouteComponentProps> = () => {
       disabled: botName ? false : true,
     },
   ];
-
   return (
     <div css={home.outline}>
       <Toolbar toolbarItems={toolbarItems} />
@@ -195,45 +197,47 @@ const Home: React.FC<RouteComponentProps> = () => {
               />
             </div>
           )}
-          <div css={home.leftContainer}>
-            <h2 css={home.subtitle}>{formatMessage('Video tutorials:')}&nbsp;</h2>
-            <div css={home.newBotContainer}>
-              {tutorials.map((item, index) => (
-                <ItemContainer
-                  key={index}
-                  ariaLabel={item.title}
-                  content={item.content}
-                  href={item.href}
-                  rel="noopener nofollow"
-                  styles={home.tutorialTile}
-                  subContent={item.subContent}
-                  target="_blank"
-                  title={item.title}
-                />
-              ))}
-              <div css={home.linkContainer}>
-                <div>
-                  {formatMessage(
-                    'Bot Framework provides the most comprehensive experience for building conversational applications.'
-                  )}
+          <Feature featureFlagMap={featureFlagMap} featureFlagName="Show Tutorial">
+            <div css={home.leftContainer}>
+              <h2 css={home.subtitle}>{formatMessage('Video tutorials:')}&nbsp;</h2>
+              <div css={home.newBotContainer}>
+                {tutorials.map((item, index) => (
+                  <ItemContainer
+                    key={index}
+                    ariaLabel={item.title}
+                    content={item.content}
+                    href={item.href}
+                    rel="noopener nofollow"
+                    styles={home.tutorialTile}
+                    subContent={item.subContent}
+                    target="_blank"
+                    title={item.title}
+                  />
+                ))}
+                <div css={home.linkContainer}>
+                  <div>
+                    {formatMessage(
+                      'Bot Framework provides the most comprehensive experience for building conversational applications.'
+                    )}
+                  </div>
+                  {linksButtom.map((link) => {
+                    return (
+                      <Link
+                        key={'homePageLeftLinks-' + link.text}
+                        href={link.to}
+                        rel="noopener noreferrer"
+                        style={{ width: '150px' }}
+                        tabIndex={0}
+                        target="_blank"
+                      >
+                        <div css={link.css}>{link.text}</div>
+                      </Link>
+                    );
+                  })}
                 </div>
-                {linksButtom.map((link) => {
-                  return (
-                    <Link
-                      key={'homePageLeftLinks-' + link.text}
-                      href={link.to}
-                      rel="noopener noreferrer"
-                      style={{ width: '150px' }}
-                      tabIndex={0}
-                      target="_blank"
-                    >
-                      <div css={link.css}>{link.text}</div>
-                    </Link>
-                  );
-                })}
               </div>
             </div>
-          </div>
+          </Feature>
         </div>
         <div aria-label={formatMessage('Example bot list')} css={home.rightPage} role="region">
           <h3 css={home.bluetitle}>{formatMessage(`Examples`)}</h3>

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

@@ -11,26 +11,29 @@ import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHi
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlag } from '@bfc/shared';
 
 import { isElectron } from '../../../utils/electronUtil';
-import { onboardingState, userSettingsState, dispatcherState } from '../../../recoilModel';
+import { onboardingState, userSettingsState, dispatcherState, featureFlagState } from '../../../recoilModel';
 
-import { container, section } from './styles';
+import { container, featureFlagGroupContainer, section } from './styles';
 import { SettingToggle } from './SettingToggle';
 import { SettingDropdown } from './SettingDropdown';
 import * as images from './images';
+import { FeatureFlagToggle } from './FeatureFlagToggle';
 
 const ElectronSettings = lazy(() =>
   import('./electronSettings').then((module) => ({ default: module.ElectronSettings }))
 );
 
 const AppSettings: React.FC<RouteComponentProps> = () => {
   const [calloutIsShown, showCallout] = useState(false);
+  const [featureFlagVisible, showFeatureFlag] = useState(false);
 
-  const { onboardingSetComplete, updateUserSettings } = useRecoilValue(dispatcherState);
+  const { onboardingSetComplete, updateUserSettings, setFeatureFlag } = useRecoilValue(dispatcherState);
   const userSettings = useRecoilValue(userSettingsState);
   const { complete } = useRecoilValue(onboardingState);
-
+  const featureFlags = useRecoilValue(featureFlagState);
   const onOnboardingChange = useCallback(
     (checked: boolean) => {
       // on means its not complete
@@ -62,6 +65,24 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
     });
   }
 
+  const renderFeatureFlagOptions = () => {
+    const result: JSX.Element[] = [];
+    Object.keys(featureFlags).forEach((key: string) => {
+      const featureFlag: FeatureFlag = featureFlags[key];
+      if (!featureFlag.isHidden) {
+        result.push(
+          <FeatureFlagToggle
+            description={featureFlag.description}
+            featureFlagName={key}
+            setFeatureFlag={setFeatureFlag}
+            value={featureFlag.value}
+          />
+        );
+      }
+    });
+    return <div css={featureFlagGroupContainer}>{result}</div>;
+  };
+
   return (
     <div css={container}>
       <section css={section}>
@@ -155,6 +176,19 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
           onChange={onLocaleChange}
         />
       </section>
+      <section css={section}>
+        <h2>{formatMessage('Application Updates')}</h2>
+        <SettingToggle
+          checked={featureFlagVisible}
+          description={formatMessage('Toggle the visibility of individual, preview, features in Composer.')}
+          image={images.previewFeatures}
+          title={formatMessage('Preview features')}
+          onToggle={(checked: boolean) => {
+            showFeatureFlag(checked);
+          }}
+        />
+        {featureFlagVisible && renderFeatureFlagOptions()}
+      </section>
       <Suspense fallback={<div />}>{renderElectronSettings && <ElectronSettings />}</Suspense>
     </div>
   );

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

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { FeatureFlag, FeatureFlagNames } from '@bfc/shared';
+
+import * as styles from './styles';
+
+type FeatureFlagToggleProps = {
+  featureFlagName: string;
+  description: string;
+  value: boolean;
+  setFeatureFlag: (featureFlagName: string, value: boolean) => {};
+};
+
+const renderLabel = (featureName: string, description: string) => (
+  props: any,
+  defaultRender?: (props: any) => JSX.Element | null
+) => {
+  return (
+    <span>
+      <span css={styles.featureFlagTitle}>{`${featureName}.`}</span>
+      {` ${description}`}
+    </span>
+  );
+};
+
+export const FeatureFlagToggle: React.FC<FeatureFlagToggleProps> = (props) => {
+  return (
+    <Checkbox
+      checked={props.value}
+      css={styles.featureFlagContainer}
+      onChange={(e: any, checked?: boolean) => {
+        if (checked !== undefined) {
+          props.setFeatureFlag(props.featureFlagName, checked);
+        }
+      }}
+      onRenderLabel={renderLabel(props.featureFlagName, props.description)}
+    />
+  );
+};

Composer/packages/client/src/pages/setting/app-settings/images/index.ts

@@ -8,5 +8,6 @@ import wordWrap from './word-wrap.svg';
 import autoUpdate from './auto-update.svg';
 import earlyAdopters from './early-adopters.svg';
 import language from './language.svg';
+import previewFeatures from './preview-features.svg';
 
-export { minimap, onboarding, lineNumbers, wordWrap, autoUpdate, earlyAdopters, language };
+export { minimap, onboarding, lineNumbers, wordWrap, autoUpdate, earlyAdopters, language, previewFeatures };

Composer/packages/client/src/pages/setting/app-settings/styles.ts

@@ -57,3 +57,16 @@ export const settingsDescription = css`
 export const image = css`
   width: 86px;
 `;
+
+export const featureFlagGroupContainer = css`
+  margin-left: 166px;
+  font-size: ${FontSizes.size12};
+`;
+
+export const featureFlagContainer = css`
+  margin-bottom: 15px;
+`;
+
+export const featureFlagTitle = css`
+  font-weight: ${FontWeights.semibold};
+`;

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { atom, atomFamily } from 'recoil';
-import { ProjectTemplate, UserSettings } from '@bfc/shared';
+import { FeatureFlagMap, ProjectTemplate, UserSettings } from '@bfc/shared';
 import { ExtensionMetadata } from '@bfc/extension-client';
 
 import {
@@ -101,6 +101,11 @@ export const userSettingsState = atom<UserSettings>({
   default: getUserSettings(),
 });
 
+export const featureFlagState = atom<FeatureFlagMap>({
+  key: getFullyQualifiedKey('featureFlag'),
+  default: {} as FeatureFlagMap,
+});
+
 export const announcementState = atom<string>({
   key: getFullyQualifiedKey('announcement'),
   default: '',

Composer/packages/client/src/recoilModel/dispatchers/application.ts

@@ -4,11 +4,19 @@
 
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 import debounce from 'lodash/debounce';
+import { FeatureFlagMap } from '@bfc/shared';
 
-import { appUpdateState, announcementState, onboardingState, creationFlowStatusState } from '../atoms/appState';
+import {
+  appUpdateState,
+  announcementState,
+  onboardingState,
+  creationFlowStatusState,
+  featureFlagState,
+} from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
 import { StateError, AppUpdateState } from '../../recoilModel/types';
+import httpClient from '../../utils/httpUtil';
 
 import { setError } from './shared';
 

Composer/packages/client/src/recoilModel/dispatchers/storage.ts

@@ -4,6 +4,7 @@
 import { useRecoilCallback, CallbackInterface } from 'recoil';
 import isArray from 'lodash/isArray';
 import formatMessage from 'format-message';
+import { FeatureFlagMap } from '@bfc/shared';
 
 import httpClient from '../../utils/httpUtil';
 import {
@@ -13,6 +14,7 @@ import {
   applicationErrorState,
   templateProjectsState,
   runtimeTemplatesState,
+  featureFlagState,
 } from '../atoms/appState';
 import { FileTypes } from '../../constants';
 import { getExtension } from '../../utils/fileUtil';
@@ -167,6 +169,30 @@ export const storageDispatcher = () => {
     }
   );
 
+  const fetchFeatureFlags = useRecoilCallback<[], Promise<void>>((callbackHelpers: CallbackInterface) => async () => {
+    const { set } = callbackHelpers;
+    try {
+      const response = await httpClient.get('/featureFlags/getFlags');
+      set(featureFlagState, response.data);
+    } catch (ex) {
+      logMessage(callbackHelpers, `Error fetching feature flag data: ${ex}`);
+    }
+  });
+
+  const setFeatureFlag = useRecoilCallback(
+    ({ set }: CallbackInterface) => async (featureName: string, value: boolean) => {
+      let newFeatureFlagState: FeatureFlagMap = {};
+      // update local
+      set(featureFlagState, (featureFlagState) => {
+        newFeatureFlagState = { ...featureFlagState };
+        newFeatureFlagState[featureName] = { ...featureFlagState[featureName], value: value };
+        return newFeatureFlagState;
+      });
+      // update server
+      await httpClient.post(`/featureFlags/updateFlags`, { featureFlags: newFeatureFlagState });
+    }
+  );
+
   return {
     fetchStorages,
     updateCurrentPathForStorage,
@@ -178,5 +204,7 @@ export const storageDispatcher = () => {
     updateFolder,
     fetchTemplates,
     fetchRuntimeTemplates,
+    fetchFeatureFlags,
+    setFeatureFlag,
   };
 };