From c58d0573c6da1433ba453f86d2351e586fd3e170 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 10 Jun 2024 15:07:07 +0200
Subject: [PATCH] #811 - Update default feature flags

---
 src/constants/DefaultFeatureFlags.ts          | 12 ++++++++++
 .../components/Header/Tabs.tsx                | 13 ++++-------
 .../components/SnippetsView/Item.tsx          |  5 ++--
 .../components/SnippetsView/Snippets.tsx      |  5 +++-
 src/panelWebView/ViewPanel.tsx                | 23 ++++++++-----------
 src/panelWebView/components/Metadata.tsx      |  3 ++-
 6 files changed, 35 insertions(+), 26 deletions(-)
 create mode 100644 src/constants/DefaultFeatureFlags.ts

diff --git a/src/constants/DefaultFeatureFlags.ts b/src/constants/DefaultFeatureFlags.ts
new file mode 100644
index 00000000..28e43bf7
--- /dev/null
+++ b/src/constants/DefaultFeatureFlags.ts
@@ -0,0 +1,12 @@
+import { FEATURE_FLAG } from './Features';
+
+export const DEFAULT_PANEL_FEATURE_FLAGS = Object.values(FEATURE_FLAG.panel).filter(
+  (v) => v !== FEATURE_FLAG.panel.globalSettings
+);
+
+export const DEFAULT_DASHBOARD_FEATURE_FLAGS = [
+  FEATURE_FLAG.dashboard.data.view,
+  FEATURE_FLAG.dashboard.taxonomy.view,
+  FEATURE_FLAG.dashboard.snippets.view,
+  FEATURE_FLAG.dashboard.snippets.manage
+];
diff --git a/src/dashboardWebView/components/Header/Tabs.tsx b/src/dashboardWebView/components/Header/Tabs.tsx
index 18870588..bfd984c9 100644
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/src/dashboardWebView/components/Header/Tabs.tsx
@@ -9,6 +9,7 @@ import { Tab } from './Tab';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { PageIcon } from '../../../panelWebView/components/Icons';
+import { DEFAULT_DASHBOARD_FEATURE_FLAGS } from '../../../constants/DefaultFeatureFlags';
 
 export interface ITabsProps {
   onNavigate: (navigationType: NavigationType) => void;
@@ -19,12 +20,6 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
 }: React.PropsWithChildren<ITabsProps>) => {
   const mode = useRecoilValue(ModeAtom);
 
-  const allDashboardVIews = [
-    FEATURE_FLAG.dashboard.snippets.view,
-    FEATURE_FLAG.dashboard.data.view,
-    FEATURE_FLAG.dashboard.taxonomy.view
-  ];
-
   return (
     <ul
       className="flex items-center justify-start h-full space-x-4"
@@ -43,7 +38,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
-      <FeatureFlag features={mode?.features || [...allDashboardVIews]} flag={FEATURE_FLAG.dashboard.snippets.view}>
+      <FeatureFlag features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS} flag={FEATURE_FLAG.dashboard.snippets.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
             <ScissorsIcon className={`h-4 w-auto mr-2`} />
@@ -51,7 +46,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
           </Tab>
         </li>
       </FeatureFlag>
-      <FeatureFlag features={mode?.features || [...allDashboardVIews]} flag={FEATURE_FLAG.dashboard.data.view}>
+      <FeatureFlag features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS} flag={FEATURE_FLAG.dashboard.data.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
             <CircleStackIcon className={`h-4 w-auto mr-2`} />
@@ -59,7 +54,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
           </Tab>
         </li>
       </FeatureFlag>
-      <FeatureFlag features={mode?.features || [...allDashboardVIews]} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
+      <FeatureFlag features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
             <TagIcon className={`h-4 w-auto mr-2`} />
diff --git a/src/dashboardWebView/components/SnippetsView/Item.tsx b/src/dashboardWebView/components/SnippetsView/Item.tsx
index b3473af7..ec82a2b6 100644
--- a/src/dashboardWebView/components/SnippetsView/Item.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Item.tsx
@@ -19,6 +19,7 @@ import { LocalizationKey } from '../../../localization';
 import { FooterActions } from './FooterActions';
 import { ItemMenu } from './ItemMenu';
 import { SlideOver } from '../Modals/SlideOver';
+import { DEFAULT_DASHBOARD_FEATURE_FLAGS } from '../../../constants/DefaultFeatureFlags';
 
 export interface IItemProps {
   snippetKey: string;
@@ -163,7 +164,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </h2>
 
           <FeatureFlag
-            features={mode?.features || []}
+            features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS}
             flag={FEATURE_FLAG.dashboard.snippets.manage}
             alternative={
               <ItemMenu
@@ -190,7 +191,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         </div>
 
         <FeatureFlag
-          features={mode?.features || []}
+          features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS}
           flag={FEATURE_FLAG.dashboard.snippets.manage}
           alternative={
             <FooterActions
diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
index f6dc876a..2a7da3f3 100644
--- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
@@ -18,6 +18,7 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { List } from '../Media/List';
 import { SlideOver } from '../Modals/SlideOver';
+import { DEFAULT_DASHBOARD_FEATURE_FLAGS } from '../../../constants/DefaultFeatureFlags';
 
 export interface ISnippetsProps { }
 
@@ -96,7 +97,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
   return (
     <PageLayout
       header={
-        <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.manage}>
+        <FeatureFlag
+          features={mode?.features || DEFAULT_DASHBOARD_FEATURE_FLAGS}
+          flag={FEATURE_FLAG.dashboard.snippets.manage}>
           <div
             className={`py-3 px-4 flex items-center justify-between border-b border-[var(--frontmatter-border)]`}
             aria-label={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsAriaLabel)}
diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx
index 67a4bf25..44f306f4 100644
--- a/src/panelWebView/ViewPanel.tsx
+++ b/src/panelWebView/ViewPanel.tsx
@@ -17,6 +17,7 @@ import { usePrevious } from './hooks/usePrevious';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
 import { InitializeAction } from './components/InitializeAction';
+import { DEFAULT_PANEL_FEATURE_FLAGS } from '../constants/DefaultFeatureFlags';
 
 export interface IViewPanelProps { }
 
@@ -37,10 +38,6 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
   const prevMediaSelection = usePrevious(mediaSelecting);
   const [scrollY, setScrollY] = useState(0);
 
-  const allPanelValues = useMemo(() => {
-    return Object.values(FEATURE_FLAG.panel).filter(v => v !== FEATURE_FLAG.panel.globalSettings)
-  }, [FEATURE_FLAG.panel]);
-
   const scollListener = useCallback((e: Event) => {
     if (!mediaSelecting) {
       setScrollY(window.scrollY);
@@ -48,7 +45,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
   }, [mediaSelecting]);
 
   const isSomethingShown = useMemo(() => {
-    const panelModeValues = (mode?.features || [...allPanelValues]).filter(v => v.startsWith('panel.'));
+    const panelModeValues = (mode?.features || DEFAULT_PANEL_FEATURE_FLAGS).filter(v => v.startsWith('panel.'));
 
     if (panelModeValues.length === 0) {
       return false;
@@ -125,19 +122,19 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
       <InitializeAction settings={settings} />
 
       <div className={`ext_actions`}>
-        <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.gitActions}>
+        <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.gitActions}>
           <GitAction settings={settings} />
         </FeatureFlag>
 
         {!loading && (<CustomView metadata={metadata} />)}
 
-        <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.globalSettings}>
+        <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.globalSettings}>
           <GlobalSettings settings={settings} isBase={!metadata} />
         </FeatureFlag>
 
         {
           !loading && metadata && settings && settings.seo && (
-            <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.seo}>
+            <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.seo}>
               <SeoStatus
                 seo={settings.seo}
                 data={metadata}
@@ -149,7 +146,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
         }
 
         {!loading && settings && (
-          <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.actions}>
+          <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.actions}>
             <Actions
               metadata={metadata}
               settings={settings}
@@ -159,23 +156,23 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
 
         {
           !loading && metadata && (
-            <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.metadata}>
+            <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.metadata}>
               <Metadata
                 settings={settings}
                 metadata={metadata}
                 focusElm={focusElm}
                 unsetFocus={unsetFocus}
-                features={mode?.features || [...allPanelValues]}
+                features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS}
               />
             </FeatureFlag>
           )
         }
 
-        <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.recentlyModified}>
+        <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.recentlyModified}>
           <FolderAndFiles data={folderAndFiles} isBase={!metadata} />
         </FeatureFlag>
 
-        <FeatureFlag features={mode?.features || [...allPanelValues]} flag={FEATURE_FLAG.panel.otherActions}>
+        <FeatureFlag features={mode?.features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.otherActions}>
           <OtherActions settings={settings} isFile={!!metadata} isBase={!metadata} />
         </FeatureFlag>
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 843e498d..68bf484f 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -12,6 +12,7 @@ import { FEATURE_FLAG, GeneralCommands } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
+import { DEFAULT_PANEL_FEATURE_FLAGS } from '../../constants/DefaultFeatureFlags';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -95,7 +96,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({
       id={`tags`}
       title={`${l10n.t(LocalizationKey.panelMetadataTitle)}${contentType?.name ? ` (${contentType?.name})` : ""}`}
       className={`inherit z-20`}>
-      <FeatureFlag features={features || []} flag={FEATURE_FLAG.panel.contentType}>
+      <FeatureFlag features={features || DEFAULT_PANEL_FEATURE_FLAGS} flag={FEATURE_FLAG.panel.contentType}>
         <ContentTypeValidator fields={contentType?.fields || []} metadata={metadata} />
       </FeatureFlag>