OpenMetadata/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts

/*
 *  Copyright 2024 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
import { expect, test } from '@playwright/test';
import { TableClass } from '../../support/entity/TableClass';
import { PersonaClass } from '../../support/persona/PersonaClass';
import { UserClass } from '../../support/user/UserClass';
import { REACTION_EMOJIS, reactOnFeed } from '../../utils/activityFeed';
import { performAdminLogin } from '../../utils/admin';
import { redirectToHomePage } from '../../utils/common';
import { navigateToCustomizeLandingPage } from '../../utils/customizeLandingPage';
import { selectPersona } from '../../utils/customizeNavigation';

const adminUser = new UserClass();
const user1 = new UserClass();
const seedEntity = new TableClass();
const extraEntity = new TableClass();
const testPersona = new PersonaClass();

test.describe('FeedWidget on landing page', () => {
  test.beforeAll(
    'setup: seed entities, users, create persona, customize widget, and create feed activity',
    async ({ browser }) => {
      try {
        const { apiContext, afterAction } = await performAdminLogin(browser);
        try {
          // Create admin and a standard user
          await adminUser.create(apiContext);
          await adminUser.setAdminRole(apiContext);
          await user1.create(apiContext);

          // Create two entities to ensure feed diversity
          await seedEntity.create(apiContext);
          await extraEntity.create(apiContext);

          // Create a persona for testing
          await testPersona.create(apiContext, [adminUser.responseData.id]);
        } finally {
          await afterAction();
        }

        // Log in as admin and customize the landing page for the persona
        const adminPage = await browser.newPage();
        await adminUser.login(adminPage);
        try {
          // Navigate to customize landing page for the persona
          await navigateToCustomizeLandingPage(adminPage, {
            personaName: testPersona.data.name,
          });

          // Find the Activity Feed widget and make it full size
          const activityFeedWidget = adminPage.locator(
            '[data-testid="KnowledgePanel.ActivityFeed"]'
          );

          // Click the more options button (three dots menu)
          const moreOptionsButton = activityFeedWidget.locator(
            '[data-testid="more-options-button"]'
          );

          await expect(moreOptionsButton).toBeVisible();

          await moreOptionsButton.click();

          // Click "Full Size" option from the dropdown menu
          await adminPage.getByRole('menuitem', { name: 'Full Size' }).click();

          // Save the layout
          await adminPage.locator('[data-testid="save-button"]').click();
          await adminPage.waitForLoadState('networkidle');

          // Navigate back to home page
          await redirectToHomePage(adminPage);

          // Select the persona for the current user
          await selectPersona(adminPage, testPersona);
        } catch (e) {
          // ignore failures here; tests have guards
        } finally {
          await adminPage.close();
        }
      } catch (e) {
        // proceed even if setup fails; tests handle empty state
      }
    }
  );

  test.afterAll(
    'cleanup: delete entities, users, and persona',
    async ({ browser }) => {
      try {
        const { apiContext, afterAction } = await performAdminLogin(browser);
        try {
          await seedEntity.delete(apiContext);
          await extraEntity.delete(apiContext);
          await user1.delete(apiContext);
          await adminUser.delete(apiContext);
          await testPersona.delete(apiContext);
        } finally {
          await afterAction();
        }
      } catch (e) {
        // ignore cleanup errors
      }
    }
  );

  test.beforeEach(async ({ page }) => {
    await adminUser.login(page);
    await redirectToHomePage(page);
  });

  test('renders widget wrapper and header with sort dropdown', async ({
    page,
  }) => {
    const widget = page.locator('[data-testid="KnowledgePanel.ActivityFeed"]');

    await expect(widget).toBeVisible();

    // Header title and icon
    const header = widget.locator('[data-testid="widget-header"]');

    await expect(header).toBeVisible();
    await expect(header).toContainText('Activity Feed');

    // Sort dropdown should be visible (non-edit view)
    const sortDropdown = header.locator(
      '[data-testid="widget-sort-by-dropdown"]'
    );

    await expect(sortDropdown).toBeVisible();

    // Open dropdown and verify options
    await sortDropdown.click();

    await expect(
      page.getByRole('menuitem', {
        name: 'All Activity',
      })
    ).toBeVisible();
    await expect(
      page.getByRole('menuitem', {
        name: 'My Data',
      })
    ).toBeVisible();
    await expect(
      page.getByRole('menuitem', {
        name: 'Following',
      })
    ).toBeVisible();

    // Close dropdown
    await page.keyboard.press('Escape');
  });

  test('clicking title navigates to Explore', async ({ page }) => {
    const widget = page.locator('[data-testid="KnowledgePanel.ActivityFeed"]');

    await expect(widget).toBeVisible();

    // Click the header title to navigate to Explore
    await widget
      .locator('[data-testid="widget-header"]')
      .getByText('Activity Feed')
      .click();
    await page.waitForLoadState('networkidle');

    await expect(page).toHaveURL(/\/explore/);

    // Navigate back home to keep context consistent for next tests
    await redirectToHomePage(page);
  });

  test('feed body renders list or empty state', async ({ page }) => {
    const widget = page.locator('[data-testid="KnowledgePanel.ActivityFeed"]');

    await expect(widget).toBeVisible();

    // Feed container
    const container = page.locator('#feedWidgetData');

    await expect(container).toBeVisible();

    // Either render feed messages or show the widget-level empty state
    const messageContainers = container.locator(
      '[data-testid="message-container"]'
    );
    const emptyState = container.locator(
      '[data-testid="no-data-placeholder-container"]'
    );

    const hasMessages = (await messageContainers.count()) > 0;
    const hasEmpty = (await emptyState.count()) > 0;

    expect(hasMessages || hasEmpty).toBe(true);
  });

  test('changing filter triggers feed reload', async ({ page }) => {
    const widget = page.locator('[data-testid="KnowledgePanel.ActivityFeed"]');

    await expect(widget).toBeVisible();

    const sortDropdown = widget.locator(
      '[data-testid="widget-sort-by-dropdown"]'
    );

    await expect(sortDropdown).toBeVisible();

    // Switch to My Data and wait for a feed API call
    await sortDropdown.click();
    const myData = page.getByRole('menuitem', {
      name: 'My Data',
    });
    if ((await myData.count()) > 0) {
      const feedReq = page.waitForResponse(/\/api\/v1\/feed.*/);
      await myData.click();
      await feedReq;
    }

    // Switch back to All Activity
    await sortDropdown.click();
    const allActivity = page.getByRole('button', {
      name: 'All Activity',
    });
    if ((await allActivity.count()) > 0) {
      const feedReq = page.waitForResponse(/\/api\/v1\/feed.*/);
      await allActivity.click();
      await feedReq;
    }
  });

  test('footer shows View More when applicable and navigates', async ({
    page,
  }) => {
    const widget = page.locator('[data-testid="KnowledgePanel.ActivityFeed"]');

    await expect(widget).toBeVisible();

    // Footer only renders when showMoreButton is true
    const viewMore = widget.getByRole('link', { name: /View More/i });
    if ((await viewMore.count()) > 0) {
      await expect(viewMore).toBeVisible();

      await viewMore.click();
      await page.waitForLoadState('networkidle');

      // We should land on user Activity Feed. We just verify navigation happened
      await expect(page).not.toHaveURL(/home|welcome/i);

      // Return home for subsequent tests
      await redirectToHomePage(page);
    }
  });

  test('renders feed cards via ActivityFeedListV1New in widget mode', async ({
    page,
  }) => {
    const container = page.locator('#feedWidgetData');

    await expect(container).toBeVisible();

    const firstCard = container
      .locator('[data-testid="message-container"]')
      .first();

    if ((await firstCard.count()) > 0) {
      await expect(firstCard).toBeVisible();

      // Typical elements within a compact feed card rendered in widget mode
      const headerText = firstCard.locator('[data-testid="headerText"]');
      const timestamp = firstCard.locator('[data-testid="timestamp"]');

      if ((await headerText.count()) > 0) {
        await expect(headerText).toBeVisible();
      }
      if ((await timestamp.count()) > 0) {
        await expect(timestamp).toBeVisible();
      }
    }
  });

  test('emoji reactions can be added and removed in widget feed cards', async ({
    page,
  }) => {
    const messages = page.locator('[data-testid="message-container"]');
    if ((await messages.count()) === 0) {
      // nothing to react to; skip gracefully
      return;
    }

    const firstMessage = messages.first();

    await expect(firstMessage).toBeVisible();

    // Add reactions using helper (acts on the first feed index 1)
    await reactOnFeed(page, 1);

    // Verify reactions are visible
    const reactionContainer = firstMessage.locator(
      '[data-testid="feed-reaction-container"]'
    );

    await expect(reactionContainer).toBeVisible();

    for (const emoji of REACTION_EMOJIS) {
      await expect(reactionContainer).toContainText(emoji);
    }

    // Toggle off the same reactions
    await reactOnFeed(page, 1);

    // Container remains visible even if counts change
    await expect(reactionContainer).toBeVisible();
  });

  test('thread drawer opens from reply count and allows posting a reply', async ({
    page,
  }) => {
    const messages = page.locator('[data-testid="message-container"]');
    if ((await messages.count()) === 0) {
      return;
    }

    const firstMessage = messages.first();

    await expect(firstMessage).toBeVisible();

    // Open thread/drawer via reply count or clicking the card
    const replyCountBtn = firstMessage.locator('[data-testid="reply-count"]');
    if (await replyCountBtn.count()) {
      await replyCountBtn.click();
    } else {
      await firstMessage.click();
    }

    const drawer = page.locator('.ant-drawer-content');

    await expect(drawer).toBeVisible();

    // Type a quick reply if editor is present
    const commentInput = drawer.locator('[data-testid="comments-input-field"]');
    if (await commentInput.count()) {
      await commentInput.click();
      await page.fill(
        '[data-testid="editor-wrapper"] .ql-editor',
        'Widget thread automated reply'
      );

      const sendReply = page.waitForResponse(/\/api\/v1\/feed\/.*\/posts/);
      await page.getByTestId('send-button').click({ force: true });
      await sendReply;

      await expect(
        drawer.locator('[data-testid="feed-replies"]')
      ).toContainText('Widget thread automated reply');
    }

    // Close drawer
    const closeBtn = drawer.locator('[data-testid="closeDrawer"]');
    if (await closeBtn.count()) {
      await closeBtn.click();
    } else {
      await page.keyboard.press('Escape');
    }
  });
});