feat: tags folder experimental (#10)

* feat: hide native folders behind experimental flag * fix: better tags resizing * fix: merge global window * style: rename params * refactor: remove level of indirection in feature toggle
standardnotes · Dec 14, 2021 · 9a1b9d7 · 9a1b9d7
1 parent eeea323
commit 9a1b9d7
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/app/assets/javascripts/app.ts b/app/assets/javascripts/app.ts
@@ -10,6 +10,13 @@ declare global {
     _plans_url?: string;
     // eslint-disable-next-line camelcase
     _dashboard_url?: string;
+    // eslint-disable-next-line camelcase
+    _default_sync_server: string;
+    // eslint-disable-next-line camelcase
+    _enable_unfinished_features: boolean;
+    // eslint-disable-next-line camelcase
+    _websocket_url: string;
+    startApplication?: StartApplication;
   }
 }
 
@@ -216,11 +223,11 @@ const startApplication: StartApplication = async function startApplication(
 
 if (IsWebPlatform) {
   startApplication(
-    (window as any)._default_sync_server as string,
+    window._default_sync_server,
     new BrowserBridge(AppVersion),
-    (window as any)._enable_unfinished_features as boolean,
-    (window as any)._websocket_url as string
+    window._enable_unfinished_features,
+    window._websocket_url
   );
 } else {
-  (window as any).startApplication = startApplication;
+  window.startApplication = startApplication;
 }
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -306,14 +306,16 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
             onClose={closeQuickSettingsMenu}
             isEnabled={focusModeEnabled}
           />
-          <TagNestingSwitch
-            application={application}
-            onToggle={(x) => {
-              appState.features.hasFolders = x;
-            }}
-            isEnabled={appState.features.hasFolders}
-            onClose={closeQuickSettingsMenu}
-          />
+          {appState.features.hasUnfinishedFoldersFeature && (
+            <TagNestingSwitch
+              application={application}
+              onToggle={(checked: boolean) => {
+                appState.features.hasFolders = checked;
+              }}
+              isEnabled={appState.features.hasFolders}
+              onClose={closeQuickSettingsMenu}
+            />
+          )}
           <div className="h-1px my-2 bg-border"></div>
           <button
             className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"

diff --git a/app/assets/javascripts/ui_models/app_state/app_state.ts b/app/assets/javascripts/ui_models/app_state/app_state.ts
@@ -57,8 +57,8 @@ export enum EventSource {
 type ObserverCallback = (event: AppStateEvent, data?: any) => Promise<void>;
 
 export class AppState {
-  readonly enableUnfinishedFeatures: boolean = (window as any)
-    ?._enable_unfinished_features;
+  readonly enableUnfinishedFeatures: boolean =
+    window?._enable_unfinished_features;
 
   $rootScope: ng.IRootScopeService;
   $timeout: ng.ITimeoutService;

diff --git a/app/assets/javascripts/ui_models/app_state/features_state.ts b/app/assets/javascripts/ui_models/app_state/features_state.ts
@@ -11,20 +11,23 @@ import { WebApplication } from '../application';
  * and eventually for in-development features (feature flags).
  */
 export class FeaturesState {
+  readonly hasUnfinishedFeatures: boolean = window?._enable_unfinished_features;
+
   _hasFolders = false;
   private unsub: () => void;
 
   constructor(private application: WebApplication) {
-    this._hasFolders = this.hasFolderFeature();
+    this._hasFolders = this.hasFoldersFeature();
 
     makeObservable(this, {
       _hasFolders: observable,
       hasFolders: computed,
+      hasUnfinishedFoldersFeature: computed,
     });
 
     this.unsub = this.application.addEventObserver(async () => {
       runInAction(() => {
-        this._hasFolders = this.hasFolderFeature();
+        this._hasFolders = this.hasFoldersFeature();
       });
     }, ApplicationEvent.FeaturesUpdated);
   }
@@ -33,10 +36,19 @@ export class FeaturesState {
     this.unsub();
   }
 
-  public hasFolderFeature(): boolean {
+  public get hasUnfinishedFoldersFeature(): boolean {
+    return this.hasUnfinishedFeatures;
+  }
+
+  public hasFoldersFeature(): boolean {
+    if (!this.hasUnfinishedFoldersFeature) {
+      return false;
+    }
+
     const status = this.application.getFeatureStatus(
       FeatureIdentifier.TagNesting
     );
+
     return status === FeatureStatus.Entitled;
   }
 
@@ -50,7 +62,7 @@ export class FeaturesState {
       return;
     }
 
-    if (!this.hasFolderFeature()) {
+    if (!this.hasFoldersFeature()) {
       this.application.alertService?.alert(
         'Tag Folders requires at least a Plus Subscription.'
       );

diff --git a/app/assets/stylesheets/_tags.scss b/app/assets/stylesheets/_tags.scss
@@ -111,6 +111,7 @@
         cursor: pointer;
         text-overflow: ellipsis;
         width: 75%;
+        flex-grow: 1;
 
         // Required for Safari to avoid highlighting when dragging panel resizers
         // Make sure to undo if it's selected (for editing)