#673 - git enablement

src/dashboardWebView/components/SettingsView/CommonSettings.tsx

@@ -6,15 +6,16 @@ import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { SettingsInput } from './SettingsInput';
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
-import { FrameworkDetectors, SETTING_FRAMEWORK_START, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
+import { FrameworkDetectors, SETTING_FRAMEWORK_START, SETTING_GIT_ENABLED, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
+import { SettingsCheckbox } from './SettingsCheckbox';
 
 export interface ICommonSettingsProps { }
 
 interface Config {
   name: string;
-  value: string;
+  value: string | boolean;
 }
 
 export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (props: React.PropsWithChildren<ICommonSettingsProps>) => {
@@ -22,7 +23,7 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
   const [config, setConfig] = React.useState<Config[]>([]);
   const [updated, setUpdated] = React.useState<boolean>(false);
 
-  const onSettingChange = React.useCallback((name: string, value: string) => {
+  const onSettingChange = React.useCallback((name: string, value: string | boolean) => {
     setConfig((prev) => {
       const setting = prev.find((c) => c.name === name);
       if (setting) {
@@ -39,7 +40,12 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
   }, [config]);
 
   const retrieveSettings = () => {
-    messageHandler.request<Config[]>(DashboardMessage.getSettings, [SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL, SETTING_FRAMEWORK_START]).then((config) => {
+    messageHandler.request<Config[]>(DashboardMessage.getSettings, [
+      SETTING_PREVIEW_HOST,
+      SETTING_WEBSITE_URL,
+      SETTING_FRAMEWORK_START,
+      SETTING_GIT_ENABLED
+    ]).then((config) => {
       setConfig(config);
       setUpdated(false);
     });
@@ -65,6 +71,19 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
         <Startup settings={settings} />
       </div>
 
+      <div className='py-4'>
+        <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsGitEnabled)}</h2>
+
+        <div className='space-y-2'>
+          <SettingsCheckbox
+            label={l10n.t(LocalizationKey.settingsGitEnabledDescription)}
+            name={SETTING_GIT_ENABLED}
+            value={(config.find((c) => c.name === SETTING_GIT_ENABLED)?.value || false) as boolean}
+            onChange={onSettingChange}
+          />
+        </div>
+      </div>
+
       <div className='py-4'>
         <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsCommonSettingsWebsiteTitle)}</h2>
 
@@ -72,21 +91,21 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
           <SettingsInput
             label={l10n.t(LocalizationKey.settingsCommonSettingsPreviewUrl)}
             name={SETTING_PREVIEW_HOST}
-            value={config.find((c) => c.name === SETTING_PREVIEW_HOST)?.value || ""}
+            value={(config.find((c) => c.name === SETTING_PREVIEW_HOST)?.value || "") as string}
             onChange={onSettingChange}
           />
 
           <SettingsInput
             label={l10n.t(LocalizationKey.settingsCommonSettingsWebsiteUrl)}
             name={SETTING_WEBSITE_URL}
-            value={config.find((c) => c.name === SETTING_WEBSITE_URL)?.value || ""}
+            value={(config.find((c) => c.name === SETTING_WEBSITE_URL)?.value || "") as string}
             onChange={onSettingChange}
           />
 
           <SettingsInput
             label={l10n.t(LocalizationKey.settingsCommonSettingsStartCommand)}
             name={SETTING_FRAMEWORK_START}
-            value={config.find((c) => c.name === SETTING_FRAMEWORK_START)?.value || ""}
+            value={(config.find((c) => c.name === SETTING_FRAMEWORK_START)?.value || "") as string}
             onChange={onSettingChange}
             fallback={FrameworkDetectors.find((f) => f.framework.name === settings?.crntFramework)?.commands.start || ""}
           />

src/dashboardWebView/components/SettingsView/SettingsCheckbox.tsx

@@ -0,0 +1,35 @@
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import * as React from 'react';
+
+export interface ISettingsCheckboxProps {
+  label: string;
+  name: string;
+  value: boolean;
+  onChange: (key: string, value: boolean) => void;
+}
+
+export const SettingsCheckbox: React.FunctionComponent<ISettingsCheckboxProps> = ({
+  label,
+  name,
+  value,
+  onChange
+}: React.PropsWithChildren<ISettingsCheckboxProps>) => {
+  const [isEnabled, setIsEnabled] = React.useState(false);
+
+  const updateValue = (value: boolean) => {
+    setIsEnabled(value);
+    onChange(name, value);
+  }
+
+  React.useEffect(() => {
+    setIsEnabled(value);
+  }, [value]);
+
+  return (
+    <VSCodeCheckbox
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(e.target.checked)}
+      checked={isEnabled}>
+      {label}
+    </VSCodeCheckbox>
+  );
+};

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -13,11 +13,12 @@ import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SelectItem } from './SelectItem';
-import { Templates } from '../../../constants';
+import { GeneralCommands, SETTING_GIT_ENABLED, Templates } from '../../../constants';
 import { TemplateItem } from './TemplateItem';
 import { Spinner } from '../Common/Spinner';
 import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
 import { ContentFolders } from '../Configuration/Common/ContentFolders';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
@@ -29,6 +30,8 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   const [loading, setLoading] = useState<boolean>(false);
   const [framework, setFramework] = useState<string | null>(null);
   const [taxImported, setTaxImported] = useState<boolean>(false);
+  const [isGitEnabled, setIsGitEnabled] = useState<boolean>(false);
+  const [isGitRepo, setIsGitRepo] = useState<boolean>(false);
   const [templates, setTemplates] = useState<Template[]>([]);
   const [astroCollectionsStatus, setAstroCollectionsStatus] = useState<Status>(Status.Optional);
 
@@ -73,6 +76,15 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     setTaxImported(true);
   };
 
+  const updateSetting = (name: string, value: any) => {
+    setIsGitEnabled(value);
+    Messenger.send(DashboardMessage.updateSetting, {
+      name,
+      value,
+      global: true
+    });
+  }
+
   const crntTemplates = useMemo(() => {
     if (!templates || templates.length === 0 || !settings.crntFramework) {
       return [];
@@ -230,6 +242,21 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
         show: settings.crntFramework === 'astro' || framework === 'astro',
         status: settings.initialized && settings.staticFolder && settings.staticFolder !== "/" ? Status.Completed : Status.NotStarted,
       },
+      {
+        id: `welcome-git`,
+        name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedGitName),
+        description: (
+          <div className='mt-1'>
+            <VSCodeCheckbox
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateSetting(SETTING_GIT_ENABLED, e.target.checked)}
+              checked={isGitEnabled}>
+              {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedGitDescription)}
+            </VSCodeCheckbox>
+          </div>
+        ),
+        show: isGitRepo,
+        status: settings.git.actions ? Status.Completed : Status.NotStarted
+      },
       {
         id: `welcome-import`,
         name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTagsName),
@@ -257,7 +284,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
             : undefined
       }
     ]
-  ), [settings, framework, taxImported, templates, astroCollectionsStatus]);
+  ), [settings, framework, taxImported, templates, astroCollectionsStatus, isGitRepo]);
 
   React.useEffect(() => {
     if (settings.crntFramework || settings.framework?.name) {
@@ -265,6 +292,14 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     }
   }, [settings.crntFramework, settings.framework]);
 
+  React.useEffect(() => {
+    messageHandler.request<boolean>(GeneralCommands.toVSCode.gitIsRepo).then((result) => {
+      setIsGitRepo(result);
+    });
+
+    setIsGitEnabled(settings.git.actions);
+  }, [settings.git.actions]);
+
   React.useEffect(() => {
     const fetchTemplates = async () => {
       try {