fix(image) avoid null pointer exception on custom images, that have n…

…o properties set. fixes #716 Signed-off-by: David Edler <david.edler@canonical.com>
canonical · Mar 28, 2024 · 03a4ed7 · 03a4ed7
1 parent 47c1f06
commit 03a4ed7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
diff --git 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
@@ -14,7 +14,7 @@ const ImageName: FC<Props> = ({ 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
@@ -18,6 +18,8 @@ const DeleteImageBtn: FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ image, project }) => {
         title: "Confirm delete",
         children: (
           <p>
-            This will permanently delete image{" "}
-            <b>{image.properties.description}</b>.<br />
+            This will permanently delete image <b>{description}</b>.<br />
             This action cannot be undone, and can result in data loss.
           </p>
         ),

diff --git 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
@@ -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,
   };