diff --git a/src/pages/images/ImageList.tsx b/src/pages/images/ImageList.tsx index cb2065ef0..556acde15 100644 --- a/src/pages/images/ImageList.tsx +++ b/src/pages/images/ImageList.tsx @@ -89,7 +89,9 @@ const ImageList: FC = () => { const filteredImages = images.filter( (item) => !query || - item.properties.description.toLowerCase().includes(query.toLowerCase()) || + (item.properties?.description ?? "") + .toLowerCase() + .includes(query.toLowerCase()) || item.aliases .map((alias) => alias.name) .join(", ") @@ -114,12 +116,13 @@ const ImageList: FC = () => { ); const imageAlias = image.aliases.map((alias) => alias.name).join(", "); + const description = image.properties?.description ?? image.fingerprint; return { name: image.fingerprint, columns: [ { - content: image.properties.description, + content: description, role: "cell", "aria-label": "Name", }, @@ -167,7 +170,7 @@ const ImageList: FC = () => { }, ], sortData: { - name: image.properties.description.toLowerCase(), + name: description.toLowerCase(), alias: imageAlias.toLowerCase(), architecture: image.architecture, public: image.public, diff --git a/src/pages/images/ImageName.tsx b/src/pages/images/ImageName.tsx index 07c72c17c..9d87d708f 100644 --- a/src/pages/images/ImageName.tsx +++ b/src/pages/images/ImageName.tsx @@ -14,7 +14,7 @@ const ImageName: FC = ({ id, project }) => { queryFn: () => fetchImage(id, project), }); - const label = image?.properties.description + const label = image?.properties?.description ? image.properties.description : id; diff --git a/src/pages/images/actions/DeleteImageBtn.tsx b/src/pages/images/actions/DeleteImageBtn.tsx index 2f12b76af..f4d8b21c3 100644 --- a/src/pages/images/actions/DeleteImageBtn.tsx +++ b/src/pages/images/actions/DeleteImageBtn.tsx @@ -18,6 +18,8 @@ const DeleteImageBtn: FC = ({ image, project }) => { const [isLoading, setLoading] = useState(false); const queryClient = useQueryClient(); + const description = image.properties?.description ?? image.fingerprint; + const handleDelete = () => { setLoading(true); void deleteImage(image, project) @@ -31,23 +33,18 @@ const DeleteImageBtn: FC = ({ image, project }) => { void queryClient.invalidateQueries({ queryKey: [queryKeys.projects, project], }); - toastNotify.success( - `Image ${image.properties.description} deleted.`, - ); + toastNotify.success(`Image ${description} deleted.`); }, (msg) => toastNotify.failure( - `Image ${image.properties.description} deletion failed`, + `Image ${description} deletion failed`, new Error(msg), ), () => setLoading(false), ), ) .catch((e) => { - toastNotify.failure( - `Image ${image.properties.description} deletion failed`, - e, - ); + toastNotify.failure(`Image ${description} deletion failed`, e); setLoading(false); }); }; @@ -59,8 +56,7 @@ const DeleteImageBtn: FC = ({ image, project }) => { title: "Confirm delete", children: (

- This will permanently delete image{" "} - {image.properties.description}.
+ This will permanently delete image {description}.
This action cannot be undone, and can result in data loss.

), diff --git a/src/types/image.d.ts b/src/types/image.d.ts index 08204a9c6..b46525904 100644 --- a/src/types/image.d.ts +++ b/src/types/image.d.ts @@ -10,7 +10,7 @@ interface LxdImageAlias { export interface LxdImage { fingerprint: string; public: boolean; - properties: { + properties?: { description: string; os: string; release: string; diff --git a/src/util/images.tsx b/src/util/images.tsx index 91026c063..de9d7f412 100644 --- a/src/util/images.tsx +++ b/src/util/images.tsx @@ -42,9 +42,9 @@ export const localLxdToRemoteImage = (image: LxdImage): RemoteImage => { return { aliases: image.update_source?.alias ?? image.fingerprint, arch: image.architecture === "x86_64" ? "amd64" : image.architecture, - os: image.properties.os, + os: image.properties?.os ?? "", created_at: new Date(image.uploaded_at).getTime(), - release: image.properties.release, + release: image.properties?.release ?? "", server: image.update_source?.server, type: image.type, };