fix: threads hasMaxRows into ArrayAction components within blocks and arrays (#3066)

src/admin/components/elements/ArrayAction/index.tsx

@@ -19,6 +19,7 @@ export const ArrayAction: React.FC<Props> = ({
   addRow,
   duplicateRow,
   removeRow,
+  hasMaxRows,
 }) => {
   const { t } = useTranslation('general');
   return (
@@ -56,28 +57,32 @@ export const ArrayAction: React.FC<Props> = ({
                 {t('moveDown')}
               </button>
             )}
-            <button
-              className={`${baseClass}__action ${baseClass}__add`}
-              type="button"
-              onClick={() => {
-                addRow(index);
-                close();
-              }}
-            >
-              <Plus />
-              {t('addBelow')}
-            </button>
-            <button
-              className={`${baseClass}__action ${baseClass}__duplicate`}
-              type="button"
-              onClick={() => {
-                duplicateRow(index);
-                close();
-              }}
-            >
-              <Copy />
-              {t('duplicate')}
-            </button>
+            {!hasMaxRows && (
+              <React.Fragment>
+                <button
+                  className={`${baseClass}__action ${baseClass}__add`}
+                  type="button"
+                  onClick={() => {
+                    addRow(index);
+                    close();
+                  }}
+                  >
+                  <Plus />
+                  {t('addBelow')}
+                </button>
+                <button
+                  className={`${baseClass}__action ${baseClass}__duplicate`}
+                  type="button"
+                  onClick={() => {
+                    duplicateRow(index);
+                    close();
+                  }}
+                  >
+                  <Copy />
+                  {t('duplicate')}
+                </button>
+              </React.Fragment>
+            )}
             <button
               className={`${baseClass}__action ${baseClass}__remove`}
               type="button"

src/admin/components/elements/ArrayAction/types.ts

@@ -5,4 +5,5 @@ export type Props = {
   moveRow: (from: number, to: number) => void
   index: number
   rowCount: number
+  hasMaxRows: boolean
 }

src/admin/components/forms/field-types/Array/ArrayRow.tsx

@@ -29,6 +29,7 @@ type ArrayRowProps = UseDraggableSortableReturn & Pick<Props, 'fields' | 'path'
   row: Row
   CustomRowLabel?: RowLabelType
   readOnly?: boolean
+  hasMaxRows?: boolean
 }
 export const ArrayRow: React.FC<ArrayRowProps> = ({
   path: parentPath,
@@ -51,6 +52,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
   permissions,
   CustomRowLabel,
   fields,
+  hasMaxRows,
 }) => {
   const path = `${parentPath}.${rowIndex}`;
   const { i18n } = useTranslation();
@@ -108,6 +110,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
             duplicateRow={duplicateRow}
             rowCount={rowCount}
             index={rowIndex}
+            hasMaxRows={hasMaxRows}
           />
         ) : undefined}
       >

src/admin/components/forms/field-types/Array/index.tsx

@@ -244,6 +244,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
                 rowIndex={i}
                 indexPath={indexPath}
                 labels={labels}
+                hasMaxRows={hasMaxRows}
               />
             )}
           </DraggableSortableItem>

src/admin/components/forms/field-types/Blocks/BlockRow.tsx

@@ -28,6 +28,7 @@ type BlockFieldProps = UseDraggableSortableReturn & Pick<Props, 'path' | 'labels
   readOnly: boolean
   rowCount: number
   blockToRender: Block
+  hasMaxRows?: boolean
 }
 export const BlockRow: React.FC<BlockFieldProps> = ({
   path: parentPath,
@@ -50,6 +51,7 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
   permissions,
   blocks,
   blockToRender,
+  hasMaxRows,
 }) => {
   const path = `${parentPath}.${rowIndex}`;
   const { i18n } = useTranslation();
@@ -117,6 +119,7 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
             blockType={row.blockType}
             blocks={blocks}
             labels={labels}
+            hasMaxRows={hasMaxRows}
           />
         ) : undefined}
       >

src/admin/components/forms/field-types/Blocks/RowActions.tsx

@@ -15,6 +15,7 @@ export const RowActions: React.FC<{
   rowIndex: number
   rowCount: number
   blockType: string
+  hasMaxRows?: boolean
 }> = (props) => {
   const {
     addRow,
@@ -26,6 +27,7 @@ export const RowActions: React.FC<{
     rowIndex,
     rowCount,
     blockType,
+    hasMaxRows,
   } = props;
 
   const { openModal, closeModal } = useModal();
@@ -54,6 +56,7 @@ export const RowActions: React.FC<{
         moveRow={moveRow}
         removeRow={removeRow}
         index={rowIndex}
+        hasMaxRows={hasMaxRows}
       />
     </React.Fragment>
   );

src/admin/components/forms/field-types/Blocks/index.tsx

@@ -247,6 +247,7 @@ const BlocksField: React.FC<Props> = (props) => {
                     rowCount={rows.length}
                     labels={labels}
                     path={path}
+                    hasMaxRows={hasMaxRows}
                   />
                 )}
               </DraggableSortableItem>