From fa055c286ee149a48cf47203ef8e1624e32de1ca Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Tue, 20 Jun 2023 12:04:20 +0200
Subject: [PATCH] feat: add readOnly support to React Material array and list
 with detail

Closes #1901
---
 packages/core/src/util/renderer.ts            |  1 +
 .../additional/ListWithDetailMasterItem.tsx   | 21 ++++---
 .../MaterialListWithDetailRenderer.tsx        |  3 +
 .../src/layouts/ArrayToolbar.tsx              | 60 ++++++++++++-------
 .../src/layouts/ExpandPanelRenderer.tsx       | 24 ++++----
 .../src/layouts/MaterialArrayLayout.tsx       |  1 +
 6 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index e16b2a9c7..6aba2bdcb 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -682,6 +682,7 @@ export interface OwnPropsOfMasterListItem {
   index: number;
   selected: boolean;
   path: string;
+  enabled: boolean;
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;
diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
index 121afdb09..b15be7181 100644
--- a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
+++ b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -39,6 +39,7 @@ export const ListWithDetailMasterItem = ({
   index,
   childLabel,
   selected,
+  enabled,
   handleSelect,
   removeItem,
   path,
@@ -50,15 +51,17 @@ export const ListWithDetailMasterItem = ({
         <Avatar aria-label='Index'>{index + 1}</Avatar>
       </ListItemAvatar>
       <ListItemText primary={childLabel} />
-      <ListItemSecondaryAction>
-        <IconButton
-          aria-label={translations.removeAriaLabel}
-          onClick={removeItem(path, index)}
-          size='large'
-        >
-          <DeleteIcon />
-        </IconButton>
-      </ListItemSecondaryAction>
+      {enabled && (
+        <ListItemSecondaryAction>
+          <IconButton
+            aria-label={translations.removeAriaLabel}
+            onClick={removeItem(path, index)}
+            size='large'
+          >
+            <DeleteIcon />
+          </IconButton>
+        </ListItemSecondaryAction>
+      )}
     </ListItem>
   );
 };
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
index 6f2c7d365..4c441d1fa 100644
--- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -51,6 +51,7 @@ export const MaterialListWithDetailRenderer = ({
   schema,
   uischema,
   path,
+  enabled,
   errors,
   visible,
   label,
@@ -114,6 +115,7 @@ export const MaterialListWithDetailRenderer = ({
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={handleCreateDefaultValue}
       />
@@ -126,6 +128,7 @@ export const MaterialListWithDetailRenderer = ({
                   index={index}
                   path={path}
                   schema={schema}
+                  enabled={enabled}
                   handleSelect={handleListItemClick}
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
index 9969c55d0..5c1802522 100644
--- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx
+++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -7,6 +7,7 @@ export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
   path: string;
+  enabled: boolean;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
   translations: ArrayTranslations;
@@ -16,6 +17,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   errors,
   addItem,
   path,
+  enabled,
   createDefault,
   translations,
 }: ArrayLayoutToolbarProps) {
@@ -23,32 +25,48 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
     <Toolbar disableGutters={true}>
       <Grid container alignItems='center' justifyContent='space-between'>
         <Grid item>
-          <Typography variant={'h6'}>{label}</Typography>
+          <Grid
+            container
+            justifyContent={'flex-start'}
+            alignItems={'center'}
+            spacing={2}
+          >
+            <Grid item>
+              <Typography variant={'h6'}>{label}</Typography>
+            </Grid>
+            <Grid item>
+              {errors.length !== 0 && (
+                <Grid item>
+                  <ValidationIcon
+                    id='tooltip-validation'
+                    errorMessages={errors}
+                  />
+                </Grid>
+              )}
+            </Grid>
+          </Grid>
         </Grid>
-        {errors.length !== 0 && (
+        {enabled && (
           <Grid item>
-            <ValidationIcon id='tooltip-validation' errorMessages={errors} />
-          </Grid>
-        )}
-        <Grid item>
-          <Grid container>
-            <Grid item>
-              <Tooltip
-                id='tooltip-add'
-                title={translations.addTooltip}
-                placement='bottom'
-              >
-                <IconButton
-                  aria-label={translations.addAriaLabel}
-                  onClick={addItem(path, createDefault())}
-                  size='large'
+            <Grid container>
+              <Grid item>
+                <Tooltip
+                  id='tooltip-add'
+                  title={translations.addTooltip}
+                  placement='bottom'
                 >
-                  <AddIcon />
-                </IconButton>
-              </Tooltip>
+                  <IconButton
+                    aria-label={translations.addTooltip}
+                    onClick={addItem(path, createDefault())}
+                    size='large'
+                  >
+                    <AddIcon />
+                  </IconButton>
+                </Tooltip>
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
+        )}
       </Grid>
     </Toolbar>
   );
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index 8dad438e9..61830908e 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -164,7 +164,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   justifyContent='center'
                   alignItems='center'
                 >
-                  {showSortButtons ? (
+                  {showSortButtons && enabled ? (
                     <Fragment>
                       <Grid item>
                         <IconButton
@@ -192,16 +192,18 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   ) : (
                     ''
                   )}
-                  <Grid item>
-                    <IconButton
-                      onClick={removeItems(path, [index])}
-                      style={iconStyle}
-                      aria-label={translations.removeAriaLabel}
-                      size='large'
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </Grid>
+                  {enabled && (
+                    <Grid item>
+                      <IconButton
+                        onClick={removeItems(path, [index])}
+                        style={iconStyle}
+                        aria-label={translations.removeAriaLabel}
+                        size='large'
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </Grid>
+                  )}
                 </Grid>
               </Grid>
             </Grid>
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
index 5a8c533ef..578e0e070 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -80,6 +80,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={innerCreateDefaultValue}
       />