#377: Git sync actions added on panel and content dashboard

src/dashboardWebView/components/Header/Header.tsx

@@ -22,6 +22,7 @@ import { LightningBoltIcon, PlusIcon } from '@heroicons/react/outline';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import { useEffect } from 'react';
+import { SyncButton } from './SyncButton';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -108,6 +109,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({header, totalPage
 
               <div className={`flex items-center justify-end space-x-4 flex-1`}>
                 <Startup settings={settings} />
+
+                <SyncButton />
                 
                 <ChoiceButton 
                   title={`Create content`} 

src/dashboardWebView/components/Header/SyncButton.tsx

@@ -0,0 +1,55 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { RefreshIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { GeneralCommands } from '../../../constants';
+import { SettingsSelector } from '../../state';
+
+export interface ISyncButtonProps {}
+
+export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (props: React.PropsWithChildren<ISyncButtonProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+  const [ isSyncing, setIsSyncing ] = useState(false);
+  
+  const pull = () => {
+    Messenger.send(GeneralCommands.toVSCode.gitSync);
+  };
+
+  const messageListener = (message: MessageEvent<EventData<any>>) => {
+    const { command, data } = message.data;
+
+    if (command === GeneralCommands.toWebview.gitSyncingStart) {
+      setIsSyncing(true);
+    } else if (command === GeneralCommands.toWebview.gitSyncingEnd) {
+      setIsSyncing(false);
+    }
+  };
+
+  useEffect(() => {
+    Messenger.listen(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, []);
+
+  if (!settings?.git?.actions || !settings?.git.isGitRepo) {
+    return null;
+  }
+
+  return (
+    <div className='git_actions'>
+       <button
+        type="button"
+        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
+        onClick={pull}
+        disabled={isSyncing}
+      >
+        <RefreshIcon className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`} aria-hidden="true" />
+        <span>Sync</span>
+      </button>
+    </div>
+  );
+};