Merge branch 'fix/quote-media-modals-5816' into 'master'

Activity modals for quote posts #5816

See merge request minds/front!2114

e2e/test/components/activityComponent.ts

@@ -10,6 +10,7 @@ export class ActivityComponent {
   private optionSelector: string = '.m-dropdownMenuItem__text--label span';
   private remindButtonSelector: string =
     'm-activityV2__remindButton m-dropdownMenu';
+  private timestampSelector: string = 'm-activityV2__permalink';
 
   /**
    * Delete the activity.
@@ -43,6 +44,14 @@ export class ActivityComponent {
     I.click(locate('.m-dropdownMenu__item').withText('Quote post'));
   }
 
+  /**
+   * Click the timestamp of a post, linking to the single entity page.
+   * @returns { void }
+   */
+  public clickTimestamp(): void {
+    I.click(this.timestampSelector);
+  }
+
   /**
    * Open tha activity menu.
    * @returns { void }

e2e/test/components/activityModalComponent.ts

@@ -0,0 +1,17 @@
+const { I } = inject();
+
+/**
+ * Component for Acivity Modal
+ */
+export class ActivityModalComponent {
+  private modalElementSelector: string = 'm-activityv2__modal';
+
+  /**
+   * Whether modal is visible.
+   * @returns { void }
+   */
+  public shouldBeVisible(): void {
+    I.waitForElement(this.modalElementSelector, 30);
+    I.seeElement(this.modalElementSelector);
+  }
+}

e2e/test/features/activity-steps.feature

@@ -0,0 +1,47 @@
+Feature: Activity Feature
+  As a user
+  I should be able to interact with various activity types 
+
+  Scenario: Single image in a quote posts opens in a modal from newsfeed
+    Given I am logged in
+    And I am on the newsfeed
+    And I create a post with text storage key "quote-media-modal-single-img-newsfeed"
+    And I quote the activity with the storage text "quote-media-modal-single-img-newsfeed" and file names
+      | filename |
+      | image1.jpg |
+    When I click the parent media for the quote post in the "newsfeed" with storage text "quote-media-modal-single-img-newsfeed"
+    Then I should see the activity modal
+
+  Scenario: Single image in a quote posts opens in a modal from single entity page
+    Given I am logged in
+    And I am on the newsfeed
+    And I create a post with text storage key "quote-media-modal-single-img-single-entity-page"
+    And I quote the activity with the storage text "quote-media-modal-single-img-single-entity-page" and file names
+      | filename |
+      | image1.jpg |
+    When I click the timestamp for the activity with the storage key "quote-media-modal-single-img-single-entity-page" on "newsfeed"
+    And I click the parent media for the quote post in the "single-entity-page" with storage text "quote-media-modal-single-img-single-entity-page"
+    Then I should see the activity modal
+
+  Scenario: Multi image in a quote posts opens in a modal from newsfeed
+    Given I am logged in
+    And I am on the newsfeed
+    And I create a post with text storage key "quote-media-modal-multi-img-newsfeed"
+    And I quote the activity with the storage text "quote-media-modal-multi-img-newsfeed" and file names
+      | filename |
+      | image1.jpg |
+      | image2.jpg |
+    When I click the parent media for the quote post in the "newsfeed" with storage text "quote-media-modal-multi-img-newsfeed"
+    Then I should see the activity modal
+
+  Scenario: Multi image in a quote posts opens in a modal from single entity page
+    Given I am logged in
+    And I am on the newsfeed
+    And I create a post with text storage key "quote-media-modal-multi-img-single-entity-page"
+    And I quote the activity with the storage text "quote-media-modal-multi-img-single-entity-page" and file names
+      | filename |
+      | image1.jpg |
+      | image2.jpg |
+    When I click the timestamp for the activity with the storage key "quote-media-modal-multi-img-single-entity-page" on "single-entity-page"
+    And I click the parent media for the quote post in the "single-entity-page" with storage text "quote-media-modal-multi-img-single-entity-page"
+    Then I should see the activity modal

e2e/test/pages/activityFeedPage.ts

@@ -9,6 +9,10 @@ const activityComponent = new ActivityComponent();
 export class ActivityFeedPage {
   // selectors.
   public activitySelector: string = 'm-activity';
+  public activityMediaLinkSelector: string =
+    '.m-activityContentMedia__link:not(.m-activityContent__quote)';
+  public activityPrimaryMediaLinkSelector: string =
+    '.m-activityContentMedia__link:not(.m-activityContent__quote)';
 
   /**
    * Delete an activity by its position in a feed.
@@ -34,6 +38,41 @@ export class ActivityFeedPage {
     });
   }
 
+  /**
+   * Click to quote activity by text - will open composer.
+   * @param { string } text - text content to get activity containing.
+   * @returns { Promise<void> }
+   */
+  public async clickToQuoteActivityByText(text: string): Promise<void> {
+    await within(locate(this.activitySelector).withText(text), async () => {
+      activityComponent.clickQuoteButton();
+    });
+  }
+
+  /**
+   * Click activity timestamp - will navigate to single entity page.
+   * @param { string } text - text content to get activity containing.
+   * @returns { Promise<void> }
+   */
+  public async clickTimestampForActivityWithText(text: string): Promise<void> {
+    await within(locate(this.activitySelector).withText(text), () => {
+      activityComponent.clickTimestamp();
+    });
+  }
+
+  /**
+   * Click parent media for a quote post with matching text, may open activity modal.
+   * @param { string } text - text content to get activity containing.
+   * @returns { Promise<void> }
+   */
+  public async clickOnParentMediaForQuotePostWithText(
+    text: string
+  ): Promise<void> {
+    await within(locate(this.activitySelector).withText(text), () => {
+      I.click(this.activityPrimaryMediaLinkSelector);
+    });
+  }
+
   /**
    * Determine whether feed has an activity with the given text.
    * @param { string } text - text to check for.

e2e/test/pages/composerModal.ts

@@ -27,7 +27,8 @@ export class ComposerModal {
   private postButtonDisabledOverlaySelector: string =
     '.m-composerToolbarAction__disabledOverlay';
   public composerCloseButton: string = '.m-composerPopup__close';
-
+  public fileUploadButtonSelector: string =
+    'm-composer__modal [data-cy=upload-button] input[type=file]';
   /**
    * Toolbar items
    */
@@ -67,6 +68,22 @@ export class ComposerModal {
     I.click(this.postButtonSelector);
   }
 
+  /**
+   * Click post button and await.
+   * @return { Promise<void> }
+   */
+  public async clickPostAndAwait(): Promise<void> {
+    await Promise.all([
+      I.click(this.postButtonSelector),
+      I.waitForResponse(resp => {
+        return (
+          resp.url().includes('/api/v3/newsfeed/activity') &&
+          resp.status() === 200
+        );
+      }, 30),
+    ]);
+  }
+
   /**
    * Click NSFW option.
    * @return {  void }
@@ -244,4 +261,23 @@ export class ComposerModal {
       storage.add(textStorageKey, postContent);
     }
   }
+
+  /**
+   * Attach files.
+   * @param { string[] } fileNames - file names.
+   * @returns { Promise<void> }
+   */
+  public async attachFiles(fileNames: string[]): Promise<void> {
+    for (const fileName of fileNames) {
+      await Promise.all([
+        I.attachFile(
+          this.fileUploadButtonSelector,
+          '../supporting-files/' + fileName
+        ),
+        I.waitForResponse(resp => {
+          return resp.url().includes('/api/v1/media') && resp.status() === 200;
+        }, 30),
+      ]);
+    }
+  }
 }

e2e/test/pages/singleEntityPage.ts

@@ -0,0 +1,3 @@
+import { ActivityFeedPage } from './activityFeedPage';
+
+export class SingleEntityPage extends ActivityFeedPage {}

e2e/test/steps/activity-modal-steps.ts

@@ -0,0 +1,13 @@
+import { ActivityModalComponent } from '../components/activityModalComponent';
+
+namespace ActivityModalSteps {
+  const activityModal = new ActivityModalComponent();
+
+  Before(() => {});
+
+  Then('I should see the activity modal', () => {
+    activityModal.shouldBeVisible();
+  });
+
+  After(() => {});
+}

e2e/test/steps/activity-steps.ts

@@ -0,0 +1,65 @@
+import { ActivityModalComponent } from '../components/activityModalComponent';
+import { Storage } from '../helpers/storage';
+import { ComposerModal } from '../pages/composerModal';
+import { NewsfeedPage } from '../pages/newsfeedPage';
+import { SingleEntityPage } from '../pages/singleEntityPage';
+
+namespace ActivitySteps {
+  const newsfeedPage = new NewsfeedPage();
+  const singleEntityPage = new SingleEntityPage();
+  const composerModal = new ComposerModal();
+  const storage = Storage.getInstance();
+
+  Before(() => {});
+
+  Given(
+    'I quote the activity with the storage text {string} and file names',
+    async (storageKey: string, table: any) => {
+      const storedText: string = storage.get(storageKey);
+      await newsfeedPage.clickToQuoteActivityByText(storedText);
+      composerModal.typeInTextArea('Quote post');
+      const tableByHeader = table.parse().hashes();
+      const fileNames = tableByHeader.map(fileName => fileName.filename);
+
+      if (fileNames.length) {
+        await composerModal.attachFiles(fileNames);
+      }
+
+      await composerModal.clickPostAndAwait();
+    }
+  );
+
+  When(
+    'I click the parent media for the quote post in the {string} with storage text {string}',
+    async (feedType: string, textStorageKey: string) => {
+      const text: string = storage.get(textStorageKey);
+      switch (feedType) {
+        case 'newsfeed':
+          newsfeedPage.hasActivityWithText(text);
+          await newsfeedPage.clickOnParentMediaForQuotePostWithText(text);
+          break;
+        case 'single-entity-page':
+          singleEntityPage.hasActivityWithText(text);
+          await singleEntityPage.clickOnParentMediaForQuotePostWithText(text);
+          break;
+      }
+    }
+  );
+
+  When(
+    'I click the timestamp for the activity with the storage key {string} on {string}',
+    async (textStorageKey: string, feedType: string) => {
+      const text: string = storage.get(textStorageKey);
+      switch (feedType) {
+        case 'newsfeed':
+          await newsfeedPage.clickTimestampForActivityWithText(text);
+          break;
+        case 'single-entity-page':
+          await singleEntityPage.clickTimestampForActivityWithText(text);
+          break;
+      }
+    }
+  );
+
+  After(() => {});
+}

src/app/modules/newsfeed/activity-v2/content/content.component.ts

@@ -675,13 +675,6 @@ export class ActivityV2ContentComponent
       return;
     }
 
-    // We don't support showing media quotes in modal yet
-    // (Except for multi-image quotes)
-    if (this.entity.remind_object && !this.isMultiImage) {
-      this.redirectToSinglePage();
-      return;
-    }
-
     if (
       this.service.displayOptions.bypassMediaModal &&
       this.entity.content_type !== 'image' &&