get rid of GMT in header

support for reset timestamp with timezone

Author: Leshe4ka

frontend/src/components/ConsumerGroups/Details/ResetOffsets/Form.tsx

@@ -23,6 +23,7 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { useResetConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
 import { FlexFieldset, StyledForm } from 'components/common/Form/Form.styled';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './ResetOffsets.styled';
 
@@ -38,6 +39,7 @@ const resetTypeOptions = Object.values(ConsumerGroupOffsetsResetType).map(
 
 const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
   const navigate = useNavigate();
+  const { getDateInCurrentTimezone } = useTimezone();
   const routerParams = useAppParams<ClusterGroupParam>();
   const reset = useResetConsumerGroupOffsetsMutation(routerParams);
   const topicOptions = React.useMemo(
@@ -142,8 +144,12 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
                   render={({ field: { onChange, onBlur, value, ref } }) => (
                     <S.DatePickerInput
                       ref={ref}
-                      selected={new Date(value as number)}
-                      onChange={(e: Date | null) => onChange(e?.getTime())}
+                      selected={getDateInCurrentTimezone(
+                        new Date(value as number)
+                      )}
+                      onChange={(selectedDate: Date | null) => {
+                        onChange(selectedDate?.getTime());
+                      }}
                       onBlur={onBlur}
                     />
                   )}

frontend/src/components/NavBar/UserTimezone/UserTimezone.tsx

@@ -39,7 +39,7 @@ export const UserTimezone = () => {
       openBtnEl={
         <Button buttonType="text" buttonSize="L">
           <S.SelectedTimezoneContainer>
-            <p>{currentTimezone.offset}</p>
+            <p>{currentTimezone.UTCOffset}</p>
             <ChevronDownIcon fill="currentColor" width="16" height="16" />
           </S.SelectedTimezoneContainer>
         </Button>

frontend/src/lib/hooks/useTimezones.ts

@@ -4,6 +4,7 @@ interface Timezone {
   value: string;
   label: string;
   offset: string;
+  UTCOffset: string;
 }
 
 const generateTimezones = (): Timezone[] => {
@@ -47,12 +48,14 @@ const generateTimezones = (): Timezone[] => {
           value: timeZone,
           label: `${offset.replace('GMT', 'UTC')} ${timeZone.replace(/_/g, ' ')}`,
           offset,
+          UTCOffset: offset.replace('GMT', 'UTC'),
         };
       } catch (error) {
         return {
           value: timeZone,
           label: timeZone.replace(/_/g, ' '),
           offset: 'GMT+00:00',
+          UTCOffset: 'UTC+00:00',
         };
       }
     });
@@ -62,14 +65,30 @@ const generateTimezones = (): Timezone[] => {
       'Intl.supportedValuesOf not supported, using fallback timezones'
     );
     return [
-      { value: 'UTC', label: 'UTC', offset: 'GMT+00:00' },
+      {
+        value: 'UTC',
+        label: 'UTC',
+        offset: 'GMT+00:00',
+        UTCOffset: 'GMT+00:00',
+      },
       {
         value: 'America/New York',
         label: 'America/New York',
         offset: 'GMT-05:00',
+        UTCOffset: 'GMT-05:00',
+      },
+      {
+        value: 'Europe/London',
+        label: 'Europe/London',
+        offset: 'GMT+00:00',
+        UTCOffset: 'GMT+00:00',
+      },
+      {
+        value: 'Asia/Tokyo',
+        label: 'Asia/Tokyo',
+        offset: 'GMT+09:00',
+        UTCOffset: 'GMT+09:00',
       },
-      { value: 'Europe/London', label: 'Europe/London', offset: 'GMT+00:00' },
-      { value: 'Asia/Tokyo', label: 'Asia/Tokyo', offset: 'GMT+09:00' },
     ];
   }
 };
@@ -115,6 +134,7 @@ export const getSystemTimezone = (): Timezone => {
     value: systemTimezone,
     label: systemTimezone,
     offset: offsetStr,
+    UTCOffset: offsetStr.replace('GMT', 'UTC'),
   };
 };
 
@@ -128,10 +148,21 @@ export const useTimezone = () => {
     setCurrentTimezone(timezone);
   };
 
+  const getDateInCurrentTimezone = (date: Date = new Date()): Date => {
+    const timezone = (currentTimezone ?? getSystemTimezone()).value;
+
+    const timeInTimezone = date.toLocaleString('sv-SE', {
+      timeZone: timezone,
+    });
+
+    return new Date(timeInTimezone);
+  };
+
   return {
     currentTimezone: currentTimezone ?? getSystemTimezone(),
     availableTimezones: TIMEZONES,
     setTimezone,
+    getDateInCurrentTimezone,
   };
 };