Refactor NewFeatureDialog to only show once on form landing page

jsapp/js/components/anonymousSubmission.component.tsx

@@ -9,31 +9,18 @@ import NewFeatureDialog from './newFeatureDialog.component';
 interface AnonymousSubmissionProps {
   checked: boolean;
   onChange: (isChecked: boolean) => void;
-  modalType?: string | undefined;
-  stores?: any;
 }
 
 export default function AnonymousSubmission(props: AnonymousSubmissionProps) {
-  console.log('anon; stores', props.stores);
   return (
-    <div className={styles.root}>
-      <NewFeatureDialog
-        content={t(
-          'This feature was originally “Require authentication to see forms and submit data”. This is now a per-project setting.'
+    <>
+      <ToggleSwitch
+        checked={props.checked}
+        onChange={props.onChange}
+        label={t(
+          'Allow web submissions to this form without a username and password'
         )}
-        supportArticle={
-          envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL
-        }
-        disabled={props.modalType === MODAL_TYPES.SHARING}
-      >
-        <ToggleSwitch
-          checked={props.checked}
-          onChange={props.onChange}
-          label={t(
-            'Allow web submissions to this form without a username and password'
-          )}
-        />
-      </NewFeatureDialog>
+      />
       <a
         href={envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL}
         className='right-tooltip wrapped-tooltip'
@@ -44,6 +31,6 @@ export default function AnonymousSubmission(props: AnonymousSubmissionProps) {
       >
         <Icon size='s' name='help' color='storm' />
       </a>
-    </div>
+    </>
   );
 }

jsapp/js/components/formLanding.js

@@ -31,6 +31,8 @@ import {PERMISSIONS_CODENAMES} from 'js/components/permissions/permConstants';
 import ToggleSwitch from 'js/components/common/toggleSwitch';
 import {HELP_ARTICLE_ANON_SUBMISSIONS_URL} from 'js/constants';
 import AnonymousSubmission from './anonymousSubmission.component';
+import styles from './anonymousSubmission.module.scss';
+import NewFeatureDialog from './newFeatureDialog.component';
 
 const DVCOUNT_LIMIT_MINIMUM = 20;
 const ANON_CAN_ADD_PERM_URL = permConfig.getPermissionByCodename(
@@ -47,6 +49,7 @@ class FormLanding extends React.Component {
       nextPagesVersions: [],
       anonymousSubmissions: false,
       anonymousPermissions: [],
+      shouldShowNewFeatureDialog: false,
     };
     autoBind(this);
   }
@@ -81,7 +84,9 @@ class FormLanding extends React.Component {
     const permission = this.state.anonymousPermissions.find(
       (perm) =>
         perm.permission ===
-        permConfig.getPermissionByCodename(PERMISSIONS_CODENAMES.add_submissions).url
+        permConfig.getPermissionByCodename(
+          PERMISSIONS_CODENAMES.add_submissions
+        ).url
     );
     if (this.state.anonymousSubmissions) {
       actions.permissions.removeAssetPermission(
@@ -170,6 +175,9 @@ class FormLanding extends React.Component {
   }
   showSharingModal(evt) {
     evt.preventDefault();
+    stores.pageState._onHideModal = () => {
+      this.setState({shouldShowNewFeatureDialog: true});
+    };
     stores.pageState.showModal({
       type: MODAL_TYPES.SHARING,
       assetid: this.state.uid,
@@ -426,12 +434,22 @@ class FormLanding extends React.Component {
             <bem.FormView__cell
               m={['padding', 'anonymous-submissions', 'bordertop']}
             >
-              <AnonymousSubmission
-                checked={this.state.anonymousSubmissions}
-                onChange={() => this.updateAssetAnonymousSubmissions()}
-                modalType={stores.pageState.state.modal?.type}
-                stores={stores.pageState.state}
-              />
+              <NewFeatureDialog
+                className={styles.root}
+                content={t(
+                  'This feature was originally “Require authentication to see forms and submit data”. This is now a per-project setting.'
+                )}
+                supportArticle={
+                  envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL
+                }
+                featureKey='anonymousSubmissions'
+                disabled={stores.pageState.state?.modal}
+              >
+                <AnonymousSubmission
+                  checked={this.state.anonymousSubmissions}
+                  onChange={() => this.updateAssetAnonymousSubmissions()}
+                />
+              </NewFeatureDialog>
             </bem.FormView__cell>
           )}
         </bem.FormView__cell>

jsapp/js/components/newFeatureDialog.component.tsx

@@ -1,9 +1,17 @@
 import React, {useState, useEffect} from 'react';
 import Button from 'js/components/common/button';
 import styles from './newFeatureDialog.module.scss';
+import cx from 'classnames';
 
 interface NewFeatureDialogProps {
   children: React.ReactNode;
+  className?: string;
+  /**
+   * Used to differentiate between dialogs for different features.
+   * Tip: Use the feature name. It's added to the end of the localstorage key.
+   * If two or more dialogs have the same featureKey, clicking one should dismiss all of them.
+   */
+  featureKey: string;
   content: string;
   supportArticle?: string;
   /**
@@ -13,27 +21,30 @@ interface NewFeatureDialogProps {
   disabled?: boolean;
 }
 
-export default function NewFeatureDialog(props: NewFeatureDialogProps) {
+export default function NewFeatureDialog({
+  children,
+  className = '',
+  featureKey,
+  content,
+  supportArticle,
+  disabled = false,
+}: NewFeatureDialogProps) {
   const [showDialog, setShowDialog] = useState<boolean>(false);
 
   useEffect(() => {
-    const dialogStatus = localStorage.getItem('dialogStatus');
-    if (!dialogStatus) {
-      setShowDialog(true);
-    }
-  }, []);
+    const dialogStatus = localStorage.getItem(`kpiDialogStatus-${featureKey}`);
+    setShowDialog(!dialogStatus);
+  }, [disabled]);
 
   function closeDialog() {
-    localStorage.setItem('dialogStatus', 'shown');
+    localStorage.setItem(`kpiDialogStatus-${featureKey}`, 'shown');
     setShowDialog(!showDialog);
   }
 
-  console.log('diabled?', props.disabled);
-
   return (
-    <div className={styles.root}>
-      <div className={styles.wrapper}>{props.children}</div>
-      {showDialog && !props.disabled && (
+    <div className={cx(styles.root, {className: className})}>
+      <div className={styles.wrapper}>{children}</div>
+      {showDialog && !disabled && (
         <div className={styles.dialog}>
           <div className={styles.header}>
             {t('New feature')}
@@ -46,11 +57,11 @@ export default function NewFeatureDialog(props: NewFeatureDialogProps) {
             />
           </div>
           <div className={styles.content}>
-            {props.content}
+            {content}
             &nbsp;
-            {props.supportArticle && (
+            {supportArticle && (
               <a
-                href={props.supportArticle}
+                href={supportArticle}
                 target='_blank'
                 className={styles.support}
               >

jsapp/js/components/permissions/publicShareSettings.component.tsx

@@ -12,6 +12,9 @@ import envStore from 'js/envStore';
 import Icon from 'js/components/common/icon';
 import ToggleSwitch from 'js/components/common/toggleSwitch';
 import AnonymousSubmission from '../anonymousSubmission.component';
+import styles from 'js/components/anonymousSubmission.module.scss';
+import {stores} from 'js/stores';
+import NewFeatureDialog from 'js/components/newFeatureDialog.component';
 
 const HELP_ARTICLE_ANON_SUBMISSIONS_URL = 'managing_permissions.html';
 
@@ -71,10 +74,21 @@ class PublicShareSettings extends React.Component<PublicShareSettingsProps> {
     return (
       <bem.FormModal__item m='permissions'>
         <bem.FormModal__item m='anonymous-submissions'>
-          <AnonymousSubmission
-            checked={anonCanAddData}
-            onChange={this.togglePerms.bind(this, 'add_submissions')}
-          />
+          <NewFeatureDialog
+            className={styles.root}
+            content={t(
+              'This feature was originally “Require authentication to see forms and submit data”. This is now a per-project setting.'
+            )}
+            supportArticle={
+              envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL
+            }
+            featureKey='anonymousSubmissions'
+          >
+            <AnonymousSubmission
+              checked={anonCanAddData}
+              onChange={this.togglePerms.bind(this, 'add_submissions')}
+            />
+          </NewFeatureDialog>
         </bem.FormModal__item>
 
         <bem.FormModal__item m='permissions-header'>

jsapp/js/stores.d.ts

@@ -1,33 +1,34 @@
 interface PageStateModalParams {
-  type: string // one of MODAL_TYPES.NEW_FORM
-  [name: string]: any
+  type: string; // one of MODAL_TYPES.NEW_FORM
+  [name: string]: any;
 }
 
 // TODO: either change whole `stores.es6` to `stores.ts` or crete a type
 // definition for a store you need.
 export namespace stores {
-  const tags: any
-  const surveyState: any
-  const assetSearch: any
-  const translations: any
+  const tags: any;
+  const surveyState: any;
+  const assetSearch: any;
+  const translations: any;
   const pageState: {
     state: {
       assetNavExpanded: boolean;
       showFixedDrawer: boolean;
+      modal?: {} | false;
     };
     toggleFixedDrawer: () => void;
     showModal: (params: PageStateModalParams) => void;
     hideModal: () => void;
     switchModal: (params: PageStateModalParams) => void;
     switchToPreviousModal: () => void;
     hasPreviousModal: () => boolean;
-  }
-  const snapshots: any
+  };
+  const snapshots: any;
   const session: {
     listen: (clb: Function) => void;
-    currentAccount: AccountResponse
-    isAuthStateKnown: boolean
-    isLoggedIn: boolean
-  }
-  const allAssets: any
+    currentAccount: AccountResponse;
+    isAuthStateKnown: boolean;
+    isLoggedIn: boolean;
+  };
+  const allAssets: any;
 }