Start of the taxonomy dashboard implementation

src/commands/Dashboard.ts

@@ -7,7 +7,7 @@ import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener } from '../listeners/dashboard';
+import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener, TaxonomyListener } from '../listeners/dashboard';
 import { MediaListener as PanelMediaListener } from '../listeners/panel'
 import { ModeListener } from '../listeners/general';
 
@@ -145,6 +145,7 @@ export class Dashboard {
       TelemetryListener.process(msg);
       SnippetListener.process(msg);
       ModeListener.process(msg);
+      TaxonomyListener.process(msg);
     });
   }
 

src/commands/Diagnostics.ts

@@ -52,7 +52,7 @@ ${folderData.join("\n")}
     let projectStart = folder.path.split(projectName).pop();
     projectStart = projectStart || "";
     projectStart = projectStart?.replace(/\\/g, '/');
-    projectStart = projectStart?.startsWith('/') ? projectStart.substr(1) : projectStart;
+    projectStart = projectStart?.startsWith('/') ? projectStart.substring(1) : projectStart;
 
     const mdFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.md'));
     const mdxFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.mdx'));

src/commands/Folders.ts

@@ -231,7 +231,7 @@ export class Folders {
           
           if (projectStart) {
             projectStart = projectStart.replace(/\\/g, '/');
-            projectStart = projectStart.startsWith('/') ? projectStart.substr(1) : projectStart;
+            projectStart = projectStart.startsWith('/') ? projectStart.substring(1) : projectStart;
 
             let files: Uri[] = [];
             
@@ -259,6 +259,7 @@ export class Folders {
                   });
                 } catch (error) {
                   // Skip the file
+                  console.log((error as Error).message)
                 }
               }
 

src/constants/Extension.ts

@@ -32,6 +32,7 @@ export const COMMAND_NAME = {
   dashboardMedia: getCommandName("dashboard.media"),
   dashboardSnippets: getCommandName("dashboard.snippets"),
   dashboardData: getCommandName("dashboard.data"),
+  dashboardTaxonomy: getCommandName("dashboard.taxonomy"),
   dashboardClose: getCommandName("dashboard.close"),
   promote: getCommandName("promoteSettings"),
   createFolder: getCommandName("createFolder"),

src/constants/Features.ts

@@ -17,6 +17,9 @@ export const FEATURE_FLAG = {
     },
     data: {
       view: "dashboard.data.view",
+    },
+    taxonomy: {
+      view: "dashboard.taxonomy.view"
     }
   }
 };

src/constants/TelemetryEvent.ts

@@ -10,6 +10,7 @@ export const TelemetryEvent = {
   openMediaDashboard: 'openMediaDashboard',
   openDataDashboard: 'openDataDashboard',
   openSnippetsDashboard: 'openSnippetsDashboard',
+  openTaxonomyDashboard: 'openTaxonomyDashboard',
   closeDashboard: 'closeDashboard',
 
   // Other actions
@@ -41,4 +42,5 @@ export const TelemetryEvent = {
   webviewDataView: 'webviewDataView',
   webviewContentsView: 'webviewContentsView',
   webviewSnippetsView: 'webviewSnippetsView',
+  webviewTaxonomyDashboard: 'webviewTaxonomyDashboard',
 };

src/dashboardWebView/DashboardCommand.ts

@@ -8,4 +8,7 @@ export enum DashboardCommand {
   mediaUpdate = "mediaUpdate",
   dataFileEntries = "dataFileEntries",
   searchReady = "searchReady",
+
+  // Taxonomy dashboard
+  setTaxonomyData = "setTaxonomyData",
 }

src/dashboardWebView/DashboardMessage.ts

@@ -41,6 +41,9 @@ export enum DashboardMessage {
   addSnippet = 'addSnippet',
   updateSnippet = 'updateSnippet',
 
+  // Taxonomy dashboard
+  getTaxonomyData = 'getTaxonomyData',
+
   // Other
   getTheme = 'getTheme',
   updateSetting = 'updateSetting',

src/dashboardWebView/components/App.tsx

@@ -13,12 +13,13 @@ import { Snippets } from './SnippetsView/Snippets';
 import { FeatureFlag } from '../../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
+import { TaxonomyView } from './TaxonomyView';
 
-export interface IDashboardProps {
+export interface IAppProps {
   showWelcome: boolean;
 }
 
-export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
+export const App: React.FunctionComponent<IAppProps> = ({showWelcome}: React.PropsWithChildren<IAppProps>) => {
   const { loading, pages, settings } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
@@ -64,6 +65,16 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
     );
   }
 
+  if (view === NavigationType.Taxonomy) {
+    return (
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
+        <main className={`h-full w-full`}>
+          <TaxonomyView pages={pages} />
+        </main>
+      </FeatureFlag>
+    );
+  }
+
   return (
     <main className={`h-full w-full`}>
       <Contents pages={pages} loading={loading} />

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,4 +1,4 @@
-import { DatabaseIcon, PhotographIcon, ScissorsIcon } from '@heroicons/react/outline';
+import { DatabaseIcon, PhotographIcon, ScissorsIcon, TagIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlag } from '../../../components/features/FeatureFlag';
@@ -49,6 +49,15 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({ onNavigate }: React.
           </Tab>
         </li>
       </FeatureFlag>
+      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
+        <li className="mr-2" role="presentation">
+          <Tab
+            navigationType={NavigationType.Taxonomy} 
+            onNavigate={onNavigate}>
+            <TagIcon className={`h-6 w-auto mr-2`} /><span>Taxonomy</span>
+          </Tab>
+        </li>
+      </FeatureFlag>
     </ul>
   );
 };

src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx

@@ -0,0 +1,44 @@
+import { EventData } from '@estruyf/vscode';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { TelemetryEvent } from '../../../constants';
+import { DashboardCommand } from '../../DashboardCommand';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Page } from '../../models';
+import { PageLayout } from '../Layout/PageLayout';
+
+export interface ITaxonomyViewProps {
+  pages: Page[];
+}
+
+export const TaxonomyView: React.FunctionComponent<ITaxonomyViewProps> = ({ pages }: React.PropsWithChildren<ITaxonomyViewProps>) => {
+  
+  const messageListener = (message: MessageEvent<EventData<any>>) => {
+    const { command, data } = message.data;
+
+    if (command === DashboardCommand.setTaxonomyData) {
+      console.log('TaxonomyView: setTaxonomyData', data);
+    }
+  };
+
+  useEffect(() => {
+    Messenger.send(DashboardMessage.sendTelemetry, {
+      event: TelemetryEvent.webviewTaxonomyDashboard
+    });
+    
+    Messenger.send(DashboardMessage.getTaxonomyData);
+
+    Messenger.listen(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, []);
+
+  return (
+    <PageLayout>
+      {pages.length}
+    </PageLayout>
+  );
+};

src/dashboardWebView/components/TaxonomyView/index.ts

@@ -0,0 +1 @@
+export * from './TaxonomyView';

src/dashboardWebView/hooks/useMessages.tsx

@@ -33,6 +33,8 @@ export default function useMessages() {
           setView(NavigationType.Contents);
         } else if (message.data?.type === NavigationType.Data) {
           setView(NavigationType.Data);
+        } else if (message.data?.type === NavigationType.Taxonomy) {
+          setView(NavigationType.Taxonomy);
         } else if (message.data?.type === NavigationType.Snippets) {
           setView(NavigationType.Snippets);
         }

src/dashboardWebView/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { render } from "react-dom";
 import { RecoilRoot } from "recoil";
-import { Dashboard } from "./components/Dashboard";
+import { App } from "./components/App";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { SENTRY_LINK } from "../constants";
@@ -37,7 +37,11 @@ if (elm) {
   if (type === "preview") {
     render(<Preview url={url} />, elm);
   } else {
-    render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
+    render((
+      <RecoilRoot>
+        <App showWelcome={!!welcome} />
+      </RecoilRoot>
+    ), elm);
   }
 }
 

src/dashboardWebView/models/NavigationType.ts

@@ -3,4 +3,5 @@ export enum NavigationType {
   Media = "media",
   Data = "data",
   Snippets = "snippets",
+  Taxonomy = "taxonomy",
 }

src/extension.ts

@@ -79,6 +79,11 @@ export async function activate(context: vscode.ExtensionContext) {
 		Telemetry.send(TelemetryEvent.openDataDashboard);
 		Dashboard.open({ type: NavigationType.Data });
 	}));
+
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardTaxonomy, (data?: DashboardData) => {
+		Telemetry.send(TelemetryEvent.openTaxonomyDashboard);
+		Dashboard.open({ type: NavigationType.Taxonomy });
+	}));
 	
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardClose, (data?: DashboardData) => {
 		Telemetry.send(TelemetryEvent.closeDashboard);

src/listeners/dashboard/TaxonomyListener.ts

@@ -0,0 +1,62 @@
+import { join } from "path";
+import { Uri, workspace } from "vscode";
+import { Folders } from "../../commands/Folders";
+import { DEFAULT_FILE_TYPES, SETTING_CONTENT_SUPPORTED_FILETYPES, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_TAGS } from "../../constants";
+import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Settings } from "../../helpers";
+import { CustomTaxonomy } from "../../models";
+import { BaseListener } from "./BaseListener";
+
+
+export class TaxonomyListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: DashboardMessage, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case DashboardMessage.getTaxonomyData:
+        this.getData();
+        break;
+    }
+  }
+
+  private static async getData() {
+    // Retrieve the tags, categories and custom taxonomy
+    const taxonomyData = {
+      tags: Settings.get<string[]>(SETTING_TAXONOMY_TAGS) || [],
+      categories: Settings.get<string[]>(SETTING_TAXONOMY_CATEGORIES) || [],
+      customTaxonomy: Settings.get<CustomTaxonomy[]>(SETTING_TAXONOMY_CUSTOM) || []
+    };
+
+    const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES) || DEFAULT_FILE_TYPES;
+    const fileExtensions = supportedFiles.map(fileType => `${fileType.startsWith('.') ? '' : '.'}${fileType}`);
+
+    const folders = Folders.get();
+    const projectName = Folders.getProjectFolderName();
+
+    let files: Uri[] = [];
+
+    for (const folder of folders) {
+      let projectStart = folder.path.split(projectName).pop();
+      projectStart = projectStart || "";
+      projectStart = projectStart?.replace(/\\/g, '/');
+      projectStart = projectStart?.startsWith('/') ? projectStart.substring(1) : projectStart;
+
+      for (const fileExtension of fileExtensions) {
+        const crntFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', `*${fileExtension}`));
+        if (crntFiles && crntFiles.length > 0) {
+          files = [...files, ...crntFiles];
+        }
+      }
+    }
+
+    console.log(files)
+
+    this.sendMsg(DashboardCommand.setTaxonomyData, taxonomyData);
+  }
+}

src/listeners/dashboard/index.ts

@@ -7,3 +7,4 @@ export * from './PagesListener';
 export * from './SettingsListener';
 export * from './SnippetListener';
 export * from './TelemetryListener';
+export * from './TaxonomyListener';