Enhancement: Better content type creation for Astro #704

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",

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);
     });
   }
 

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>
                 )

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) {

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
    */