Adds helper in dev-only settings for launch counter (#4350)

packages/insomnia-app/app/ui/components/modals/settings-modal.tsx

@@ -13,7 +13,7 @@ import { Modal } from '../base/modal';
 import { ModalBody } from '../base/modal-body';
 import { ModalHeader } from '../base/modal-header';
 import { Account } from '../settings/account';
-import General from '../settings/general';
+import { General } from '../settings/general';
 import { ImportExport } from '../settings/import-export';
 import { Plugins } from '../settings/plugins';
 import { Shortcuts } from '../settings/shortcuts';
@@ -106,10 +106,7 @@ export class SettingsModal extends PureComponent<Props, State> {
               </Tab>
             </TabList>
             <TabPanel className="react-tabs__tab-panel pad scrollable">
-              <General
+              <General hideModal={this.hide} />
-                settings={settings}
-                hideModal={this.hide}
-              />
             </TabPanel>
             <TabPanel className="react-tabs__tab-panel pad scrollable">
               <ImportExport

packages/insomnia-app/app/ui/components/settings/general.tsx

@@ -1,15 +1,11 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { EnvironmentHighlightColorStyle, HttpVersion, HttpVersions, UpdateChannel } from 'insomnia-common';
 import { Tooltip } from 'insomnia-components';
-import React, { FC, Fragment, PureComponent } from 'react';
+import React, { FC, Fragment, useCallback } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
 import { trackEvent } from '../../../common/analytics';
-import type { GlobalActivity } from '../../../common/constants';
 import {
   ACTIVITY_MIGRATION,
-  AUTOBIND_CFG,
   EditorKeyMap,
   isDevelopment,
   isMac,
@@ -21,9 +17,10 @@ import {
 } from '../../../common/constants';
 import { docsKeyMaps } from '../../../common/documentation';
 import { strings } from '../../../common/strings';
-import type { Settings } from '../../../models/settings';
+import * as models from '../../../models';
 import { initNewOAuthSession } from '../../../network/o-auth-2/misc';
-import * as globalActions from '../../redux/modules/global';
+import { setActiveActivity } from '../../redux/modules/global';
+import { selectSettings, selectStats } from '../../redux/selectors';
 import { Link } from '../base/link';
 import { CheckForUpdatesButton } from '../check-for-updates-button';
 import { HelpTooltip } from '../help-tooltip';
@@ -46,22 +43,70 @@ const RestartTooltip: FC<{ message: string }> = ({ message }) => (
   </Fragment>
 );
 
+const DevelopmentOnlySettings: FC = () => {
+  const { launches } = useSelector(selectStats);
+
+  const onChangeLaunches = useCallback(async event => {
+    const launches = parseInt(event.target.value, 10);
+    await models.stats.update({ launches });
+  }, []);
+
+  if (!isDevelopment()) {
+    return null;
+  }
+
+  return (
+    <>
+      <hr className="pad-top" />
+      <h2>Development</h2>
+
+      <div className="form-row pad-top-sm">
+        <BooleanSetting
+          label="Has been prompted to migrate from Insomnia Designer"
+          setting="hasPromptedToMigrateFromDesigner"
+        />
+      </div>
+
+      <div className="form-row pad-top-sm">
+        <BooleanSetting
+          label="Has seen analytics prompt"
+          setting="hasPromptedAnalytics"
+        />
+      </div>
+
+      <div className="form-row pad-top-sm">
+        <div className="form-control form-control--outlined">
+          <label>
+            Stats.Launches
+            <HelpTooltip className="space-left">If you need this to be a certain value after restarting the app, then just subtract one from your desired value before you restart.  For example, if you want to simulate first launch, set it to 0 and when you reboot it will be 1.  Note that Shift+F5 does not actually restart since it only refreshes the renderer and thus will not increment `Stats.launches`.  This is because Stats.launches is incremented in the main process whereas refreshing the app with Shift+F5 doesn't retrigger that code path.</HelpTooltip>
+            <input
+              value={String(launches)}
+              min={0}
+              name="launches"
+              onChange={onChangeLaunches}
+              type={'number'}
+            />
+          </label>
+        </div>
+      </div>
+    </>
+  );
+};
+
 interface Props {
-  settings: Settings;
   hideModal: () => void;
-  handleSetActiveActivity: (activity?: GlobalActivity) => void;
 }
 
-@autoBindMethodsForReact(AUTOBIND_CFG)
+export const General: FC<Props> = ({ hideModal }) => {
-class General extends PureComponent<Props> {
+  const dispatch = useDispatch();
-  _handleStartMigration() {
+  const settings = useSelector(selectSettings);
+
+  const handleStartMigration = useCallback(() => {
     trackEvent('Data', 'Migration', 'Manual');
-    this.props.handleSetActiveActivity(ACTIVITY_MIGRATION);
+    dispatch(setActiveActivity(ACTIVITY_MIGRATION));
-    this.props.hideModal();
+    hideModal();
-  }
+  }, [hideModal, dispatch]);
 
-  render() {
-    const { settings } = this.props;
   return (
     <div className="pad-bottom">
       <div className="row-fill row-fill--top">
@@ -437,41 +482,12 @@ class General extends PureComponent<Props> {
 
       <h2>Migrate from Designer</h2>
       <div className="form-row--start pad-top-sm">
-          <button className="btn btn--clicky pointer" onClick={this._handleStartMigration}>
+        <button className="btn btn--clicky pointer" onClick={handleStartMigration}>
           Show migration workflow
         </button>
       </div>
 
-        {isDevelopment() && (
+      <DevelopmentOnlySettings />
-          <>
-            <hr className="pad-top" />
-            <h2>Development</h2>
-            <div className="form-row pad-top-sm">
-              <BooleanSetting
-                label="Has been prompted to migrate from Insomnia Designer"
-                setting="hasPromptedToMigrateFromDesigner"
-              />
-            </div>
-            <div className="form-row pad-top-sm">
-              <BooleanSetting
-                label="Has seen analytics prompt"
-                setting="hasPromptedAnalytics"
-              />
-            </div>
-          </>
-        )}
     </div>
   );
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  // @ts-expect-error -- TSCONVERSION
-  const global = bindActionCreators(globalActions, dispatch);
-  return {
-    // @ts-expect-error -- TSCONVERSION
-    handleSetActiveActivity: global.setActiveActivity,
 };
-}
-
-export default connect(null, mapDispatchToProps)(General);