Merge branch 'dev' into poc/git-branching

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -11,7 +11,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IDateTimeFieldProps extends BaseFieldProps<Date | null> {
   format?: string;
-  onChange: (date: Date) => void;
+  onChange: (date: string) => void;
 }
 
 type InputProps = JSX.IntrinsicElements['input'];
@@ -32,12 +32,17 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
   format,
   onChange
 }: React.PropsWithChildren<IDateTimeFieldProps>) => {
+  const DEFAULT_FORMAT = 'MM/dd/yyyy HH:mm';
   const [dateValue, setDateValue] = React.useState<Date | null>(null);
 
-  const onDateChange = (date: Date) => {
+  const onDateChange = React.useCallback((date: Date) => {
     setDateValue(date);
-    onChange(date);
-  };
+
+    const dateValue = DateHelper.format(date, format);
+    if (dateValue) {
+      onChange(dateValue);
+    }
+  }, [format, onChange]);
 
   const showRequiredState = useMemo(() => {
     return required && !dateValue;
@@ -74,7 +79,7 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
           selected={(DateHelper.tryParse(dateValue, format) as Date) || new Date()}
           onChange={onDateChange}
           timeInputLabel={l10n.t(LocalizationKey.panelFieldsDateTimeFieldTime)}
-          dateFormat={DateHelper.formatUpdate(format) || 'MM/dd/yyyy HH:mm'}
+          dateFormat={DateHelper.formatUpdate(format) || DEFAULT_FORMAT}
           customInput={<CustomInput />}
           showTimeInput={hasTimeFormat}
         />

src/panelWebView/components/Git/GitAction.tsx

@@ -154,7 +154,7 @@ export const GitAction: React.FunctionComponent<IGitActionProps> = ({
           title={l10n.t(LocalizationKey.commonSync)}
         >
           <div className="git_actions__sync">
-            <ArrowPathIcon className={isSyncing === "syncing" ? 'animate-spin' : ''} aria-hidden="true" />
+            <ArrowPathIcon className={isSyncing === "syncing" ? 'animate-reverse-spin' : ''} aria-hidden="true" />
             <span>
               {l10n.t(LocalizationKey.commonSync)}
             </span>