Improve display of readOnly metadata (#5002)

* improve readOnly metadata * changesets * simplify code * simplify code --------- Co-authored-by: Paweł Chyła <[email protected]>
saleor · Jul 8, 2024 · c999eb3 · c999eb3
1 parent 116b4df
commit c999eb3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 32 deletions.
diff --git a/.changeset/giant-dancers-raise.md b/.changeset/giant-dancers-raise.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Read-only metadata keys and values will now be displayed as regular inputs, making them easier to read and preventing them from looking disabled.
diff --git a/src/components/Metadata/MetadataCardTable.tsx b/src/components/Metadata/MetadataCardTable.tsx
@@ -77,21 +77,20 @@ export const MetadataCardTable = ({
           {data.map((field, fieldIndex) => (
             <TableRowLink data-test-id="field" key={fieldIndex}>
               <TableCell width="50%" style={{ paddingLeft: vars.spacing[6] }}>
-                {readonly ? (
-                  <Text variant="caption" size="large" color="default2">
-                    {field.key}
-                  </Text>
-                ) : (
-                  <Input
-                    data-test-id="metadata-key-input"
-                    width="100%"
-                    size="small"
-                    aria-label={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
-                    name={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
-                    onChange={onChange}
-                    value={field.key}
-                  />
-                )}
+                <Input
+                  data-test-id="metadata-key-input"
+                  width="100%"
+                  size="small"
+                  aria-label={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
+                  name={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
+                  onChange={onChange}
+                  value={field.key}
+                  readOnly={readonly}
+                  color="default1"
+                  style={{
+                    fontWeight: "bold",
+                  }}
+                />
               </TableCell>
               <TableCell
                 width="50%"
@@ -100,23 +99,18 @@ export const MetadataCardTable = ({
                   paddingBottom: vars.spacing[2],
                 }}
               >
-                {readonly ? (
-                  <Text variant="caption" size="large" color="default2">
-                    {field.value}
-                  </Text>
-                ) : (
-                  <Textarea
-                    data-test-id="metadata-value-input"
-                    disabled={readonly}
-                    width="100%"
-                    rows={1}
-                    size="small"
-                    aria-label={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
-                    name={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
-                    onChange={onChange}
-                    value={field.value}
-                  />
-                )}
+                <Textarea
+                  data-test-id="metadata-value-input"
+                  readOnly={readonly}
+                  width="100%"
+                  rows={1}
+                  size="small"
+                  aria-label={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
+                  name={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
+                  onChange={onChange}
+                  value={field.value}
+                  color="default1"
+                />
               </TableCell>
               {!readonly && (
                 <TableCell style={{ paddingRight: vars.spacing[6] }}>