chore: replace enum with object as const (#5308)

* chore: replace `enum` with `object as const`

* chore: introduce `ValueOf`

* fix: type

* fix: test

webui/react/src/components/Badge.tsx

@@ -4,18 +4,21 @@ import React, { CSSProperties, useMemo } from 'react';
 import { stateToLabel } from 'constants/states';
 import { useStore } from 'contexts/Store';
 import { DarkLight, getCssVar } from 'shared/themes';
+import { ValueOf } from 'shared/types';
 import { hsl2str, str2hsl } from 'shared/utils/color';
 import { getStateColorCssVar, StateOfUnion } from 'themes';
 import { ResourceState, RunState, SlotState } from 'types';
 
 import css from './Badge.module.scss';
 
-export enum BadgeType {
-  Default = 'Default',
-  Header = 'Header',
-  Id = 'Id',
-  State = 'State',
-}
+export const BadgeType = {
+  Default: 'Default',
+  Header: 'Header',
+  Id: 'Id',
+  State: 'State',
+} as const;
+
+export type BadgeType = ValueOf<typeof BadgeType>;
 
 export interface BadgeProps {
   children?: React.ReactNode;

webui/react/src/components/Bar.stories.tsx

@@ -27,5 +27,5 @@ export const Default: ComponentStory<typeof Bar> = (args) => (
 Default.args = {
   barOnly: false,
   inline: false,
-  size: ShirtSize.small,
+  size: ShirtSize.Small,
 };

webui/react/src/components/Bar.tsx

@@ -37,12 +37,12 @@ const partStyle = (part: BarPart) => {
 };
 
 const sizeMap = {
-  [ShirtSize.small]: '4px',
-  [ShirtSize.medium]: '12px',
-  [ShirtSize.large]: '24px',
+  [ShirtSize.Small]: '4px',
+  [ShirtSize.Medium]: '12px',
+  [ShirtSize.Large]: '24px',
 };
 
-const Bar: React.FC<Props> = ({ barOnly, inline, parts, size = ShirtSize.small }: Props) => {
+const Bar: React.FC<Props> = ({ barOnly, inline, parts, size = ShirtSize.Small }: Props) => {
   const classes: string[] = [css.base];
 
   if (barOnly) classes.push(css.barOnly);

webui/react/src/components/Dropdown.tsx

@@ -1,21 +1,25 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { ValueOf } from 'shared/types';
+
 import css from './Dropdown.module.scss';
 
-export enum Placement {
-  Bottom = 'bottom',
-  BottomLeft = 'bottomLeft',
-  BottomRight = 'bottomRight',
-  Left = 'left',
-  LeftBottom = 'leftBottom',
-  LeftTop = 'leftTop',
-  Right = 'right',
-  RightTop = 'rightTop',
-  RightBottom = 'rightBottom',
-  Top = 'top',
-  TopLeft = 'topLeft',
-  TopRight = 'topRight',
-}
+export const Placement = {
+  Bottom: 'bottom',
+  BottomLeft: 'bottomLeft',
+  BottomRight: 'bottomRight',
+  Left: 'left',
+  LeftBottom: 'leftBottom',
+  LeftTop: 'leftTop',
+  Right: 'right',
+  RightBottom: 'rightBottom',
+  RightTop: 'rightTop',
+  Top: 'top',
+  TopLeft: 'topLeft',
+  TopRight: 'topRight',
+} as const;
+
+export type Placement = ValueOf<typeof Placement>;
 
 interface Props {
   children: React.ReactNode;

webui/react/src/components/Grid.stories.tsx

@@ -40,19 +40,19 @@ export const Default: Story<GridProps & { gridElements: number }> = ({ gridEleme
 );
 
 export const SmallCells = (): React.ReactNode => (
-  <Grid gap={ShirtSize.large} minItemWidth={100}>
+  <Grid gap={ShirtSize.Large} minItemWidth={100}>
     {GridElements}
   </Grid>
 );
 
 export const BigCells = (): React.ReactNode => (
-  <Grid gap={ShirtSize.large} minItemWidth={300}>
+  <Grid gap={ShirtSize.Large} minItemWidth={300}>
     {GridElements}
   </Grid>
 );
 
 Default.args = {
-  gap: ShirtSize.large,
+  gap: ShirtSize.Large,
   gridElements: 27,
   minItemWidth: 240,
   mode: GridMode.AutoFit,

webui/react/src/components/Grid.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
+import { ValueOf } from 'shared/types';
 import { ShirtSize } from 'themes';
 
 import css from './Grid.module.scss';
 
-export enum GridMode {
-  AutoFill = 'auto-fill', // will squeeze as many items into a given space and minimum size
-  AutoFit = 'auto-fit', // auto-fill but also stretch to fit the entire available space.
-}
+export const GridMode = {
+  AutoFill: 'auto-fill', // will squeeze as many items into a given space and minimum size
+  AutoFit: 'auto-fit', // auto-fill but also stretch to fit the entire available space.
+} as const;
+
+export type GridMode = ValueOf<typeof GridMode>;
 
 interface Props {
   border?: boolean;
@@ -18,14 +21,14 @@ interface Props {
 }
 
 const sizeMap = {
-  [ShirtSize.small]: '4px',
-  [ShirtSize.medium]: '8px',
-  [ShirtSize.large]: '16px',
+  [ShirtSize.Small]: '4px',
+  [ShirtSize.Medium]: '8px',
+  [ShirtSize.Large]: '16px',
 };
 
 const Grid: React.FC<Props> = ({
   border,
-  gap = ShirtSize.medium,
+  gap = ShirtSize.Medium,
   minItemWidth = 240,
   mode = GridMode.AutoFit,
   children,

webui/react/src/components/GridListRadioGroup.tsx

@@ -1,11 +1,15 @@
 import React, { useCallback } from 'react';
 
+import { ValueOf } from 'shared/types';
+
 import RadioGroup from './RadioGroup';
 
-export enum GridListView {
-  Grid = 'grid',
-  List = 'list',
-}
+export const GridListView = {
+  Grid: 'grid',
+  List: 'list',
+} as const;
+
+export type GridListView = ValueOf<typeof GridListView>;
 
 interface Props {
   onChange?: (view: GridListView) => void;

webui/react/src/components/IconCounter.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
 
 import Icon from 'shared/components/Icon/Icon';
+import { ValueOf } from 'shared/types';
 
 import css from './IconCounter.module.scss';
 
+const IconCounterType = {
+  Active: 'active',
+  Disabled: 'disabled',
+} as const;
+
+type IconCounterType = ValueOf<typeof IconCounterType>;
+
 interface Props {
   count: number;
   name: string;
   onClick: () => void;
   type: IconCounterType;
 }
 
-enum IconCounterType {
-  Active = 'active',
-  Disabled = 'disabled',
-}
-
 const IconCounter: React.FC<Props> = (props: Props) => {
   const classes = [css.base];
   if (props.type) classes.push(css[props.type]);

webui/react/src/components/Label.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
+import { ValueOf } from 'shared/types';
+
 import css from './Label.module.scss';
 
-export enum LabelTypes {
-  TextOnly = 'textOnly',
-}
+export const LabelTypes = {
+  TextOnly: 'textOnly',
+} as const;
+
+export type LabelTypes = ValueOf<typeof LabelTypes>;
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

webui/react/src/components/LoadingWrapper.tsx

@@ -2,16 +2,19 @@ import { Skeleton, SkeletonProps } from 'antd';
 import React, { useMemo } from 'react';
 
 import Message, { Props as MessageProps, MessageType } from 'shared/components/Message';
+import { ValueOf } from 'shared/types';
 import { isObject, validateEnum } from 'shared/utils/data';
 
 import css from './LoadingWrapper.module.scss';
 
-export enum LoadingState {
-  Empty = 'Empty',
-  Error = 'Error',
-  Loaded = 'Loaded',
-  Loading = 'Loading',
-}
+export const LoadingState = {
+  Empty: 'Empty',
+  Error: 'Error',
+  Loaded: 'Loaded',
+  Loading: 'Loading',
+} as const;
+
+export type LoadingState = ValueOf<typeof LoadingState>;
 
 type LoadingMessageProps = React.ReactNode | MessageProps;
 type LoadingSkeletonProps = React.ReactNode | SkeletonProps;

webui/react/src/components/LogViewer/LogViewer.tsx

@@ -1,5 +1,6 @@
 import { Button, notification, Space, Tooltip } from 'antd';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import {
   ListChildComponentProps,
   ListOnItemsRenderedProps,
@@ -19,7 +20,7 @@ import { readStream } from 'services/utils';
 import Icon from 'shared/components/Icon/Icon';
 import Message, { MessageType } from 'shared/components/Message';
 import Spinner from 'shared/components/Spinner';
-import { RecordKey } from 'shared/types';
+import { RecordKey, ValueOf } from 'shared/types';
 import { clone } from 'shared/utils/data';
 import { formatDatetime } from 'shared/utils/datetime';
 import { copyToClipboard } from 'shared/utils/dom';
@@ -53,17 +54,21 @@ export interface FetchConfig {
   offsetLog?: Log;
 }
 
-export enum FetchType {
-  Initial = 'Initial',
-  Newer = 'Newer',
-  Older = 'Older',
-  Stream = 'Stream',
-}
+export const FetchType = {
+  Initial: 'Initial',
+  Newer: 'Newer',
+  Older: 'Older',
+  Stream: 'Stream',
+} as const;
 
-export enum FetchDirection {
-  Newer = 'Newer',
-  Older = 'Older',
-}
+export type FetchType = ValueOf<typeof FetchType>;
+
+export const FetchDirection = {
+  Newer: 'Newer',
+  Older: 'Older',
+} as const;
+
+export type FetchDirection = ValueOf<typeof FetchDirection>;
 
 export const ARIA_LABEL_ENABLE_TAILING = 'Enable Tailing';
 export const ARIA_LABEL_SCROLL_TO_OLDEST = 'Scroll to Oldest';
@@ -122,9 +127,9 @@ const LogViewer: React.FC<Props> = ({
   const [isFetching, setIsFetching] = useState(false);
   const local = useRef(clone(defaultLocal));
   const [canceler] = useState(new AbortController());
-  const [fetchDirection, setFetchDirection] = useState(FetchDirection.Older);
-  const [isTailing, setIsTailing] = useState(true);
-  const [showButtons, setShowButtons] = useState(false);
+  const [fetchDirection, setFetchDirection] = useState<FetchDirection>(FetchDirection.Older);
+  const [isTailing, setIsTailing] = useState<boolean>(true);
+  const [showButtons, setShowButtons] = useState<boolean>(false);
   const [logs, setLogs] = useState<ViewerLog[]>([]);
   const containerSize = useResize(logsRef);
   const charMeasures = useGetCharMeasureInContainer(logsRef);
@@ -177,8 +182,10 @@ const LogViewer: React.FC<Props> = ({
   const addLogs = useCallback(
     (newLogs: ViewerLog[], prepend = false): void => {
       if (newLogs.length === 0) return;
-      setLogs((prevLogs) => (prepend ? [...newLogs, ...prevLogs] : [...prevLogs, ...newLogs]));
-      resizeLogs();
+      flushSync(() => {
+        setLogs((prevLogs) => (prepend ? [...newLogs, ...prevLogs] : [...prevLogs, ...newLogs]));
+        resizeLogs();
+      });
     },
     [resizeLogs],
   );
@@ -303,7 +310,10 @@ const LogViewer: React.FC<Props> = ({
       local.current.isScrollReady = false;
       local.current.isAtOffsetEnd = false;
 
-      setFetchDirection(FetchDirection.Newer);
+      flushSync(() => {
+        setLogs([]);
+        setFetchDirection(FetchDirection.Newer);
+      });
     }
   }, [fetchDirection]);
 

webui/react/src/components/Logo.tsx

@@ -9,15 +9,18 @@ import logoDeterminedOnLightVertical from 'shared/assets/images/logo-determined-
 import logoHpeOnDarkHorizontal from 'shared/assets/images/logo-hpe-on-dark-horizontal.svg';
 import logoHpeOnLightHorizontal from 'shared/assets/images/logo-hpe-on-light-horizontal.svg';
 import { DarkLight } from 'shared/themes';
+import { ValueOf } from 'shared/types';
 import { reactHostAddress } from 'shared/utils/routes';
 import { BrandingType } from 'types';
 
 import css from './Logo.module.scss';
 
-export enum Orientation {
-  Horizontal = 'horizontal',
-  Vertical = 'vertical',
-}
+export const Orientation = {
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+} as const;
+
+export type Orientation = ValueOf<typeof Orientation>;
 
 interface Props {
   branding: BrandingType;

webui/react/src/components/Markdown.tsx

@@ -23,10 +23,10 @@ interface RenderProps {
   placeholder?: string;
 }
 
-enum TabType {
-  Edit = 'edit',
-  Preview = 'preview',
-}
+const TabType = {
+  Edit: 'edit',
+  Preview: 'preview',
+} as const;
 
 const MarkdownRender: React.FC<RenderProps> = ({ markdown, placeholder, onClick }) => {
   const showPlaceholder = !markdown && placeholder;