ENH Show collapsed sudo message on GridFields

Author: emteknetnz

client/dist/js/bundle.js

@@ -3,7 +3,7 @@ import i18n from 'i18n';
 import Config from 'lib/Config';
 import backend from 'lib/Backend';
 import PropTypes from 'prop-types';
-import React, { createRef, useState } from 'react';
+import React, { createRef, useState, useEffect } from 'react';
 import { InputGroup, InputGroupAddon, Input, FormGroup, Label, FormFeedback } from 'reactstrap';
 
 /**
@@ -15,14 +15,50 @@ function SudoModePasswordField(props) {
   const {
     onSuccess,
     autocomplete,
+    initiallyCollapsed,
     verifyMessage,
+    sectionTitle,
   } = props;
   const passwordFieldRef = createRef();
   const [responseMessage, setResponseMessage] = useState('');
   const [showVerify, setShowVerify] = useState(false);
+  // setting to null initially to prevent a fout as useEffect()
+  // below will cause a re-render when initiallyCollapsed
+  const [expanded, setExpanded] = useState(null);
+
+  useEffect(() => {
+    setExpanded(!initiallyCollapsed);
+  }, [initiallyCollapsed]);
 
   const clientConfig = Config.getSection('SilverStripe\\Admin\\SudoModeController');
 
+  let verifyMessageValue = verifyMessage;
+  if (!verifyMessageValue) {
+    if (sectionTitle) {
+      verifyMessageValue = i18n.inject(
+        i18n._t(
+          'Admin.SUDO_MODE_PASSWORD_FIELD_VERIFY_SECTION_TITLE',
+          '\"{sectionTitle}\" is protected and is in read-only mode. Before editing please verify that it\'s you first.'
+        ),
+        { sectionTitle }
+      );
+    } else {
+      verifyMessageValue = i18n._t(
+        'Admin.SUDO_MODE_PASSWORD_FIELD_VERIFY',
+        'This section is protected and is in read-only mode. Before editing please verify that it\'s you first.'
+      );
+    }
+  }
+  const helpLink = clientConfig.helpLink;
+  if (helpLink) {
+    verifyMessageValue = <>
+      {verifyMessageValue}
+      <a href={helpLink} className="sudo-mode-password-field__notice-help" target="_blank" rel="noopener noreferrer">
+        { i18n._t('Admin.WHATS_THIS', 'What is this?') }
+      </a>
+    </>;
+  }
+
   /**
    * Handle clicking the button to confirm the sudo mode notice
    * and trigger the verify form to be rendered.
@@ -75,27 +111,19 @@ function SudoModePasswordField(props) {
     }
   }
 
+  function handleExpand() {
+    setExpanded(true);
+    setShowVerify(true);
+  }
+
   /**
    * Renders a confirmation notice to the user that they will need to verify themselves
    * to enter sudo mode.
    */
   function renderConfirm() {
-    const helpLink = clientConfig.helpLink;
-    let verifyMessageValue = verifyMessage;
-    if (!verifyMessageValue) {
-      verifyMessageValue = i18n._t(
-        'Admin.SUDO_MODE_PASSWORD_FIELD_VERIFY',
-        'This section is protected and is in read-only mode. Before editing please verify that it\'s you first.'
-      );
-    }
     return <div className="sudo-mode__notice sudo-mode-password-field__notice--required">
       <p className="sudo-mode-password-field__notice-message">
         { verifyMessageValue }
-        { helpLink && (
-          <a href={helpLink} className="sudo-mode-password-field__notice-help" target="_blank" rel="noopener noreferrer">
-            { i18n._t('Admin.WHATS_THIS', 'What is this?') }
-          </a>
-        ) }
       </p>
       { !showVerify && (
         <Button
@@ -118,7 +146,7 @@ function SudoModePasswordField(props) {
       name: 'SudoModePassword',
       id: 'SudoModePassword',
       className: 'no-change-track',
-      autocomplete,
+      autoComplete: autocomplete,
       onKeyDown: (evt) => handleVerifyKeyDown(evt),
       innerRef: passwordFieldRef,
     };
@@ -145,19 +173,38 @@ function SudoModePasswordField(props) {
     </div>;
   }
 
+  // Prevent a fout on initial render when rendering initiallyCollapsed
+  if (expanded === null) {
+    return null;
+  }
+
   // Render the component
   return <div className="sudo-mode-password-field">
-    <div className="sudo-mode-password-field-inner alert alert-info panel panel--padded">
+    { !expanded && <div className="sudo-mode-password-field__expander alert alert-info panel">
+      <div className="sudo-mode-password-field__expander-text-container">{ verifyMessageValue }</div>
+      <div className="sudo-mode-password-field__expander-button-container">
+        <Button
+          className="sudo-mode-password-field__expander-button font-icon-lock"
+          color="info"
+          onClick={() => handleExpand()}
+        >
+          { i18n._t('Admin.VERIFY', 'Verify') }
+        </Button>
+      </div>
+    </div>}
+    { expanded && <div className="sudo-mode-password-field__inner alert alert-info panel panel--padded">
       { renderConfirm() }
       { showVerify && renderVerify() }
-    </div>
+    </div> }
   </div>;
 }
 
 SudoModePasswordField.propTypes = {
   verifyMessage: PropTypes.string,
   onSuccess: PropTypes.func.isRequired,
   autocomplete: PropTypes.string.isRequired,
+  initiallyCollapsed: PropTypes.bool.isRequired,
+  sectionTitle: PropTypes.string.isRequired,
 };
 
 export { SudoModePasswordField as Component };

client/dist/styles/bundle.css

@@ -12,11 +12,28 @@
   }
 }
 
+.SudoModePasswordField--initially-collapsed.form-group {
+  min-height: 37px;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.SudoModePasswordField--initially-collapsed.form-group .sudo-mode-password-field {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.SudoModePasswordField--initially-collapsed.form-group:after {
+  border-bottom: 0;
+}
+
 // React component
 .sudo-mode-password-field {
+  font-size: $font-size-base;
+
   @include media-breakpoint-up(lg) {
     width: 100%;
-    max-width: 700px;
+    max-width: 800px;
     margin-left: $form-check-input-gutter;
   }
 
@@ -29,6 +46,21 @@
   }
 }
 
+.sudo-mode-password-field__expander {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.sudo-mode-password-field__expander-text-container {
+  margin-left: 4px;
+  margin-right: 10px;
+}
+
+.sudo-mode-password-field__expander-button-container {
+  margin-left: auto;
+}
+
 .sudo-mode-password-field__inner {
   margin-bottom: 0;
   padding-bottom: 1rem;

client/src/components/SudoModePasswordField/SudoModePasswordField.js

@@ -30,6 +30,28 @@ export default {
     }
   },
   argTypes: {
+    sectionTitle: {
+      description: 'The title of the section that is being protected.',
+      control: 'text',
+      type: {
+        required: false
+      },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'My special data' },
+      },
+    },
+    collapsed: {
+      description: 'Whether the password field should be collapsed by default.',
+      control: 'boolean',
+      type: {
+        required: true
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     autocomplete: {
       description: 'The autocomplete attribute for the password field.',
       control: 'text',
@@ -44,8 +66,13 @@ export default {
   }
 };
 
-export const _SudoModePasswordField = (props) => <SudoModePasswordField
-  {...props}
-  onSuccess={() => {}}
-  autocomplete={props.autocomplete || 'off'}
-/>;
+export const _SudoModePasswordField = (props) => {
+  const newProps = {
+    ...props,
+    onSuccess: () => {},
+    autocomplete: props.autocomplete || 'off',
+    collapsed: props.hasOwnProperty('collapsed') ? props.collapsed : false,
+    sectionTitle: props.sectionTitle || 'My special data',
+  };
+  return <SudoModePasswordField {...newProps}/>;
+};

client/src/components/SudoModePasswordField/SudoModePasswordField.scss

@@ -29,6 +29,8 @@ function makeProps(obj = {}) {
   return {
     onSuccess: () => {},
     autocomplete: 'off',
+    initiallyCollapsed: false,
+    sectionTitle: '',
     ...obj,
   };
 }
@@ -76,3 +78,50 @@ test('SudoModePasswordField should show a message on failure', async () => {
   expect(message).not.toBeNull();
   expect(onSuccess).not.toBeCalled();
 });
+
+test('SudoModePasswordField when initiallyCollapsed is false', async () => {
+  const { container } = render(
+    <SudoModePasswordField {...makeProps({
+      initiallyCollapsed: false,
+    })}
+    />
+  );
+  const action = await screen.findByText('Verify to continue');
+  expect(container.querySelector('.sudo-mode-password-field__notice-button')).not.toBeNull();
+  expect(container.querySelector('.sudo-mode-password-field__expander')).toBeNull();
+  fireEvent.click(action);
+  await screen.findByText('Enter your password');
+  expect(container.querySelector('.sudo-mode-password-field__verify-button')).not.toBeNull();
+});
+
+test('SudoModePasswordField when initiallyCollapsed is true', async () => {
+  const { container } = render(
+    <SudoModePasswordField {...makeProps({
+      initiallyCollapsed: true,
+    })}
+    />
+  );
+  const action = await screen.findByText('Verify');
+  expect(container.querySelector('.sudo-mode-password-field__notice-button')).toBeNull();
+  expect(container.querySelector('.sudo-mode-password-field__expander')).not.toBeNull();
+  fireEvent.click(action);
+  await screen.findByText('Enter your password');
+  expect(container.querySelector('.sudo-mode-password-field__verify-button')).not.toBeNull();
+});
+
+test('SudoModePasswordField when sectionTitle is empty', async () => {
+  const { container } = render(<SudoModePasswordField {...makeProps()}/>);
+  await screen.findByText('Verify to continue');
+  const expected = "This section is protected and is in read-only mode. Before editing please verify that it's you first.";
+  expect(container.querySelector('.sudo-mode-password-field__notice-message').innerHTML).toBe(expected);
+});
+
+test('SudoModePasswordField when sectionTitle is not empty', async () => {
+  const { container } = render(<SudoModePasswordField {...makeProps({
+    sectionTitle: 'Hello world',
+  })}
+  />);
+  await screen.findByText('Verify to continue');
+  const expected = "\"Hello world\" is protected and is in read-only mode. Before editing please verify that it's you first.";
+  expect(container.querySelector('.sudo-mode-password-field__notice-message').innerHTML).toBe(expected);
+});

client/src/components/SudoModePasswordField/tests/SudoModePasswordField-story.js

@@ -9,6 +9,7 @@ jQuery.entwine('ss', ($) => {
   // we only want to run this on the field holder, hence the `:not(:input)`
   $('.js-injector-boot .SudoModePasswordField:not(:input)').entwine({
     ReactRoot: null,
+    ForGridField: null,
 
     onmatch() {
       this._super();
@@ -19,9 +20,12 @@ jQuery.entwine('ss', ($) => {
 
       const SudoModePasswordField = loadComponent('SudoModePasswordField', context);
       const input = this.find('input.SudoModePasswordField')[0];
+      console.log(input);
       const props = {
         autocomplete: input.getAttribute('autocomplete'),
-        onSuccess: () => this.reloadPage(),
+        initiallyCollapsed: input.getAttribute('data-initially-collapsed'),
+        sectionTitle: input.getAttribute('data-section-title') || '',
+        onSuccess: () => this.reloadSection(),
       };
 
       let root = this.getReactRoot();
@@ -31,6 +35,7 @@ jQuery.entwine('ss', ($) => {
 
       root.render(<SudoModePasswordField {...props}/>);
       this.setReactRoot(root);
+      this.setForGridField(input.hasAttribute('data-for-gridfield'));
     },
 
     onunmatch() {
@@ -47,8 +52,17 @@ jQuery.entwine('ss', ($) => {
      * This is here instead of inside the react component because in a pure react form the success handler
      * should result in re-rendering the react form with editable fields, instead of reloading the whole page.
      */
-    reloadPage() {
-      this.closest('.cms-container').reloadCurrentPanel();
+    reloadSection() {
+      if (this.getForGridField()) {
+        // Reload all sudo protected gridfields (not just this one)
+        this
+          .closest('.cms-container')
+          .find('.ss-gridfield')
+          .filter((i, el) => jQuery(el).find('.SudoModePasswordField').length)
+          .reload();
+      } else {
+        this.closest('.cms-container').reloadCurrentPanel();
+      }
     },
   });
 });

client/src/components/SudoModePasswordField/tests/SudoModePasswordField-test.js

@@ -49,13 +49,17 @@ Feature: Form sudo mode
     # GridField relation - has_many
     When I go to "/admin/pages"
     And I click on "My page" in the tree
-    And I click on the "#Form_EditForm_HasManyMembers .ss-gridfield-item.first" element
+    Then I should see a "#Form_EditForm_HasManyMembers .sudo-mode-password-field" element
+    And I should not see a "#Form_EditForm_HasManyMembers .new-link" element
+    When I click on the "#Form_EditForm_HasManyMembers .ss-gridfield-item.first" element
     And I should see a "#Form_ItemEditForm_action_doSave[readonly]" element
 
     # GridField relation - many_many
     When I go to "/admin/pages"
     And I click on "My page" in the tree
-    And I click on the "#Form_EditForm_ManyManyMembers .ss-gridfield-item.first" element
+    Then I should see a "#Form_EditForm_ManyManyMembers .sudo-mode-password-field" element
+    And I should not see a "#Form_EditForm_ManyManyMembers .new-link" element
+    When I click on the "#Form_EditForm_ManyManyMembers .ss-gridfield-item.first" element
     And I should see a "#Form_ItemEditForm_action_doSave[readonly]" element
 
   Scenario: Putting in a wrong password in to the sudo mode password field shows an error message
@@ -113,3 +117,20 @@ Feature: Form sudo mode
     And I click on "My page" in the tree
     And I click on the "#Form_EditForm_ManyManyMembers .ss-gridfield-item.first" element
     And I should not see a "#Form_ItemEditForm_action_doSave[readonly]" element
+
+  Scenario: All GridFields are reloaded after activating sudo mode via the GridField
+    When I go to "/admin/pages"
+    And I click on "My page" in the tree
+    Then I should see a "#Form_EditForm_HasManyMembers .sudo-mode-password-field" element
+    And I should see a "#Form_EditForm_ManyManyMembers .sudo-mode-password-field" element
+    And I should not see a "#Form_EditForm_HasManyMembers .new-link" element
+    And I should not see a "#Form_EditForm_ManyManyMembers .new-link" element
+    When I click on the "#Form_EditForm_HasManyMembers .sudo-mode-password-field__expander-button" element
+    And I fill in "SudoModePassword" with "Secret!123"
+    And I click on the "#Form_EditForm_HasManyMembers .sudo-mode-password-field__verify-button" element
+    And I wait for 2 seconds
+    Then I should not see a "#Form_EditForm_HasManyMembers .sudo-mode-password-field" element
+    And I should not see a "#Form_EditForm_ManyManyMembers .sudo-mode-password-field" element
+    And I should see a "#Form_EditForm_HasManyMembers .new-link" element
+    And I should see a "#Form_EditForm_ManyManyMembers .new-link" element
+