Refactor component imports for consistency; streamline Menu and SideMenu components; enhance TableRow and TableWithPagination for better data handling; update Header component for improved user experience.

src/components/index.ts

@@ -1,7 +1,7 @@
 export * from './buttons';
 export * from './channel-icon-menu';
 export * from './error-renderer';
-export * from './ui/header'
+export * from './ui/header';
 export * from './layout';
 export * from './loaders';
 export * from './modal';

src/components/menu/index.tsx

@@ -33,13 +33,10 @@ const Menu = (props: IMenu) => {
         const active = currentLocation === path;
 
         return (
-          <MenuItem
+          <MenuItem className={active ? 'active' : ''} onClick={toggleShowMenu} key={menuItem} to={`/${applicationId}/${path}`}>
-            className={active ? 'active' : ''}
+            <span>
-            onClick={toggleShowMenu}
+              <FontAwesomeIcon icon={icon} />
-            key={menuItem}
+            </span>
-            to={`/${applicationId}/${path}`}
-          >
-            <span><FontAwesomeIcon icon={icon} /></span>
             <p>{menuItem}</p>
           </MenuItem>
         );
@@ -48,4 +45,4 @@ const Menu = (props: IMenu) => {
   );
 };
 
-export default Menu;
+export default Menu;

src/components/menu/style.ts

@@ -5,10 +5,7 @@ import * as styled from 'styled-components';
 import {Link} from 'components/ui';
 import {theme, paddings} from 'components/shared/theme';
 
-const {
+const {colors, primaryThemeColor} = theme;
-  colors,
-  primaryThemeColor
-} = theme;
 
 export const MenuLayout = styled.default.div`
   display: flex;
@@ -37,4 +34,4 @@ export const MenuItem = styled.default(Link)`
     font-size: 22px;
     margin: 0 ${paddings.medium} 0 0;
   }
-`;
+`;

src/components/side-menu/index.tsx

@@ -12,15 +12,10 @@ import Menu from 'components/menu';
 import NewTabLink from 'components/new-tab-link';
 import Toggle from 'components/toggle';
 
-import {
+import {Overlay, MenuView, SnapToBottom, FooterContainer} from './style';
-  Overlay,
-  MenuView,
-  SnapToBottom,
-  FooterContainer
-} from './style';
 import config from 'config';
 
-export const SideMenu = ({showMenu}: {showMenu: () => void }): JSX.Element => {
+export const SideMenu = ({showMenu}: {showMenu: () => void}): JSX.Element => {
   const dispatch = useAppDispatch();
   const timeFormat = useAppSelector((state: RootState) => state.preferredTimeFormat.timeFormat);
   const handleToggleChange = () => {
@@ -38,19 +33,11 @@ export const SideMenu = ({showMenu}: {showMenu: () => void }): JSX.Element => {
         <Menu toggleShowMenu={showMenu} />
         <SnapToBottom>
           <FooterContainer>
-            <Toggle
+            <Toggle onTitle="UTC" offTitle="Local Time" handleChange={handleToggleChange} position={timeFormat === TimeFormats.Utc ? 'on' : 'off'} />
-              onTitle="UTC"
+            <NewTabLink link={documentationLinks.releaseNotes} text={config.controlCenterVersion} />
-              offTitle="Local Time"
-              handleChange={handleToggleChange}
-              position={timeFormat === TimeFormats.Utc ? 'on' : 'off'}
-            />
-            <NewTabLink
-              link={documentationLinks.releaseNotes}
-              text={config.controlCenterVersion}
-            />
           </FooterContainer>
         </SnapToBottom>
       </MenuView>
     </>
   );
-};
+};

src/components/side-menu/style.ts

@@ -5,7 +5,11 @@ import * as styled from 'styled-components';
 import {theme, paddings} from 'components/shared/theme';
 import {ToggleContainer} from 'components/toggle/style';
 
-const {colors, footerHeight, typography: {fontSizeS}} = theme;
+const {
+  colors,
+  footerHeight,
+  typography: {fontSizeS}
+} = theme;
 
 export const Overlay = styled.default.div`
   position: fixed;
@@ -54,4 +58,4 @@ export const FooterContainer = styled.default.div`
   ${ToggleContainer} {
     justify-content: flex-start;
   }
-`;
+`;

src/components/table-screen-header/table-screen-header.tsx

@@ -11,7 +11,7 @@ export interface ITableScreenHeader {
   title: string;
   subtitle?: string;
   screenHeader: ScreenHeaderProps;
-  renderControl: (screenHeader: ScreenHeaderProps, key: TableHeaderKey) => JSX.Element | null;
+  renderControl?: (key: TableHeaderKey) => JSX.Element | null;
 }
 
 export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderControl}: ITableScreenHeader): JSX.Element => {
@@ -23,7 +23,7 @@ export const TableScreenHeader = ({title, subtitle = '', screenHeader, renderCon
       </HeaderTitle>
       <ScreenHeaderControls>
         {Object.keys(screenHeader).map(key => {
-          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl(screenHeader, key as TableHeaderKey);
+          const headerControl = screenHeader[key].render ? screenHeader[key].render(key) : renderControl?.(key as TableHeaderKey);
 
           return headerControl ? <HeaderControlWrapper key={key}>{headerControl}</HeaderControlWrapper> : null;
         })}

src/components/table-with-pagination/table-with-pagination.tsx

@@ -1,7 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import {DataRowType, Table, TableHeaderKey, ITable, ITableWithPaginationHeader, ITableSort} from 'components/table';
 import {isEqual} from 'utility/validators';
@@ -17,7 +17,7 @@ import {useSort, useSearch} from 'utility/custom-hooks';
 interface ITableWithPagination extends ITable {
   screenHeader: ITableWithPaginationHeader;
   paginationItemText?: string;
-  getCurrentDisplayList?: (data: Record<string, string | number | null>[]) => void;
+  getCurrentDisplayList?: (data: Record<string, string | number | null | undefined>[]) => void;
 }
 
 const TableWithPagination = ({
@@ -34,7 +34,7 @@ const TableWithPagination = ({
   changeSortProps,
   searchValue: propsSearchValue = '',
   changeSearch
-}: ITableWithPagination): JSX.Element => {
+}: ITableWithPagination): React.JSX.Element => {
   const [currentPageNumber, setCurrentPageNumber] = useState<number>(1);
   const [currentData, setCurrentData] = useState<DataRowType[]>([]);
   const [filteredData, setFilteredData] = useState<DataRowType[]>(data || []);
@@ -78,9 +78,9 @@ const TableWithPagination = ({
   useEffect(() => {
     let pxRatioBeforeZoom = window.devicePixelRatio;
     let windowHeightBeforeResize = window.innerHeight;
-    const trackResize = e => {
+    const trackResize = () => {
-      const pxRatioAfterZoom = e.devicePixelRatio;
+      const pxRatioAfterZoom = window.devicePixelRatio;
-      const windowHeightAfterResize = e.target.innerHeight;
+      const windowHeightAfterResize = window.innerHeight;
 
       if (pxRatioAfterZoom !== pxRatioBeforeZoom || windowHeightAfterResize !== windowHeightBeforeResize) {
         pxRatioBeforeZoom = pxRatioAfterZoom;
@@ -153,27 +153,53 @@ const TableWithPagination = ({
     }
   };
 
-  const renderControl = (screenHeader: ITableWithPaginationHeader, key: TableHeaderKey) => {
+  // Create enhanced screenHeader with render methods
-    switch (key) {
+  const enhancedScreenHeader = React.useMemo(() => {
-      case TableHeaderKey.Search:
+    const result = {...screenHeader};
-        return <SearchInput search={search} defaultValue={searchValue} />;
+
-      case TableHeaderKey.AddRow:
+    // Add render methods for controls that need them
-        return <AddButton onClick={screenHeader[key]?.openAddRowModal} className="testId-hashAddButton" />;
+    if (result[TableHeaderKey.Search]) {
-      case TableHeaderKey.SelectType:
+      result[TableHeaderKey.Search] = {
-        return <Select {...screenHeader[key]} />;
+        ...result[TableHeaderKey.Search],
-      default:
+        render: () => <SearchInput search={search} defaultValue={searchValue} />
-        return null;
+      };
     }
-  };
+
+    if (result[TableHeaderKey.AddRow]) {
+      const addRowConfig = result[TableHeaderKey.AddRow];
+      result[TableHeaderKey.AddRow] = {
+        ...addRowConfig,
+        render: () => <AddButton onClick={addRowConfig.openAddRowModal} className="testId-hashAddButton" />
+      };
+    }
+
+    if (result[TableHeaderKey.SelectType]) {
+      const selectTypeConfig = result[TableHeaderKey.SelectType];
+      result[TableHeaderKey.SelectType] = {
+        ...selectTypeConfig,
+        render: () => <Select {...selectTypeConfig} />
+      };
+    }
+
+    return result;
+  }, [screenHeader, search, searchValue]);
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
       <div style={{flexShrink: 0}}>
-        <TableScreenHeader title={title} screenHeader={screenHeader} renderControl={renderControl} />
+        <TableScreenHeader title={title} screenHeader={enhancedScreenHeader} />
       </div>
       <div style={{flex: 1, overflow: 'auto', minHeight: 0, position: 'relative'}}>
         <div style={{overflow: 'visible'}}>
-          <Table columns={columns} data={currentData} sortColumn={sortColumn} sortDirection={sortDirection} style={style} sort={sort} errorMessage={errorMessage} />
+          <Table
+            columns={columns}
+            data={currentData}
+            sortColumn={sortColumn}
+            sortDirection={sortDirection}
+            style={style}
+            sort={sort}
+            errorMessage={errorMessage}
+          />
         </div>
       </div>
       <div style={{flexShrink: 0}} className="pagination-container">

src/components/table/props.ts

@@ -42,6 +42,7 @@ export interface ITableColumn {
   isHidden?: boolean;
   width?: number;
   path?: string;
+  applicationId?: string;
 }
 
 export type ColumnsType = Record<string, ITableColumn>;

src/components/table/table-row.tsx

@@ -18,7 +18,7 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
   return (
     <tr className="table-row">
       {Object.keys(columns).map((key, idx) => {
-        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width} = columns[key];
+        const {isHidden, renderCell, dropdownCell, textCell, type, path = '', tdStyle, width, applicationId} = columns[key];
 
         if (isHidden) {
           return null;
@@ -60,12 +60,13 @@ export const TableRow = ({columns, row}: ITableRow): React.JSX.Element | null =>
               </td>
             );
           } else if (type === CellType.Link) {
-            let link = path || '';
+            // For channel names, use channelId for the URL but display the name
+            const channelId = globalThis.encodeURIComponent(row.channelId || value);
+            let link = path ? `${path}/${channelId}` : `/channels/${channelId}`;
 
             if (row.extraPath) {
               link += `${path ? '/' : ''}${row.extraPath}`;
             }
-
             return (
               <td key={`tableData${idx}`} style={tdStyle}>
                 <div>

src/components/toggle/index.tsx

@@ -1,14 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {
+import {ToggleContainer, ToggleHiddenInput, ToggleSwitchContainer, ToggleSwitch, ToggleTitleOn, ToggleTitleOff} from './style';
-  ToggleContainer,
-  ToggleHiddenInput,
-  ToggleSwitchContainer,
-  ToggleSwitch,
-  ToggleTitleOn,
-  ToggleTitleOff
-} from './style';
 
 interface IToggle {
   handleChange: () => void;
@@ -17,18 +10,13 @@ interface IToggle {
   position?: 'on' | 'off';
 }
 const Toggle = (props: IToggle): JSX.Element => {
-  const {
+  const {onTitle, offTitle, handleChange, position} = props;
-    onTitle,
-    offTitle,
-    handleChange,
-    position
-  } = props;
 
   return (
     <ToggleContainer>
       <ToggleHiddenInput type="checkbox" name="" id="toggle" checked={position === 'on'} onChange={handleChange} />
       {offTitle && <ToggleTitleOff>{offTitle}</ToggleTitleOff>}
-      <ToggleSwitchContainer htmlFor="toggle" >
+      <ToggleSwitchContainer htmlFor="toggle">
         <ToggleSwitch />
       </ToggleSwitchContainer>
       {onTitle && <ToggleTitleOn>{onTitle}</ToggleTitleOn>}
@@ -36,4 +24,4 @@ const Toggle = (props: IToggle): JSX.Element => {
   );
 };
 
-export default Toggle;
+export default Toggle;

src/components/toggle/style.ts

@@ -5,7 +5,10 @@ import * as styled from 'styled-components';
 
 import {theme} from 'components/shared/theme';
 
-const {colors, typography: {fontSizeS}} = theme;
+const {
+  colors,
+  typography: {fontSizeS}
+} = theme;
 
 export const ToggleContainer = styled.default.div`
   display: flex;
@@ -66,4 +69,4 @@ export const ToggleHiddenInput = styled.default.input`
       }
     }
   }
-`;
+`;

src/components/ui/header/index.tsx

@@ -1,12 +1,7 @@
 /**
  * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
  */
-import {
+import {useState, useEffect, useRef, JSX} from 'react';
-  useState,
-  useEffect,
-  useRef,
-  JSX
-} from 'react';
 import {useNavigate, useLocation} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
@@ -19,14 +14,7 @@ import text from './text';
 import {SideMenu} from 'components/side-menu';
 import urlRoutes from 'routers/url-routes';
 
-import {
+import {TopNavigation, User, ApplicationId, UserInitials, MenuIcon, NavigationLeftSide} from './style';
-  TopNavigation,
-  User,
-  ApplicationId,
-  UserInitials,
-  MenuIcon,
-  NavigationLeftSide
-} from './style';
 
 import logo from 'assets/images/phenix-logo-101x41.png';
 import menuIcon from 'assets/images/icon/menu.svg';
@@ -53,14 +41,14 @@ const Header = (): JSX.Element => {
     }
   };
 
-  const checkAndRedirect = async(): Promise<void> => {
+  const checkAndRedirect = async (): Promise<void> => {
-    const applicationId = await UserStoreService.get('applicationId') as string;
+    const applicationId = (await UserStoreService.get('applicationId')) as string;
 
     if (!applicationId) {
       return navigate(`/login/${search}`);
     }
 
-    const lastVisitedRoutes = await UserStoreService.get<Record<string, string>>('lastVisitedRouteByApplicationId') as Record<string, string>;
+    const lastVisitedRoutes = (await UserStoreService.get<Record<string, string>>('lastVisitedRouteByApplicationId')) as Record<string, string>;
     const lastVisitedRoute = lastVisitedRoutes[applicationId];
     const channelsPath = `/${urlRoutes.channels.path}/`;
 
@@ -73,24 +61,10 @@ const Header = (): JSX.Element => {
     }
   };
 
-  // const setLastVisitedRoute = async(): Promise<void> => {
-  //   const applicationId = await userStore.get('applicationId');
-  //   const lastVisitedRoutes = await userStore.get('lastVisitedRouteByApplicationId') || {};
-
-  //   await userStore.set('lastVisitedRouteByApplicationId', {
-  //     ...lastVisitedRoutes,
-  //     [applicationId]: pathname
-  //   });
-  // };
-
   useEffect(() => {
     checkAndRedirect();
   }, [isLoggedIn]);
 
-  // useEffect(() => {
-  //   setLastVisitedRoute();
-  // }, [pathname]);
-
   useEffect(() => {
     document.addEventListener('click', handleClickOutside, true);
 
@@ -99,27 +73,19 @@ const Header = (): JSX.Element => {
     };
   });
 
-  const handleLogout = async(): Promise<void> => {
+  const handleLogout = async (): Promise<void> => {
     dispatch(signoutThunk());
   };
 
   const handleCaretClick = () => setViewUserDetails(!viewUserDetails);
 
-  console.log('isLoggedIn', isLoggedIn);
-
   return (
     <TopNavigation isLoggedIn={isLoggedIn}>
       <NavigationLeftSide>
-        {(isLoggedIn && applicationId) &&
+        {isLoggedIn && applicationId && <MenuIcon onClick={() => setShowMenu(!showMenu)} src={menuIcon} alt="menuIcon" />}
-          <MenuIcon
-            onClick={() => setShowMenu(!showMenu)}
-            src={menuIcon}
-            alt="menuIcon"
-          />
-        }
         <img src={logo} alt={phenixText} />
       </NavigationLeftSide>
-      {(isLoggedIn && applicationId) &&
+      {isLoggedIn && applicationId && (
         <>
           <User ref={ref} onClick={handleCaretClick} className="user-info">
             <UserInitials>{userInitials}</UserInitials>
@@ -128,13 +94,11 @@ const Header = (): JSX.Element => {
               <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
             </div>
           </User>
-          {showMenu &&
+          {showMenu && <SideMenu showMenu={() => setShowMenu(!showMenu)} />}
-            <SideMenu showMenu={() => setShowMenu(!showMenu)} />
-          }
         </>
-      }
+      )}
     </TopNavigation>
   );
 };
 
-export default Header;
+export default Header;

src/components/ui/header/style.tsx

@@ -19,10 +19,12 @@ export const TopNavigation = styled.default.div<{isLoggedIn: boolean}>`
   left: 0;
   right: 0;
   z-index: 1000;
-  ${({isLoggedIn}) => isLoggedIn && styled.css`
+  ${({isLoggedIn}) =>
-    background-color: ${colors.headerColor};
+    isLoggedIn &&
-    padding: ${paddings.small} ${paddings.xlarge};
+    styled.css`
-  `}
+      background-color: ${colors.headerColor};
+      padding: ${paddings.small} ${paddings.xlarge};
+    `}
 `;
 
 export const NavigationLeftSide = styled.default.div`
@@ -73,4 +75,4 @@ export const UserInitials = styled.default.div`
   ${mediaPhone} {
     display: none;
   }
-`;
+`;

src/components/ui/header/text.ts

@@ -4,4 +4,4 @@
 export default {
   applicationIdText: 'Application Id',
   phenixText: 'Phenix'
-};
+};