feat(edge): sort waiting room table [EE-6259] (#10577)

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx

@@ -14,7 +14,6 @@ import {
 import { EnvironmentGroupId } from '@/react/portainer/environments/environment-groups/types';
 import {
   refetchIfAnyOffline,
-  SortType,
   useEnvironmentList,
 } from '@/react/portainer/environments/queries/useEnvironmentList';
 import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
@@ -37,6 +36,7 @@ import { NoEnvironmentsInfoPanel } from './NoEnvironmentsInfoPanel';
 import { UpdateBadge } from './UpdateBadge';
 import { EnvironmentListFilters } from './EnvironmentListFilters';
 import { AMTButton } from './AMTButton/AMTButton';
+import { ListSortType } from './SortbySelector';
 
 interface Props {
   onClickBrowse(environment: Environment): void;
@@ -70,7 +70,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
     []
   );
   const [sortByFilter, setSortByFilter] = useHomePageFilter<
-    SortType | undefined
+    ListSortType | undefined
   >('sortBy', undefined);
   const [sortByDescending, setSortByDescending] = useHomePageFilter(
     'sortOrder',

app/react/portainer/HomeView/EnvironmentList/EnvironmentListFilters.tsx

@@ -5,13 +5,9 @@ import { useTags } from '@/portainer/tags/queries';
 import { useAgentVersionsList } from '../../environments/queries/useAgentVersionsList';
 import { EnvironmentStatus, PlatformType } from '../../environments/types';
 import { useGroups } from '../../environments/environment-groups/queries';
-import {
-  SortOptions,
-  SortType,
-} from '../../environments/queries/useEnvironmentList';
 
 import { HomepageFilter } from './HomepageFilter';
-import { SortbySelector } from './SortbySelector';
+import { ListSortType, SortbySelector } from './SortbySelector';
 import { ConnectionType } from './types';
 import styles from './EnvironmentList.module.css';
 
@@ -20,11 +16,6 @@ const status = [
   { value: EnvironmentStatus.Down, label: 'Down' },
 ];
 
-const sortByOptions = SortOptions.map((v) => ({
-  value: v,
-  label: v,
-}));
-
 export function EnvironmentListFilters({
   agentVersions,
   clearFilter,
@@ -63,8 +54,8 @@ export function EnvironmentListFilters({
   setAgentVersions: (value: string[]) => void;
   agentVersions: string[];
 
-  sortByState?: SortType;
-  sortOnChange: (value: SortType) => void;
+  sortByState?: ListSortType;
+  sortOnChange: (value: ListSortType) => void;
 
   sortOnDescending: () => void;
   sortByDescending: boolean;
@@ -160,7 +151,6 @@ export function EnvironmentListFilters({
 
       <div className={styles.filterRight}>
         <SortbySelector
-          filterOptions={sortByOptions}
           onChange={sortOnChange}
           onDescending={sortOnDescending}
           placeHolder="Sort By"

app/react/portainer/HomeView/EnvironmentList/SortbySelector.tsx

@@ -1,24 +1,34 @@
 import clsx from 'clsx';
 
-import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
 import { TableHeaderSortIcons } from '@@/datatables/TableHeaderSortIcons';
 
-import { SortType } from '../../environments/queries/useEnvironmentList';
+import {
+  SortOptions,
+  SortType,
+} from '../../environments/queries/useEnvironmentList';
 
 import styles from './SortbySelector.module.css';
 
+export type ListSortType = Exclude<SortType, 'LastCheckIn' | 'EdgeID'>;
+
+const sortByOptions = SortOptions.filter(
+  (v): v is ListSortType => !['LastCheckIn', 'EdgeID'].includes(v)
+).map((v) => ({
+  value: v,
+  label: v,
+}));
+
 interface Props {
-  filterOptions: Option<SortType>[];
-  onChange: (value: SortType) => void;
+  onChange: (value: ListSortType) => void;
   onDescending: () => void;
   placeHolder: string;
   sortByDescending: boolean;
   sortByButton: boolean;
-  value?: SortType;
+  value?: ListSortType;
 }
 
 export function SortbySelector({
-  filterOptions,
   onChange,
   onDescending,
   placeHolder,
@@ -31,8 +41,8 @@ export function SortbySelector({
     <div className="flex items-center justify-end gap-1">
       <PortainerSelect
         placeholder={placeHolder}
-        options={filterOptions}
-        onChange={(option: SortType) => onChange(option || '')}
+        options={sortByOptions}
+        onChange={(option: ListSortType) => onChange(option)}
         isClearable
         value={value}
       />

app/react/portainer/environments/queries/useEnvironmentList.ts

@@ -12,12 +12,22 @@ import { environmentQueryKeys } from './query-keys';
 
 export const ENVIRONMENTS_POLLING_INTERVAL = 30000; // in ms
 
-export const SortOptions = ['Name', 'Group', 'Status'] as const;
+export const SortOptions = [
+  'Name',
+  'Group',
+  'Status',
+  'LastCheckIn',
+  'EdgeID',
+] as const;
 export type SortType = (typeof SortOptions)[number];
 export function isSortType(value?: string): value is SortType {
   return SortOptions.includes(value as SortType);
 }
 
+export function getSortType(value?: string): SortType | undefined {
+  return isSortType(value) ? value : undefined;
+}
+
 export type Query = EnvironmentsQueryParams & {
   page?: number;
   pageLimit?: number;