fix(FR-2823): migrate Environment > Images table to server-side ordering

Resolves #7257(FR-2823)

The Images tab on `/environment` paginates server-side but sorted client-side
via per-column `sorter: (a, b) => ...` callbacks, which can only reorder rows on
the current page — column header clicks gave a misleading partial sort. The
backing `image_nodes` GraphQL query already exposes `$order: String`, but the
page hard-coded `order: undefined` and never plumbed the table's sort state
through.

- Add URL-persisted `order` state via `nuqs` `useQueryStates` (default
  `-installed`, matching the prior `defaultSortOrder: descend` on the Status
  column).
- Pass `order: queryParams.order` through to `image_nodes(...)`.
- Replace each per-column in-memory comparator with `sorter: true` so BAITable
  emits sort changes via `onChangeOrder` instead of sorting locally.
- Drop the sortable affordance on `FullImagePath` (computed via
  `getImageFullName`, not server-orderable).
- Wire `order` and `onChangeOrder` to BAITable; resetting to page 1 on order
  change matches the listing-page convention.
- Remove the now-unused `localeCompare` import.

This follows the URL-state-driven server-order pattern already established in
`react/src/pages/ProjectPage.tsx`.

Verification:
- Relay: PASS (no schema change)
- Lint: PASS
- Format: PASS
- TypeScript: pre-existing failures only (unrelated)

Author: ironAiken2

react/src/components/ImageList.tsx

@@ -7,7 +7,7 @@ import {
   ImageListQuery$data,
   ImageListQuery$variables,
 } from '../__generated__/ImageListQuery.graphql';
-import { getImageFullName, localeCompare } from '../helper';
+import { getImageFullName } from '../helper';
 import { useBackendAIImageMetaData } from '../hooks';
 import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
@@ -38,6 +38,7 @@ import {
   INITIAL_FETCH_KEY,
 } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
+import { parseAsStringLiteral, useQueryStates } from 'nuqs';
 import { Key, useDeferredValue, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
@@ -46,6 +47,19 @@ export type EnvironmentImage = NonNullableNodeOnEdges<
   ImageListQuery$data['image_nodes']
 >;
 
+const availableImageSorterKeys = [
+  'registry',
+  'architecture',
+  'namespace',
+  'base_image_name',
+] as const;
+const availableImageSorterValues = [
+  ...availableImageSorterKeys,
+  ...availableImageSorterKeys.map((key) => `-${key}` as const),
+] as const;
+const isEnableSorter = (key: string) =>
+  _.includes(availableImageSorterKeys, key);
+
 const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
   'use memo';
 
@@ -65,7 +79,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
   const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
     useToggle();
   const [isPendingRefreshTransition, startRefreshTransition] = useTransition();
-  const [isPendingFilterTransition, startFilterTransition] = useTransition();
+  const [, startFilterTransition] = useTransition();
   const currentProject = useCurrentProjectValue();
 
   const {
@@ -77,12 +91,19 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
     pageSize: 20,
   });
 
+  const [queryParams, setQueryParams] = useQueryStates(
+    {
+      order: parseAsStringLiteral(availableImageSorterValues),
+    },
+    { history: 'replace' },
+  );
+
   const queryVariables: ImageListQuery$variables = {
     scopeId: `project:${currentProject.id}`,
     offset: baiPaginationOption.offset,
     first: baiPaginationOption.first,
     filter: imageFilter || undefined,
-    order: undefined,
+    order: queryParams.order || undefined,
   };
   const deferredQueryVariables = useDeferredValue(queryVariables);
   const deferredFetchKey = useDeferredValue(fetchKey);
@@ -157,10 +178,6 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       title: t('environment.Status'),
       dataIndex: 'installed',
       key: 'installed',
-      defaultSortOrder: 'descend',
-      sorter: (a, b) => {
-        return _.toNumber(a?.installed || 0) - _.toNumber(b?.installed || 0);
-      },
       render: (_text, row) =>
         row?.id && installingImages.includes(row.id) ? (
           <Tag color="gold">{t('environment.Installing')}</Tag>
@@ -180,39 +197,38 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
           {getImageFullName(row) || ''}
         </Typography.Text>
       ),
-      sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      // Computed (`getImageFullName`) — not orderable on the server.
       width: token.screenXS,
     },
     {
       title: t('environment.Registry'),
       dataIndex: 'registry',
       key: 'registry',
-      sorter: (a, b) => localeCompare(a?.registry, b?.registry),
+      sorter: isEnableSorter('registry'),
     },
     {
       title: t('environment.Architecture'),
       dataIndex: 'architecture',
       key: 'architecture',
-      sorter: (a, b) => localeCompare(a?.architecture, b?.architecture),
+      sorter: isEnableSorter('architecture'),
     },
     {
       title: t('environment.Namespace'),
       key: 'namespace',
       dataIndex: 'namespace',
-      sorter: (a, b) => localeCompare(a?.namespace, b?.namespace),
+      sorter: isEnableSorter('namespace'),
     },
     {
       title: t('environment.BaseImageName'),
       key: 'base_image_name',
       dataIndex: 'base_image_name',
-      sorter: (a, b) => localeCompare(a?.base_image_name, b?.base_image_name),
+      sorter: isEnableSorter('base_image_name'),
       render: (text) => tagAlias(text),
     },
     {
       title: t('environment.Version'),
       key: 'version',
       dataIndex: 'version',
-      sorter: (a, b) => localeCompare(a?.version, b?.version),
     },
     {
       title: t('environment.Tags'),
@@ -226,7 +242,6 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       title: t('environment.Digest'),
       dataIndex: 'digest',
       key: 'digest',
-      sorter: (a, b) => localeCompare(a?.digest || '', b?.digest || ''),
       render: (_text, row) => (
         <Typography.Text ellipsis={{ tooltip: true }} style={{ maxWidth: 200 }}>
           {row.digest}
@@ -458,7 +473,19 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             columns,
             (column) => !_.includes(hiddenColumnKeys, _.toString(column?.key)),
           )}
-          loading={isPendingFilterTransition}
+          loading={
+            deferredFetchKey !== fetchKey ||
+            deferredQueryVariables !== queryVariables
+          }
+          order={queryParams.order}
+          onChangeOrder={(order) => {
+            setQueryParams({
+              order: order as
+                | (typeof availableImageSorterValues)[number]
+                | null,
+            });
+            setTablePaginationOption({ current: 1 });
+          }}
           rowSelection={{
             type: 'checkbox',
             onChange: (_, selectedRows) => {