feat(app): limit the docker API version supported by the frontend (#12295)

app/react/docker/components/datatables/TableColumnHeaderImageUpToDate.tsx

@@ -0,0 +1,70 @@
+import UpdatesAvailable from '@/assets/ico/icon_updates-available.svg?c';
+import UpToDate from '@/assets/ico/icon_up-to-date.svg?c';
+import UpdatesUnknown from '@/assets/ico/icon_updates-unknown.svg?c';
+import { useEnvironment } from '@/react/portainer/environments/queries';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
+
+import { Icon } from '@@/Icon';
+import { Tooltip } from '@@/Tip/Tooltip';
+import {
+  TableColumnHeaderAngular,
+  TableColumnHeaderAngularProps,
+} from '@@/datatables/TableHeaderCell';
+
+export function TableColumnHeaderImageUpToDate({
+  canSort,
+  isSorted,
+  colTitle,
+  isSortedDesc = true,
+}: TableColumnHeaderAngularProps) {
+  return (
+    <TableColumnHeaderAngular
+      canSort={canSort}
+      isSorted={isSorted}
+      colTitle={colTitle}
+      isSortedDesc={isSortedDesc}
+    >
+      <ImageUpToDateTooltip />
+    </TableColumnHeaderAngular>
+  );
+}
+
+export function ImageUpToDateTooltip() {
+  const environmentId = useEnvironmentId();
+
+  const enableImageNotificationQuery = useEnvironment(
+    environmentId,
+    (environment) => environment?.EnableImageNotification
+  );
+
+  if (!enableImageNotificationQuery.data) {
+    return null;
+  }
+
+  if (!isBE) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      position="top"
+      message={
+        <div className="flex flex-col gap-y-2 p-2">
+          <div className="flex items-center gap-2">
+            <Icon icon={UpToDate} />
+            Images are up to date
+          </div>
+          <div className="flex items-center gap-2">
+            <Icon icon={UpdatesAvailable} />
+            Updates are available
+          </div>
+          <div className="flex items-center gap-2">
+            <Icon icon={UpdatesUnknown} />
+            Updates availability unknown
+          </div>
+        </div>
+      }
+    />
+  );
+}

app/react/docker/components/datatables/createOwnershipColumn.tsx

@@ -0,0 +1,51 @@
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { Eye, EyeOff, Users } from 'lucide-react';
+
+import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
+
+import { Icon } from '@@/Icon';
+
+export interface IResource {
+  ResourceControl?: {
+    Ownership: ResourceControlOwnership;
+  };
+}
+
+export function createOwnershipColumn<D extends IResource>(
+  enableHiding = true
+): ColumnDef<D, ResourceControlOwnership> {
+  return {
+    accessorFn: (row) =>
+      row.ResourceControl?.Ownership || ResourceControlOwnership.ADMINISTRATORS,
+    header: 'Ownership',
+    id: 'ownership',
+    cell: OwnershipCell,
+    enableHiding,
+  };
+
+  function OwnershipCell({
+    getValue,
+  }: CellContext<D, ResourceControlOwnership>) {
+    const value = getValue();
+
+    return (
+      <span className="flex items-center gap-2">
+        <Icon icon={ownershipIcon(value)} className="space-right" />
+        {value}
+      </span>
+    );
+  }
+}
+
+export function ownershipIcon(ownership: ResourceControlOwnership) {
+  switch (ownership) {
+    case ResourceControlOwnership.PRIVATE:
+      return EyeOff;
+    case ResourceControlOwnership.ADMINISTRATORS:
+      return EyeOff;
+    case ResourceControlOwnership.RESTRICTED:
+      return Users;
+    default:
+      return Eye;
+  }
+}