feat: setup supported features "deck or/and doc" (#1463)

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/components/core/app-menu/app-menu.tsx

@@ -7,6 +7,9 @@ import {cloud} from '../../../utils/core/environment.utils';
 
 import {AppIcon} from '../app-icon/app-icon';
 
+import {EnvironmentAppConfig, EnvironmentAppConfigFeature} from '../../../config/environment-config';
+import {EnvironmentConfigService} from '../../../services/environment/environment-config.service';
+
 @Component({
   tag: 'app-menu',
   styleUrl: 'app-menu.scss',
@@ -15,6 +18,8 @@ import {AppIcon} from '../app-icon/app-icon';
 export class AppMenu {
   @Element() el: HTMLElement;
 
+  private features: EnvironmentAppConfigFeature[] = EnvironmentConfigService.getInstance().get<EnvironmentAppConfig>('app').features;
+
   private signIn: boolean = cloud();
 
   render() {
@@ -61,6 +66,10 @@ export class AppMenu {
       return undefined;
     }
 
+    if (!this.features.includes('deck')) {
+      return undefined;
+    }
+
     return (
       <ion-item button href="/decks" routerDirection="forward">
         <AppIcon name="deck" path="icons" ariaLabel="" ariaHidden={true} lazy={true} slot="start"></AppIcon>
@@ -74,6 +83,10 @@ export class AppMenu {
       return undefined;
     }
 
+    if (!this.features.includes('doc')) {
+      return undefined;
+    }
+
     return (
       <ion-item button href="/docs" routerDirection="forward">
         <AppIcon name="doc" path="icons" ariaLabel="" ariaHidden={true} lazy={true} slot="start"></AppIcon>
@@ -96,6 +109,10 @@ export class AppMenu {
   }
 
   private renderInteract() {
+    if (!this.features.includes('deck')) {
+      return undefined;
+    }
+
     return (
       <Fragment>
         <ion-item button href="/poll" routerDirection="forward">

studio/src/app/config/environment-config.ts

@@ -32,8 +32,11 @@ export interface EnvironmentDeckDeckGoConfig {
   socketUrl: string;
 }
 
+export type EnvironmentAppConfigFeature = 'doc' | 'deck';
+
 export interface EnvironmentAppConfig {
   mock: boolean;
+  features: [EnvironmentAppConfigFeature, ...EnvironmentAppConfigFeature[]];
 }
 
 export interface EnvironmentCloudApi {

studio/src/app/pages/editor/app-editor.tsx

@@ -12,6 +12,9 @@ import {initSyncState, sync} from '../../providers/sync/sync.provider';
 import {worker} from '../../workers/sync.worker.ts?worker';
 import {startSyncTimer, stopSyncTimer} from '../../workers/sync.worker';
 
+import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
+import {EnvironmentAppConfig} from '../../config/environment-config';
+
 @Component({
   tag: 'app-editor',
   styleUrl: 'app-editor.scss'
@@ -59,8 +62,10 @@ export class AppDeckEditor implements ComponentInterface {
   }
 
   private async init() {
+    const {features} = EnvironmentConfigService.getInstance().get<EnvironmentAppConfig>('app');
+
     const editor: Editor | undefined = await getEdit();
-    this.type = editor?.type || 'deck';
+    this.type = editor?.type || features[0];
   }
 
   private async destroy() {

studio/src/app/popovers/core/nav/app-new/app-new.scss

@@ -9,7 +9,7 @@ app-new {
 
     justify-items: center;
 
-    padding: 8px 16px 16px;
+    padding: 8px 16px;
 
     button {
       grid-row-start: 2;
@@ -61,9 +61,9 @@ app-new {
   }
 
   p {
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-normal);
     text-align: center;
-    padding: 8px 32px 14px;
+    padding: 16px 32px;
     margin: 0;
   }
 }

studio/src/app/popovers/core/nav/app-new/app-new.tsx

@@ -2,6 +2,8 @@ import {ComponentInterface, h, Component, Element, Host, State} from '@stencil/c
 
 import i18n from '../../../../stores/i18n.store';
 import {AppIcon} from '../../../../components/core/app-icon/app-icon';
+import {EnvironmentAppConfig, EnvironmentAppConfigFeature} from '../../../../config/environment-config';
+import {EnvironmentConfigService} from '../../../../services/environment/environment-config.service';
 
 @Component({
   tag: 'app-new',
@@ -13,42 +15,54 @@ export class AppNew implements ComponentInterface {
   @State()
   private type: 'deck' | 'doc' | undefined;
 
+  private features: EnvironmentAppConfigFeature[] = EnvironmentConfigService.getInstance().get<EnvironmentAppConfig>('app').features;
+
   async closePopover(confirm: boolean) {
     if (!confirm) {
       await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss();
       return;
     }
 
-    await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(this.type);
+    await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss(this.type || this.features[0]);
   }
 
   render() {
     return (
       <Host>
-        <div class="type">
-          <div>{this.type === 'doc' && <mark>{i18n.state.tools.new_experimental}</mark>}</div>
-
-          <article>
-            <button onClick={() => (this.type = 'deck')} class={`ion-activatable ${this.type === 'deck' ? 'selected' : ''}`}>
-              <ion-ripple-effect></ion-ripple-effect>
-              <AppIcon name="deck" path="icons" ariaLabel="" ariaHidden={true} lazy={false} slot="start"></AppIcon>
-              <ion-label>{i18n.state.tools.new_deck}</ion-label>
-            </button>
-          </article>
-
-          <article>
-            <button onClick={() => (this.type = 'doc')} class={`ion-activatable ${this.type === 'doc' ? 'selected' : ''}`}>
-              <ion-ripple-effect></ion-ripple-effect>
-              <AppIcon name="doc" path="icons" ariaLabel="" ariaHidden={true} lazy={false} slot="start"></AppIcon>
-              <ion-label>{i18n.state.tools.new_doc}</ion-label>
-            </button>
-          </article>
-        </div>
+        {this.renderTypes()}
 
         <p>{i18n.state.tools.new_warning_text}</p>
 
         <app-popover-confirm onConfirm={({detail}: CustomEvent<boolean>) => this.closePopover(detail)}></app-popover-confirm>
       </Host>
     );
   }
+
+  private renderTypes() {
+    if (this.features.length === 1) {
+      return undefined;
+    }
+
+    return (
+      <div class="type">
+        <div>{this.type === 'doc' && <mark>{i18n.state.tools.new_experimental}</mark>}</div>
+
+        <article>
+          <button onClick={() => (this.type = 'deck')} class={`ion-activatable ${this.type === 'deck' ? 'selected' : ''}`}>
+            <ion-ripple-effect></ion-ripple-effect>
+            <AppIcon name="deck" path="icons" ariaLabel="" ariaHidden={true} lazy={false} slot="start"></AppIcon>
+            <ion-label>{i18n.state.tools.new_deck}</ion-label>
+          </button>
+        </article>
+
+        <article>
+          <button onClick={() => (this.type = 'doc')} class={`ion-activatable ${this.type === 'doc' ? 'selected' : ''}`}>
+            <ion-ripple-effect></ion-ripple-effect>
+            <AppIcon name="doc" path="icons" ariaLabel="" ariaHidden={true} lazy={false} slot="start"></AppIcon>
+            <ion-label>{i18n.state.tools.new_doc}</ion-label>
+          </button>
+        </article>
+      </div>
+    );
+  }
 }

studio/src/global/app-dev.ts

@@ -37,7 +37,8 @@ import {setupConfig as setupDeckGoConfig} from '../app/config/environment-config
 
 setupDeckGoConfig({
   app: {
-    mock: true
+    mock: true,
+    features: ['deck', 'doc']
   },
   deckdeckgo: {
     website: 'https://deckdeckgo.com',

studio/src/global/app-ic.ts

@@ -37,7 +37,8 @@ import {setupConfig as setupDeckGoConfig} from '../app/config/environment-config
 
 setupDeckGoConfig({
   app: {
-    mock: false
+    mock: false,
+    features: ['doc']
   },
   deckdeckgo: {
     website: 'https://deckdeckgo.com',

studio/src/global/app-staging.ts

@@ -37,7 +37,8 @@ import {setupConfig as setupDeckGoConfig} from '../app/config/environment-config
 
 setupDeckGoConfig({
   app: {
-    mock: true
+    mock: true,
+    features: ['deck', 'doc']
   },
   deckdeckgo: {
     website: 'https://deckdeckgo.com',

studio/src/global/app.ts

@@ -37,7 +37,8 @@ import {setupConfig as setupDeckGoConfig} from '../app/config/environment-config
 
 setupDeckGoConfig({
   app: {
-    mock: false
+    mock: false,
+    features: ['deck']
   },
   deckdeckgo: {
     website: 'https://deckdeckgo.com',