fix: prevent changing order of readOnly arrays (#563)

payloadcms · May 16, 2022 · 16b7edb · 16b7edb
1 parent 5bfde9d
commit 16b7edb
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 43 deletions.
diff --git a/cypress/integration/conditions.e2e.ts b/cypress/integration/conditions.e2e.ts
diff --git a/cypress/integration/fields.e2e.ts b/cypress/integration/fields.e2e.ts
@@ -0,0 +1,76 @@
+describe('Fields', () => {
+  before(() => {
+    cy.apiLogin();
+  });
+
+  describe('Array', () => {
+    beforeEach(() => {
+      cy.visit('/admin/collections/all-fields/create');
+    });
+
+    it('can add and remove rows', () => {
+      cy.contains('Add Array').click();
+
+      cy.contains('Array Text 1')
+        .should('be.visible');
+
+      cy.get('.action-panel__add-row').first().click();
+
+      cy.get('.field-type.array')
+        .filter(':contains("Editable Array")')
+        .should('contain', '02');
+
+      cy.get('.action-panel__remove-row').first().click();
+
+      cy.get('.field-type.array')
+        .filter(':contains("Editable Array")')
+        .should('not.contain', '02')
+        .should('contain', '01');
+    });
+
+    it('can be readOnly', () => {
+      cy.get('.field-type.array')
+        .filter(':contains("readOnly Array")')
+        .should('not.contain', 'Add Row');
+
+      cy.get('.field-type.array')
+        .filter(':contains("readOnly Array")')
+        .children('.action-panel__add-row')
+        .should('not.exist');
+
+      cy.get('.field-type.array')
+        .filter(':contains("readOnly Array")')
+        .children('.position-panel__move-backward')
+        .should('not.exist');
+
+      cy.get('.field-type.array')
+        .filter(':contains("readOnly Array")')
+        .children('.position-panel__move-forward')
+        .should('not.exist');
+    });
+  });
+
+  describe('Admin', () => {
+    describe('Conditions', () => {
+      beforeEach(() => {
+        cy.visit('/admin/collections/conditions/create');
+      });
+
+      it('can see conditional fields', () => {
+        cy.get('#simpleCondition')
+          .should('not.exist');
+
+        cy.get('#customComponent')
+          .should('not.exist');
+
+        cy.contains('Enable Test').click();
+
+        cy.get('#simpleCondition')
+          .should('be.visible');
+
+        cy.get('#customComponent')
+          .should('be.visible');
+      });
+    });
+  });
+});
diff --git a/demo/collections/AllFields.ts b/demo/collections/AllFields.ts
@@ -203,7 +203,7 @@ const AllFields: CollectionConfig = {
     },
     {
       type: 'array',
-      label: 'Array',
+      label: 'Editable Array',
       name: 'array',
       minRows: 2,
       maxRows: 4,
@@ -250,6 +250,26 @@ const AllFields: CollectionConfig = {
         },
       ],
     },
+    {
+      type: 'array',
+      name: 'readOnlyArray',
+      label: 'readOnly Array',
+      admin: {
+        readOnly: true,
+      },
+      defaultValue: [{
+        text: 'text in readOnly array one',
+      },
+      {
+        text: 'text in readOnly array two',
+      }],
+      fields: [
+        {
+          type: 'text',
+          name: 'text',
+        },
+      ],
+    },
     {
       type: 'blocks',
       label: 'Blocks Content',

diff --git a/src/admin/components/forms/DraggableSection/PositionPanel/index.tsx b/src/admin/components/forms/DraggableSection/PositionPanel/index.tsx
@@ -7,34 +7,45 @@ import './index.scss';
 const baseClass = 'position-panel';
 
 const PositionPanel: React.FC<Props> = (props) => {
-  const { moveRow, positionIndex, rowCount } = props;
+  const { moveRow, positionIndex, rowCount, readOnly } = props;
 
   const adjustedIndex = positionIndex + 1;
 
   const classes = [
     baseClass,
+    `${baseClass}__${readOnly ? 'read-only' : ''}`,
   ].filter(Boolean).join(' ');
 
   return (
     <div className={classes}>
-      <Button
-        className={`${baseClass}__move-backward ${positionIndex === 0 ? 'first-row' : ''}`}
-        buttonStyle="none"
-        icon="chevron"
-        round
-        onClick={() => moveRow(positionIndex, positionIndex - 1)}
-      />
+      {!readOnly && (
+        <Button
+          className={`${baseClass}__move-backward ${positionIndex === 0 ? 'first-row' : ''}`}
+          buttonStyle="none"
+          icon="chevron"
+          round
+          onClick={() => moveRow(positionIndex, positionIndex - 1)}
+        />
+      )}
 
       {(adjustedIndex && typeof positionIndex === 'number')
-        && <div className={`${baseClass}__current-position`}>{adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}</div>}
-
-      <Button
-        className={`${baseClass}__move-forward ${(positionIndex === rowCount - 1) ? 'last-row' : ''}`}
-        buttonStyle="none"
-        icon="chevron"
-        round
-        onClick={() => moveRow(positionIndex, positionIndex + 1)}
-      />
+        && (
+        <div
+          className={`${baseClass}__current-position`}
+        >
+          {adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}
+        </div>
+        )}
+
+      {!readOnly && (
+        <Button
+          className={`${baseClass}__move-forward ${(positionIndex === rowCount - 1) ? 'last-row' : ''}`}
+          buttonStyle="none"
+          icon="chevron"
+          round
+          onClick={() => moveRow(positionIndex, positionIndex + 1)}
+        />
+      )}
     </div>
   );
 };

diff --git a/src/admin/components/forms/DraggableSection/PositionPanel/types.ts b/src/admin/components/forms/DraggableSection/PositionPanel/types.ts
@@ -2,4 +2,5 @@ export type Props = {
   moveRow: (fromIndex: number, toIndex: number) => void
   positionIndex: number
   rowCount: number
+  readOnly: boolean
 }
diff --git a/src/admin/components/forms/DraggableSection/index.tsx b/src/admin/components/forms/DraggableSection/index.tsx
@@ -70,6 +70,7 @@ const DraggableSection: React.FC<Props> = (props) => {
                 moveRow={moveRow}
                 rowCount={rowCount}
                 positionIndex={rowIndex}
+                readOnly={readOnly}
               />
             </FieldTypeGutter>