#517 - Added frontMatter.panel.actions.disabled setting to define which actions should be hidden

src/panelWebView/ViewPanel.tsx

@@ -134,7 +134,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
         )}
         {settings && metadata && (
           <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.panel.actions}>
-            <Actions metadata={metadata} settings={settings} />
+            <Actions metadata={metadata} settings={settings} scripts={settings.scripts} />
           </FeatureFlag>
         )}
 

src/panelWebView/components/Actions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PanelSettings } from '../../models/PanelSettings';
+import { PanelSettings, CustomScript as ICustomScript } from '../../models';
 import { Collapsible } from './Collapsible';
 import { CustomScript } from './CustomScript';
 import { Preview } from './Preview';
@@ -9,59 +9,114 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
 import { OpenOnWebsiteAction } from './Actions/OpenOnWebsiteAction';
 import useContentType from '../../hooks/useContentType';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { CommandToCode } from '../CommandToCode';
 
 export interface IActionsProps {
-  metadata: any;
+  metadata?: any;
   settings: PanelSettings;
+  scripts?: ICustomScript[];
 }
 
 const Actions: React.FunctionComponent<IActionsProps> = ({
   metadata,
-  settings
+  settings,
+  scripts = []
 }: React.PropsWithChildren<IActionsProps>) => {
   const contentType = useContentType(settings, metadata);
+  const disableActions = settings.disabledActions || [];
+
+  const openDashboard = () => {
+    messageHandler.send(CommandToCode.openDashboard);
+  };
+
+  const createContent = () => {
+    messageHandler.send(CommandToCode.createContent);
+  };
 
   const actions = React.useMemo(() => {
     let allActions: JSX.Element[] = [];
-    let scripts = settings.scripts || [];
 
-    if (contentType?.name) {
-      scripts = scripts.filter((script) => {
-        if (script.contentTypes && script.contentTypes.length > 0) {
-          return script.contentTypes.includes(contentType.name);
-        }
-
-        return true;
-      });
+    if (!disableActions.includes(`openDashboard`)) {
+      allActions.push(
+        <button
+          title={l10n.t(LocalizationKey.panelBaseViewActionOpenDashboard)}
+          onClick={openDashboard}
+          type={`button`}>
+          {l10n.t(LocalizationKey.panelBaseViewActionOpenDashboard)}
+        </button>
+      );
     }
 
-    allActions = scripts.map((value, idx) => (
-      <CustomScript key={value?.title?.replace(/ /g, '') || idx} {...value} />
-    ))
+    if (metadata?.title && !disableActions.includes(`optimizeSlug`)) {
+      allActions.push(<SlugAction key="optimizeSlug" />);
+    }
+
+    if (settings?.preview?.host && !disableActions.includes(`preview`)) {
+      if ((metadata && metadata.slug) || !metadata) {
+        allActions.push(<Preview key="preview" />);
+      }
+    }
+
+    if (!disableActions.includes(`openOnWebsite`) && metadata?.slug) {
+      allActions.push(<OpenOnWebsiteAction key="openOnWebsite" baseUrl={settings.websiteUrl} slug={metadata.slug} />);
+    }
+
+    if (!disableActions.includes(`startStopServer`)) {
+      allActions.push(<StartServerButton key="startStopServer" settings={settings} />);
+    }
+
+    if (!disableActions.includes(`createContent`)) {
+      allActions.push(
+        <button
+          title={l10n.t(LocalizationKey.panelBaseViewActionCreateContent)}
+          onClick={createContent}
+          type={`button`}>
+          {l10n.t(LocalizationKey.panelBaseViewActionCreateContent)}
+        </button>
+      );
+    }
 
     return allActions;
-  }, [settings.scripts, contentType]);
+  }, [metadata, settings, disableActions]);
 
-  if (!metadata || Object.keys(metadata).length === 0 || !settings) {
+
+  const customActions = React.useMemo(() => {
+    let allActions: JSX.Element[] = [];
+
+    if (!disableActions.includes(`customActions`)) {
+      if (contentType?.name) {
+        scripts = scripts.filter((script) => {
+          if (script.contentTypes && script.contentTypes.length > 0) {
+            return script.contentTypes.includes(contentType.name);
+          }
+
+          return true;
+        });
+      }
+
+      allActions = scripts.map((value, idx) => (
+        <CustomScript key={value?.title?.replace(/ /g, '') || idx} {...value} />
+      ))
+    }
+
+    return allActions;
+  }, [scripts, contentType, disableActions]);
+
+  if (!settings || (customActions.length === 0 && actions.length === 0)) {
     return null;
   }
 
   return (
     <Collapsible id={`actions`} title={l10n.t(LocalizationKey.panelActionsTitle)}>
       <div className={`article__actions`}>
-        {metadata && metadata.title && <SlugAction />}
+        {...actions}
 
-        {settings?.preview?.host && <Preview slug={metadata.slug} />}
-
-        <OpenOnWebsiteAction baseUrl={settings.websiteUrl} slug={metadata.slug} />
-
-        <StartServerButton settings={settings} />
-
-        {settings && settings.scripts && settings.scripts.length > 0 && (
+        {customActions?.length > 0 && (
           <>
-            <div className="divider py-4 w-full" style={{ height: `1px` }}></div>
+            {actions?.length > 0 && <div className="divider py-4 w-full" style={{ height: `1px` }}></div>}
 
-            {...actions}
+            {...customActions}
           </>
         )}
       </div>

src/panelWebView/components/BaseView.tsx

@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { CustomScript, FolderInfo, Mode, PanelSettings } from '../../models';
-import { CommandToCode } from '../CommandToCode';
-import { Collapsible } from './Collapsible';
+import { FolderInfo, Mode, PanelSettings } from '../../models';
 import { GlobalSettings } from './GlobalSettings';
 import { OtherActions } from './OtherActions';
 import { FolderAndFiles } from './FolderAndFiles';
 import { SponsorMsg } from './SponsorMsg';
-import { StartServerButton } from './StartServerButton';
 import { FeatureFlag } from '../../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../../constants/Features';
-import { Messenger } from '@estruyf/vscode/dist/client';
 import { GitAction } from './Git/GitAction';
 import { useMemo } from 'react';
 import * as l10n from "@vscode/l10n"
 import { LocalizationKey } from '../../localization';
 import { InitializeAction } from './InitializeAction';
+import { Actions } from './Actions';
 
 export interface IBaseViewProps {
   settings: PanelSettings | undefined;
@@ -27,25 +24,6 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({
   folderAndFiles,
   mode
 }: React.PropsWithChildren<IBaseViewProps>) => {
-  const openDashboard = () => {
-    Messenger.send(CommandToCode.openDashboard);
-  };
-
-  const createContent = () => {
-    Messenger.send(CommandToCode.createContent);
-  };
-
-  const openPreview = () => {
-    Messenger.send(CommandToCode.openPreview);
-  };
-
-  const runBulkScript = (script: CustomScript) => {
-    Messenger.send(CommandToCode.runCustomScript, {
-      title: script.title,
-      script
-    });
-  };
-
   const customActions: any[] = (settings?.scripts || []).filter(
     (s) => s.bulk && (s.type === 'content' || !s.type)
   );
@@ -83,43 +61,7 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({
             </FeatureFlag>
 
             <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.panel.actions}>
-              <Collapsible id={`base_actions`} title={l10n.t(LocalizationKey.panelBaseViewActionsTitle)}>
-                <div className={`base__actions`}>
-                  <button
-                    title={l10n.t(LocalizationKey.panelBaseViewActionOpenDashboard)}
-                    onClick={openDashboard}
-                    type={`button`}>
-                    {l10n.t(LocalizationKey.panelBaseViewActionOpenDashboard)}
-                  </button>
-
-                  <button
-                    title={l10n.t(LocalizationKey.panelBaseViewActionOpenPreview)}
-                    onClick={openPreview}
-                    disabled={!settings?.preview?.host}
-                    type={`button`}>
-                    {l10n.t(LocalizationKey.panelBaseViewActionOpenPreview)}
-                  </button>
-
-                  <StartServerButton settings={settings} />
-
-                  <button
-                    title={l10n.t(LocalizationKey.panelBaseViewActionCreateContent)}
-                    onClick={createContent}
-                    type={`button`}>
-                    {l10n.t(LocalizationKey.panelBaseViewActionCreateContent)}
-                  </button>
-
-                  {customActions.map((script) => (
-                    <button
-                      key={script.title}
-                      title={script.title}
-                      type={`button`}
-                      onClick={() => runBulkScript(script)}>
-                      {script.title}
-                    </button>
-                  ))}
-                </div>
-              </Collapsible>
+              <Actions settings={settings} scripts={customActions} />
             </FeatureFlag>
           </>
         )}

src/panelWebView/components/Preview.tsx

@@ -5,21 +5,13 @@ import { ActionButton } from './ActionButton';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
 
-export interface IPreviewProps {
-  slug: string;
-}
+export interface IPreviewProps { }
 
-const Preview: React.FunctionComponent<IPreviewProps> = ({
-  slug
-}: React.PropsWithChildren<IPreviewProps>) => {
+const Preview: React.FunctionComponent<IPreviewProps> = (_: React.PropsWithChildren<IPreviewProps>) => {
   const open = () => {
     Messenger.send(CommandToCode.openPreview);
   };
 
-  if (!slug) {
-    return null;
-  }
-
   return <ActionButton onClick={open} title={l10n.t(LocalizationKey.panelPreviewTitle)} />;
 };