Merge pull request #1548 from creative-commoners/pulls/3.0/campaign-admin

ENH Add campaign-admin support back in

Author: GuySartorelli

client/dist/js/TinyMCE_sslink-file.js

@@ -742,6 +742,7 @@ class AssetAdmin extends Component {
       onClose: this.handleCloseFile,
       onSubmit: this.handleSubmitEditor,
       onUnpublish: this.handleUnpublish,
+      addToCampaignSchemaUrl: config.form.addToCampaignForm.schemaUrl
     };
 
     return <EditorComponent {...editorProps} />;

client/dist/js/TinyMCE_ssmedia.js

@@ -142,6 +142,9 @@ function makeProps(obj = {}) {
         fileSearchForm: {
           schemaUrl: '',
         },
+        addToCampaignForm: {
+          schemaUrl: '',
+        },
       },
     },
     fileId: null,

client/dist/js/bundle.js

@@ -5,6 +5,7 @@ import { bindActionCreators, compose } from 'redux';
 import React, { Component } from 'react';
 import CONSTANTS from 'constants/index';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
+import FormBuilderModal from 'components/FormBuilderModal/FormBuilderModal';
 import * as UnsavedFormsActions from 'state/unsavedForms/UnsavedFormsActions';
 import PropTypes from 'prop-types';
 import { inject } from 'lib/Injector';
@@ -31,10 +32,13 @@ class Editor extends Component {
     this.handleLoadingSuccess = this.handleLoadingSuccess.bind(this);
     this.handleLoadingError = this.handleLoadingError.bind(this);
     this.handleFetchingSchema = this.handleFetchingSchema.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+    this.openModal = this.openModal.bind(this);
     this.createFn = this.createFn.bind(this);
     this.editorHeader = this.editorHeader.bind(this);
 
     this.state = {
+      openModal: false,
       loadingForm: false,
       loadingError: null,
       file: null,
@@ -87,6 +91,12 @@ class Editor extends Component {
   handleAction(event) {
     const file = this.state.file;
     switch (event.currentTarget.name) {
+      // intercept the Add to Campaign submit and open the modal dialog instead
+      case 'action_addtocampaign':
+        this.openModal();
+        event.preventDefault();
+
+        break;
       case 'action_replacefile':
         this.replaceFile();
         event.preventDefault();
@@ -152,13 +162,22 @@ class Editor extends Component {
     } else {
       // If we're already at the top of the form stack, close the editor form
       onClose();
+      this.closeModal();
     }
 
     if (event) {
       event.preventDefault();
     }
   }
 
+  openModal() {
+    this.setState({ openModal: true });
+  }
+
+  closeModal() {
+    this.setState({ openModal: false });
+  }
+
   replaceFile() {
     const hiddenFileInput = document.querySelector('.dz-input-PreviewImage');
 
@@ -270,8 +289,9 @@ class Editor extends Component {
     if (!this.state.file) {
       return null;
     }
-    const { FormBuilderLoaderComponent } = this.props;
+    const { FormBuilderLoaderComponent, FormBuilderModalComponent } = this.props;
     const formSchemaUrl = this.getFormSchemaUrl();
+    const modalSchemaUrl = `${this.props.addToCampaignSchemaUrl}/${this.props.fileId}`;
     const editorClasses = classnames(
       'panel', 'form--no-dividers', 'editor', {
         'editor--asset-dropzone--disable': !this.props.enableDropzone
@@ -291,6 +311,7 @@ class Editor extends Component {
         <div className="editor__file-preview-message--file-missing">{message}</div>
       );
     }
+    const campaignTitle = i18n._t('Admin.ADD_TO_CAMPAIGN', 'Add to campaign');
     const Loading = this.props.loadingComponent;
 
     return (<div className={editorClasses}>
@@ -307,6 +328,16 @@ class Editor extends Component {
           file={this.state.file}
         />
         {error}
+        <FormBuilderModalComponent
+          title={campaignTitle}
+          identifier="AssetAdmin.AddToCampaign"
+          isOpen={this.state.openModal}
+          onClosed={this.closeModal}
+          schemaUrl={modalSchemaUrl}
+          bodyClassName="modal__dialog"
+          responseClassBad="modal__response modal__response--error"
+          responseClassGood="modal__response modal__response--good"
+        />
         { this.state.loadingForm && <Loading />}
       </div>
     </div>);
@@ -325,16 +356,19 @@ Editor.propTypes = {
     name: PropTypes.string,
     value: PropTypes.any,
   })),
+  addToCampaignSchemaUrl: PropTypes.string,
   actions: PropTypes.object,
   showingSubForm: PropTypes.bool,
   nextType: PropTypes.string,
   EditorHeaderComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   FormBuilderLoaderComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  FormBuilderModalComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 Editor.defaultProps = {
   EditorHeaderComponent: EditorHeader,
   FormBuilderLoaderComponent: FormBuilderLoader,
+  FormBuilderModalComponent: FormBuilderModal,
 };
 
 function mapDispatchToProps(dispatch) {

client/src/containers/AssetAdmin/AssetAdmin.js

@@ -78,12 +78,20 @@ function makeProps(obj = {}) {
     FormBuilderLoaderComponent: ({ createFn, onAction, schemaUrl }) => (
       <div data-testid="test-form-builder-loader" onClick={() => onAction(...nextParams)} data-schema-url={schemaUrl}>{createFn(...createFnParams)}</div>
     ),
+    FormBuilderModalComponent: ({ isOpen }) => <div data-testid="test-form-builder-modal" data-is-open={isOpen}/>,
     ...obj
   };
 }
 
-async function awaitLoader() {
-  await screen.findByTestId('test-form-builder-loader');
+async function openModal() {
+  const loader = await screen.findByTestId('test-form-builder-loader');
+  nextParams = [{
+    preventDefault: () => null,
+    currentTarget: {
+      name: 'action_addtocampaign'
+    }
+  }];
+  fireEvent.click(loader);
   nextParams = [{
     preventDefault: () => null,
     currentTarget: {
@@ -109,12 +117,16 @@ test('Editor handleClose Closing editor', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
+  let modal = await screen.findByTestId('test-form-builder-modal');
+  expect(modal.getAttribute('data-is-open')).toBe('true');
   const header = await screen.findByTestId('test-editor-header');
   nextAction = 'cancel';
   fireEvent.click(header);
   expect(popFormStackEntry).not.toHaveBeenCalled();
   expect(onClose).toHaveBeenCalled();
+  modal = await screen.findByTestId('test-form-builder-modal');
+  expect(modal.getAttribute('data-is-open')).toBe('false');
   expect(header.getAttribute('data-show-button')).toBe(buttonStates.SWITCH);
 });
 
@@ -135,12 +147,16 @@ test('Editor handleClose Closing sub form', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
+  let modal = await screen.findByTestId('test-form-builder-modal');
+  expect(modal.getAttribute('data-is-open')).toBe('true');
   const header = await screen.findByTestId('test-editor-header');
   nextAction = 'cancel';
   fireEvent.click(header);
   expect(popFormStackEntry).toHaveBeenCalled();
   expect(onClose).not.toHaveBeenCalled();
+  modal = await screen.findByTestId('test-form-builder-modal');
+  expect(modal.getAttribute('data-is-open')).toBe('true');
   expect(header.getAttribute('data-show-button')).toBe(buttonStates.SWITCH);
 });
 
@@ -173,7 +189,7 @@ test('Editor editorHeader Top Form with detail in dialog', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
   const header = await screen.findByTestId('test-editor-header');
   nextAction = 'details';
   fireEvent.click(header);
@@ -192,7 +208,7 @@ test('Editor editorHeader Sub form in dialog', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
   const header = await screen.findByTestId('test-editor-header');
   expect(header.getAttribute('data-show-button')).toBe(buttonStates.ALWAYS_BACK);
 });
@@ -212,7 +228,7 @@ test('Editor editorHeader Form for folder', async () => {
       type: 'folder',
     })
   });
-  awaitLoader();
+  openModal();
   const header = await screen.findByTestId('test-editor-header');
   expect(header.getAttribute('data-show-button')).toBe(buttonStates.SWITCH);
 });
@@ -226,7 +242,7 @@ test('Editor getFormSchemaUrl Plain URL', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
   const loader = await screen.findByTestId('test-form-builder-loader');
   expect(loader.getAttribute('data-schema-url')).toBe('edit/file/123');
 });
@@ -240,7 +256,7 @@ test('Editor getFormSchemaUrl Plain URL', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
   const loader = await screen.findByTestId('test-form-builder-loader');
   expect(loader.getAttribute('data-schema-url')).toBe('edit/file/123?q=search');
 });
@@ -257,7 +273,7 @@ test('Editor getFormSchemaUrl Plain URL', async () => {
     />
   );
   resolveBackendGet(makeReadFileResponse());
-  awaitLoader();
+  openModal();
   const loader = await screen.findByTestId('test-form-builder-loader');
   expect(loader.getAttribute('data-schema-url')).toBe('edit/file/123?q=search&foo=bar');
 });

client/src/containers/AssetAdmin/tests/AssetAdmin-test.js

@@ -47,6 +47,7 @@
 use SilverStripe\ORM\DataList;
 use SilverStripe\Forms\DateField;
 use SilverStripe\ORM\DataQuery;
+use SilverStripe\Core\ArrayLib;
 
 /**
  * AssetAdmin is the 'file store' section of the CMS.
@@ -212,7 +213,7 @@ public function getClientConfig(): array
 
         $parentClientConfig = parent::getClientConfig();
         $modalController = ModalController::singleton();
-        return array_merge($parentClientConfig, [
+        return ArrayLib::array_merge_recursive($parentClientConfig, [
             'reactRouter' => true,
             'bustCache' => static::config()->get('bust_cache'),
             'endpoints' => array_merge($parentClientConfig['endpoints'], [

client/src/containers/Editor/Editor.js

@@ -51,6 +51,9 @@ protected function tearDown(): void
 
     public function testEditFileForm()
     {
+        // Ensure no external extensions have been applied
+        Config::modify()->remove(FileFormFactory::class, 'extensions');
+
         $this->logInWithPermission('ADMIN');
 
         $file = $this->objFromFixture(File::class, 'file1');
@@ -112,7 +115,6 @@ public function testEditFileFormWithPermissions()
         $this->assertNull($form->Actions()->fieldByName('PopoverActions'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_delete'));
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_replacefile'));
-
         $this->assertNull($form->Actions()->fieldByName('PopoverActions.action_unpublish'));
 
         FileExtension::$canDelete = false;

client/src/containers/Editor/tests/Editor-test.js

@@ -13,6 +13,9 @@ class FolderCreateFormFactoryTest extends SapphireTest
 {
     public function testEditFileForm()
     {
+        // Ensure no external extensions have been applied
+        Config::modify()->remove(FileFormFactory::class, 'extensions');
+
         $this->logInWithPermission('ADMIN');
 
         $controller = new AssetAdmin();