From 41d2f3f22b30d3799a7f8de83a8b983a99c06d4c Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 11 Nov 2023 13:10:41 -0800
Subject: [PATCH] Enhancement: Better content type creation for Astro #704

---
 l10n/bundle.l10n.json                         |  1 +
 .../Configuration/Astro/AstroContentTypes.tsx | 20 +++++++++++++++++--
 .../components/SettingsView/SettingsView.tsx  |  3 ++-
 .../components/Steps/StepsToGetStarted.tsx    | 11 +++++++---
 src/localization/localization.enum.ts         |  4 ++++
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index e2117a0e..b94f2cf4 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -276,6 +276,7 @@
   "dashboard.steps.stepsToGetStarted.showDashboard.description": "Once all actions are completed, the dashboard can be loaded.",
   "dashboard.steps.stepsToGetStarted.template.name": "Use a configuration template",
   "dashboard.steps.stepsToGetStarted.template.description": "Select a template to prefill the frontmatter.json file with the recommended settings.",
+  "dashboard.steps.stepsToGetStarted.template.warning": "Selecting a template applies a whole configuration to your project and closes this configuration view.",
   "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Create Content-Types for your Astro Content Collections",
 
   "dashboard.taxonomyView.button.add.title": "Add {0} to taxonomy settings",
diff --git a/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx b/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
index b23339b9..a40c4652 100644
--- a/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
+++ b/src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
@@ -3,18 +3,20 @@ import * as l10n from '@vscode/l10n';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../../DashboardMessage';
 import { AstroCollection } from '../../../../models';
-import { Settings } from '../../../models';
+import { Settings, Status } from '../../../models';
 import { SelectItem } from '../../Steps/SelectItem';
 import { LocalizationKey } from '../../../../localization';
 
 export interface IAstroContentTypesProps {
   settings: Settings
   triggerLoading: (isLoading: boolean) => void;
+  setStatus: (status: Status) => void;
 }
 
 export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps> = ({
   settings,
-  triggerLoading
+  triggerLoading,
+  setStatus
 }: React.PropsWithChildren<IAstroContentTypesProps>) => {
   const [collections, setCollections] = React.useState<AstroCollection[]>([]);
 
@@ -26,12 +28,26 @@ export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps>
     });
   }, []);
 
+  React.useEffect(() => {
+    if (collections.length > 0 && settings?.contentTypes?.length > 0) {
+      // Find created content types from the collections
+      const astroCollection = collections.find(c => settings.contentTypes.find((ct) => ct.name === c.name));
+      console.log(`astroCollection`, astroCollection)
+      if (astroCollection) {
+        setStatus(Status.Completed);
+      } else {
+        setStatus(Status.Active);
+      }
+    }
+  }, [collections, settings.contentTypes])
+
   const generateContentType = (collection: AstroCollection) => {
     triggerLoading(true);
     messageHandler.request(DashboardMessage.ssgSetAstroContentTypes, {
       collection
     }).then((result) => {
       triggerLoading(false);
+      setStatus(Status.Completed);
     });
   }
 
diff --git a/src/dashboardWebView/components/SettingsView/SettingsView.tsx b/src/dashboardWebView/components/SettingsView/SettingsView.tsx
index fc481240..ee05e6e3 100644
--- a/src/dashboardWebView/components/SettingsView/SettingsView.tsx
+++ b/src/dashboardWebView/components/SettingsView/SettingsView.tsx
@@ -76,7 +76,8 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
 
                       <AstroContentTypes
                         settings={settings}
-                        triggerLoading={(isLoading) => setLoading(isLoading)} />
+                        triggerLoading={(isLoading) => setLoading(isLoading)}
+                        setStatus={_ => null} />
                     </div>
                   </VSCodePanelView>
                 )
diff --git a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
index 7f4503f2..8e2bd9d0 100644
--- a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
+++ b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
@@ -31,6 +31,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   const [framework, setFramework] = useState<string | null>(null);
   const [taxImported, setTaxImported] = useState<boolean>(false);
   const [templates, setTemplates] = useState<Template[]>([]);
+  const [astroCollectionsStatus, setAstroCollectionsStatus] = useState<Status>(Status.Optional)
   const { getColors } = useThemeColors();
 
   const frameworks: Framework[] = FrameworkDetectors.map((detector: any) => detector.framework);
@@ -175,6 +176,9 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
                 ))
               }
             </div>
+
+            <p className='mt-4 text-[var(--vscode-editorWarning-foreground)]'>
+              <b>{l10n.t(LocalizationKey.commonImportant)}</b>: {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTemplateWarning)}</p>
           </div>
         ),
         show: (crntTemplates || []).length > 0,
@@ -186,10 +190,11 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
         description: (
           <AstroContentTypes
             settings={settings}
-            triggerLoading={(isLoading) => setLoading(isLoading)} />
+            triggerLoading={(isLoading) => setLoading(isLoading)}
+            setStatus={(status) => setAstroCollectionsStatus(status)} />
         ),
         show: settings.crntFramework === 'astro',
-        status: Status.Optional
+        status: astroCollectionsStatus
       },
       {
         id: `welcome-content-folders`,
@@ -259,7 +264,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
             : undefined
       }
     ]
-  ), [settings, framework, taxImported, templates]);
+  ), [settings, framework, taxImported, templates, astroCollectionsStatus]);
 
   React.useEffect(() => {
     if (settings.crntFramework || settings.framework?.name) {
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index 2540df9e..0130359e 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -915,6 +915,10 @@ export enum LocalizationKey {
    * Select a template to prefill the frontmatter.json file with the recommended settings.
    */
   dashboardStepsStepsToGetStartedTemplateDescription = 'dashboard.steps.stepsToGetStarted.template.description',
+  /**
+   * Selecting a template applies a whole configuration to your project and closes this configuration view.
+   */
+  dashboardStepsStepsToGetStartedTemplateWarning = 'dashboard.steps.stepsToGetStarted.template.warning',
   /**
    * Create Content-Types for your Astro Content Collections
    */