Merge branch 'develop' into feat/deployments-paginated

web/crux-ui/locales/en/images.json

@@ -24,5 +24,6 @@
   "unknownTag": "unknown",
   "invalidImageFormat": "Invalid format, please use 'NAME[:TAG]'",
   "tagRequired": "Tag is required",
-  "uncheckedRegistryExplanation": "Please be aware that you are using an unchecked registry. The tag you enter will be used directly, which means if the tag does not exist, the deployment will fail."
+  "uncheckedRegistryExplanation": "Please be aware that you are using an unchecked registry. The tag you enter will be used directly, which means if the tag does not exist, the deployment will fail.",
+  "order": "Order"
 }

web/crux-ui/src/components/projects/versions/version-view-list.tsx

@@ -2,7 +2,7 @@ import { DyoCard } from '@app/elements/dyo-card'
 import DyoIcon from '@app/elements/dyo-icon'
 import DyoLink from '@app/elements/dyo-link'
 import DyoModal, { DyoConfirmationModal } from '@app/elements/dyo-modal'
-import DyoTable, { DyoColumn, sortDate, sortString } from '@app/elements/dyo-table'
+import DyoTable, { DyoColumn, sortDate, sortNumber, sortString } from '@app/elements/dyo-table'
 import useConfirmation from '@app/hooks/use-confirmation'
 import useTeamRoutes from '@app/hooks/use-team-routes'
 import { DeleteImageMessage, VersionImage, WS_TYPE_DELETE_IMAGE } from '@app/models'
@@ -54,6 +54,14 @@ const VersionViewList = (props: VersionViewListProps) => {
     <>
       <DyoCard className="relative mt-4">
         <DyoTable data={state.version.images} dataKey="id" initialSortColumn={0} initialSortDirection="asc">
+          <DyoColumn
+            className="w-1/12"
+            header={t('order')}
+            sortField="order"
+            sortable
+            sort={sortNumber}
+            body={data => `#${data.order + 1}`}
+          />
           <DyoColumn header={t('containerName')} field="config.name" sortable sort={sortString} />
           <DyoColumn
             header={t('common:registry')}

web/crux-ui/src/elements/dyo-table.tsx

@@ -284,7 +284,7 @@ const DyoTable = <T,>(props: React.PropsWithChildren<DyoTableProps<T>>) => {
           return (
             <tr key={key} className={headless ? null : 'hover:bg-medium-muted'}>
               {columns.map((col, index) => {
-                const cellData = col.field ? getField(it, col.field) : col.body ? col.body(it, index) : null
+                const cellData = col.field ? getField(it, col.field) : col.body ? col.body(it, rowIndex) : null
                 const paddingClass = index === 0 ? 'pl-6' : index === columns.length - 1 ? 'pr-6' : null
                 const cursorClass = click && !col.preventClickThrough ? 'cursor-pointer' : null
 

web/crux/prisma/migrations/20241126252000_normalize_image_order/migration.sql

@@ -0,0 +1,11 @@
+-- Create temp table
+SELECT "versionId", MIN("order") "order" INTO "_prisma_migrations_NormalizeOrder" FROM "Image" GROUP BY "versionId";
+
+-- Normalize orders
+UPDATE "Image" "img" SET "order" = "order" - (
+	SELECT "order" FROM "_prisma_migrations_NormalizeOrder" "norm"
+    WHERE "norm"."versionId" = "img"."versionId"
+);
+
+-- Drop temp table
+DROP TABLE "_prisma_migrations_NormalizeOrder";

web/crux/src/app/image/image.service.ts

@@ -109,7 +109,7 @@ export default class ImageService {
         },
       })
 
-      const lastOrder = lastImageOrder?.order ?? 0
+      const lastOrder = lastImageOrder?.order ?? -1
       let order = lastOrder + 1
 
       // we need the generated uuids, so we can't use createMany