From 4618ab5cdcfe997b9ff9ee7b0f42f2524f60c919 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 15 Jan 2025 17:39:48 +0530
Subject: [PATCH] hide upload image button when user can not edit pack

---
 .../image-pack-view/ImagePackContent.tsx      | 100 +++++++++---------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/app/components/image-pack-view/ImagePackContent.tsx b/src/app/components/image-pack-view/ImagePackContent.tsx
index be171625..86a908c2 100644
--- a/src/app/components/image-pack-view/ImagePackContent.tsx
+++ b/src/app/components/image-pack-view/ImagePackContent.tsx
@@ -330,54 +330,58 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
             />
           </SequenceCard>
         </Box>
-        <Box direction="Column" gap="100">
-          <Text size="L400">Images</Text>
-          <SequenceCard
-            style={{ padding: config.space.S300 }}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="400"
-          >
-            <SettingTile
-              title="Upload Images"
-              description="Select images from your storage to upload them in pack."
-              after={
-                <Button
-                  variant="Secondary"
-                  fill="Soft"
-                  size="300"
-                  radii="300"
-                  type="button"
-                  outlined
-                  onClick={() => pickFiles('image/*')}
-                >
-                  <Text size="B300">Select</Text>
-                </Button>
-              }
-            />
-          </SequenceCard>
-          {files.map((file) => (
-            <SequenceCard
-              key={file.name}
-              style={{ padding: config.space.S300 }}
-              variant="SurfaceVariant"
-              direction="Column"
-              gap="400"
-            >
-              <ImageTileUpload file={file}>
-                {(uploadAtom) => (
-                  <CompactUploadCardRenderer
-                    uploadAtom={uploadAtom}
-                    onRemove={handleUploadRemove}
-                    onComplete={handleUploadComplete}
-                  />
-                )}
-              </ImageTileUpload>
-            </SequenceCard>
-          ))}
-          {uploadedImages.map(renderImage)}
-          {images.map(renderImage)}
-        </Box>
+        {images.length === 0 && !canEdit ? null : (
+          <Box direction="Column" gap="100">
+            <Text size="L400">Images</Text>
+            {canEdit && (
+              <SequenceCard
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="400"
+              >
+                <SettingTile
+                  title="Upload Images"
+                  description="Select images from your storage to upload them in pack."
+                  after={
+                    <Button
+                      variant="Secondary"
+                      fill="Soft"
+                      size="300"
+                      radii="300"
+                      type="button"
+                      outlined
+                      onClick={() => pickFiles('image/*')}
+                    >
+                      <Text size="B300">Select</Text>
+                    </Button>
+                  }
+                />
+              </SequenceCard>
+            )}
+            {files.map((file) => (
+              <SequenceCard
+                key={file.name}
+                style={{ padding: config.space.S300 }}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="400"
+              >
+                <ImageTileUpload file={file}>
+                  {(uploadAtom) => (
+                    <CompactUploadCardRenderer
+                      uploadAtom={uploadAtom}
+                      onRemove={handleUploadRemove}
+                      onComplete={handleUploadComplete}
+                    />
+                  )}
+                </ImageTileUpload>
+              </SequenceCard>
+            ))}
+            {uploadedImages.map(renderImage)}
+            {images.map(renderImage)}
+          </Box>
+        )}
       </Box>
     );
   }