fix: remove lightning.js, fix dep versions, fix flaky tests, fix release CI (#105)

awais-ansari · web-flow · commit 66d130efa477 · 2026-04-13T14:09:01.000+05:00
* fix: remove lightning.js, fix dep versions, fix flaky tests, fix release CI

* fix: test-utils test case

* test: addressed feedback changes
diff --git a/.env b/.env
@@ -20,5 +20,3 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
diff --git a/.env.development b/.env.development
@@ -21,5 +21,3 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
diff --git a/.env.test b/.env.test
@@ -19,5 +19,3 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-LEARNER_FEEDBACK_URL=''
-STAFF_FEEDBACK_URL=''
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,7 +17,7 @@ jobs:
       id-token: write # to enable use of OIDC for trusted publishing and npm provenance
     steps:
     - name: Checkout
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: Setup Nodejs Env
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,26 +38,26 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "classnames": "2.5.1",
+    "classnames": "^2.5.1",
     "dompurify": "^3.1.7",
-    "jest-environment-jsdom": "^29.7.0",
-    "lodash": "4.18.1",
-    "timeago.js": "4.0.2",
+    "lodash": "^4.18.1",
+    "timeago.js": "^4.0.2",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "14.6.3",
+    "@openedx/frontend-build": "^14.6.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.3.1",
-    "axios-mock-adapter": "1.22.0",
-    "glob": "7.2.3",
-    "husky": "7.0.4",
-    "jest": "29.7.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "axios-mock-adapter": "^1.22.0",
+    "glob": "^7.2.3",
+    "husky": "^7.0.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
-    "rosie": "2.1.1",
+    "rosie": "^2.1.1",
     "semantic-release": "^21.0.7"
   },
   "peerDependencies": {
diff --git a/src/Notification/NotificationTabs.jsx b/src/Notification/NotificationTabs.jsx
@@ -5,12 +5,10 @@ import React, {
 import { Tab, Tabs } from '@openedx/paragon';
 
 import NotificationSections from './NotificationSections';
-import { useFeedbackWrapper } from './utils';
 import { notificationsContext } from './context/notificationsContext';
 import { useNotification } from './data/hook';
 
 const NotificationTabs = () => {
-  useFeedbackWrapper();
   const {
     appName, handleActiveTab, tabsCount, appsId, updateNotificationData,
   } = useContext(notificationsContext);
diff --git a/src/Notification/index.jsx b/src/Notification/index.jsx
@@ -9,7 +9,7 @@ import { useSearchParams } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Bubble, Button, Hyperlink, Icon, IconButton, OverlayTrigger, Popover,
+  Bubble, Hyperlink, Icon, IconButton, OverlayTrigger, Popover,
 } from '@openedx/paragon';
 import { NotificationsNone, Settings } from '@openedx/paragon/icons';
 import { RequestStatus } from './data/constants';
@@ -81,10 +81,6 @@ const Notifications = ({ notificationAppData, margins }) => {
     };
   }, [handleClickOutsideNotificationTray]);
 
-  const enableFeedback = useCallback(() => {
-    window.usabilla_live('click');
-  }, []);
-
   const notificationRefs = useMemo(
     () => ({ popoverHeaderRef: headerRef, notificationRef: popoverRef }),
     [headerRef, popoverRef],
@@ -166,15 +162,6 @@ const Notifications = ({ notificationAppData, margins }) => {
                   <NotificationTabs />
                 </NotificationPopoverContext.Provider>
               </Popover.Content>
-              {getConfig().NOTIFICATION_FEEDBACK_URL && (
-              <Button
-                onClick={enableFeedback}
-                variant="warning"
-                className="notification-feedback-widget"
-              >
-                {intl.formatMessage(messages.feedback)}
-              </Button>
-              )}
             </div>
           </Popover>
         )}
diff --git a/src/Notification/index.test.jsx b/src/Notification/index.test.jsx
@@ -169,9 +169,10 @@ describe('Notification test cases.', () => {
     'Successfully call getNotificationCounts on URL %s change',
     async (url) => {
       const getNotificationCountsSpy = jest.spyOn(notificationApi, 'getNotificationCounts').mockReturnValue(() => true);
-      renderComponent(url);
-
-      expect(getNotificationCountsSpy).toHaveBeenCalledTimes(1);
+      await renderComponent(url);
+      await waitFor(() => {
+        expect(getNotificationCountsSpy).toHaveBeenCalledTimes(1);
+      });
     },
   );
 });
diff --git a/src/Notification/messages.js b/src/Notification/messages.js
@@ -31,11 +31,6 @@ const messages = defineMessages({
     defaultMessage: 'Load more notifications',
     description: 'Load more button to load more notifications',
   },
-  feedback: {
-    id: 'notification.feedback',
-    defaultMessage: 'Feedback',
-    description: 'text for feedback widget',
-  },
   allRecentNotificationsMessage: {
     id: 'notification.recent.all.message',
     defaultMessage: 'That’s all of your recent notifications!',
diff --git a/src/Notification/notification.scss b/src/Notification/notification.scss
@@ -162,13 +162,6 @@
     }
   }
 
-  .notification-feedback-widget {
-    right: -37px !important;
-    position: fixed !important;
-    transform: rotate(270deg) !important;
-    top: 50% !important;
-  }
-
   .height-inherit {
     height: inherit;
   }
diff --git a/src/Notification/notificationSections.test.jsx b/src/Notification/notificationSections.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  act, fireEvent, render, screen, waitFor, within,
+  fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import MockAdapter from 'axios-mock-adapter';
@@ -76,9 +76,10 @@ describe('Notification sections test cases.', () => {
     await mockNotificationsResponse();
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
+
+    await waitFor(() => {
       const notificationTraySection = screen.queryByTestId('notification-tray-section');
 
       expect(within(notificationTraySection).queryByText('Last 24 hours')).toBeInTheDocument();
@@ -91,16 +92,17 @@ describe('Notification sections test cases.', () => {
     await mockNotificationsResponse();
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
-      const markAllReadButton = screen.queryByTestId('mark-all-read');
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
 
+    await waitFor(() => {
       expect(screen.queryByTestId('unread-notification-1')).toBeInTheDocument();
-      await act(async () => { fireEvent.click(markAllReadButton); });
     });
 
-    await waitFor(async () => {
+    const markAllReadButton = await screen.findByTestId('mark-all-read');
+    fireEvent.click(markAllReadButton);
+
+    await waitFor(() => {
       expect(screen.queryByTestId('unread-notification-1')).not.toBeInTheDocument();
     });
   });
@@ -109,13 +111,11 @@ describe('Notification sections test cases.', () => {
     await mockNotificationsResponse(10, 2);
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
 
-      const loadMoreButton = screen.queryByTestId('load-more-notifications');
-      await act(async () => { fireEvent.click(loadMoreButton); });
-    });
+    const loadMoreButton = await screen.findByTestId('load-more-notifications');
+    fireEvent.click(loadMoreButton);
 
     await waitFor(() => {
       expect(screen.queryAllByTestId('notification-contents')).toHaveLength(12);
@@ -138,10 +138,8 @@ describe('Notification sections test cases.', () => {
 
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
-    });
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
 
     await waitFor(() => {
       expect(screen.queryByTestId('notifications-empty-list')).toBeInTheDocument();
diff --git a/src/Notification/notificationTabs.test.jsx b/src/Notification/notificationTabs.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  act, fireEvent, render, screen, waitFor, within,
+  fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
@@ -68,10 +68,10 @@ describe('Notification Tabs test cases.', () => {
   it('Successfully displayed with default discussion tab selected under notification tabs .', async () => {
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
 
+    await waitFor(() => {
       const tabs = screen.queryAllByRole('tab');
       const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
 
@@ -82,10 +82,11 @@ describe('Notification Tabs test cases.', () => {
 
   it('Successfully showed unseen counts for unselected tabs.', async () => {
     await renderComponent();
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
 
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
+
+    await waitFor(() => {
       const tabs = screen.getAllByRole('tab');
 
       expect(within(tabs[0]).queryByRole('status')).toBeInTheDocument();
@@ -95,17 +96,19 @@ describe('Notification Tabs test cases.', () => {
   it('Successfully selected reminder tab.', async () => {
     await renderComponent();
 
-    await waitFor(async () => {
-      const bellIcon = await screen.findByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
-      const notificationTab = screen.getAllByRole('tab');
-      let selectedTab = screen.queryByTestId('notification-tab-reminders');
+    const bellIcon = await screen.findByTestId('notification-bell-icon');
+    fireEvent.click(bellIcon);
 
+    await waitFor(() => {
+      const selectedTab = screen.queryByTestId('notification-tab-reminders');
       expect(selectedTab).not.toHaveClass('active');
+    });
 
-      fireEvent.click(notificationTab[0], { dataset: { rbEventKey: 'reminders' } });
-      selectedTab = screen.queryByTestId('notification-tab-reminders');
+    const notificationTab = screen.getAllByRole('tab');
+    fireEvent.click(notificationTab[0], { dataset: { rbEventKey: 'reminders' } });
 
+    await waitFor(() => {
+      const selectedTab = screen.queryByTestId('notification-tab-reminders');
       expect(selectedTab).toHaveClass('active');
     });
   });
diff --git a/src/Notification/test-utils.js b/src/Notification/test-utils.js
@@ -6,20 +6,23 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   getNotificationsListApiUrl, getNotificationsCountApiUrl, markNotificationsSeenApiUrl, markNotificationAsReadApiUrl,
 } from './data/api';
+import { getDiscussionTourUrl } from './tours/data/api';
 
 import './data/__factories__';
 
 const notificationCountsApiUrl = getNotificationsCountApiUrl();
 const notificationsApiUrl = getNotificationsListApiUrl();
 const markedAllNotificationsAsSeenApiUrl = markNotificationsSeenApiUrl('discussion');
 const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
+const notificationsTourApiUrl = getDiscussionTourUrl();
 
 export default async function mockNotificationsResponse(todaycount = 8, earlierCount = 2) {
   const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
   const notifications = (Factory.buildList('notification', todaycount, null, { createdDate: new Date().toISOString() }).concat(
     Factory.buildList('notification', earlierCount, null, { createdDate: '2023-06-01T00:46:11.979531Z' }),
   ));
   axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
+  axiosMock.onGet(notificationsTourApiUrl).reply(200, []);
   axiosMock.onPut(markedAllNotificationsAsSeenApiUrl).reply(200, { message: 'Notifications marked seen.' });
   axiosMock.onPatch(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
 
diff --git a/src/Notification/utils.js b/src/Notification/utils.js
@@ -1,7 +1,3 @@
-import { useEffect } from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { logError } from '@edx/frontend-platform/logging';
 import {
   QuestionAnswerOutline,
   PostOutline,
@@ -49,18 +45,3 @@ export const getIconByType = (type) => {
   };
   return iconMap[type] || { icon: PostOutline, class: 'text-primary-500' };
 };
-
-export function useFeedbackWrapper() {
-  useEffect(() => {
-    try {
-      const url = getConfig().NOTIFICATION_FEEDBACK_URL;
-      if (url) {
-        // eslint-disable-next-line no-undef
-        window.usabilla_live = lightningjs.require('usabilla_live', getConfig().NOTIFICATION_FEEDBACK_URL);
-        window.usabilla_live('hide');
-      }
-    } catch (error) {
-      logError('Error loading usabilla_live in notificationTray', error);
-    }
-  }, []);
-}
diff --git a/src/lightning.js b/src/lightning.js
