richie-education 2.25.0-b2.dev92 → 2.25.0-b2.dev96

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -15,6 +15,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { userEvent } from '@storybook/testing-library';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
   CourseStateFactory,
@@ -166,6 +167,25 @@ describe('<DashboardItemOrder/>', () => {
     await expectNoSpinner('Loading certificate ...');
   });
 
+  it('renders an order with a valid "Go to syllabus" link', async () => {
+    const order: CredentialOrder = CredentialOrderFactory().one();
+    order.target_courses = [];
+    const { product } = mockCourseProductWithOrder(order);
+
+    render(<DashboardItemOrder order={order} />, { wrapper });
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+    const moreButton = screen.getByRole('combobox', {
+      name: 'See additional options',
+    });
+
+    const user = userEvent.setup();
+    await user.click(moreButton);
+
+    const link = screen.getByRole('link', { name: 'Go to syllabus' });
+    expect(link.getAttribute('href')).toBe('/redirects/courses/' + order.course.code);
+  });
+
   /**
    * Non-Writable.
    */

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -29,6 +29,11 @@ const messages = defineMessages({
     description: 'Accessible label displayed while certificate is being fetched on the dashboard.',
     defaultMessage: 'Loading certificate...',
   },
+  syllabusLinkLabel: {
+    id: 'components.DashboardItemOrder.syllabusLinkLabel',
+    description: 'Syllabus link label on order details',
+    defaultMessage: 'Go to syllabus',
+  },
 });
 
 interface DashboardItemOrderProps {
@@ -109,6 +114,13 @@ export const DashboardItemOrder = ({
         title={product?.title ?? ''}
         code={'Ref. ' + course.code}
         imageUrl={course.cover?.src}
+        more={
+          <li>
+            <a className="selector__list__link" href={`/redirects/courses/${course.code}`}>
+              <FormattedMessage {...messages.syllabusLinkLabel} />
+            </a>
+          </li>
+        }
         footer={
           <>
             <div className="dashboard-item-order__footer">

package/js/widgets/Dashboard/components/DashboardItem/_styles.scss

@@ -40,6 +40,16 @@
       &__code {
         order: 1;
       }
+
+      &__more {
+        position: absolute;
+        right: 1rem;
+        top: 0.5rem;
+
+        .selector__list {
+          right: -1rem;
+        }
+      }
     }
 
     &__status {

package/js/widgets/Dashboard/components/DashboardItem/index.spec.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { userEvent } from '@storybook/testing-library';
 import { DashboardSubItemsList } from './DashboardSubItemsList';
 import { DashboardSubItem } from './DashboardSubItem';
 import { DashboardItem, DEMO_IMAGE_URL } from '.';
@@ -58,4 +60,45 @@ describe('<DashboardItem />', () => {
     screen.getByText('Sub 2');
     screen.getByText('Sub 3');
   });
+
+  it('renders a DashboardItem with more dropdown', async () => {
+    render(
+      <IntlProvider locale="en">
+        <DashboardItem
+          title="Become a React pro"
+          code="Ref. 123"
+          imageUrl={DEMO_IMAGE_URL}
+          more={
+            <>
+              <li>
+                <div className="selector__list__link">Copy</div>
+              </li>
+              <li>
+                <div className="selector__list__link">Duplicate</div>
+              </li>
+              <li>
+                <div className="selector__list__link">Delete</div>
+              </li>
+            </>
+          }
+        />
+        ,
+      </IntlProvider>,
+    );
+
+    expect(screen.queryByText('Copy')).not.toBeInTheDocument();
+    expect(screen.queryByText('Duplicate')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+
+    const moreButton = screen.getByRole('combobox', {
+      name: 'See additional options',
+    });
+
+    const user = userEvent.setup();
+    await user.click(moreButton);
+
+    screen.getByText('Copy');
+    screen.getByText('Duplicate');
+    screen.getByText('Delete');
+  });
 });

package/js/widgets/Dashboard/components/DashboardItem/index.stories.tsx

@@ -22,3 +22,21 @@ export const Default: Story = {};
 export const WithImage: Story = {
   args: { imageUrl: DEMO_IMAGE_URL },
 };
+export const WithMore: Story = {
+  args: {
+    imageUrl: DEMO_IMAGE_URL,
+    more: (
+      <>
+        <li>
+          <div className="selector__list__link">Copy</div>
+        </li>
+        <li>
+          <div className="selector__list__link">Duplicate</div>
+        </li>
+        <li>
+          <div className="selector__list__link">Delete</div>
+        </li>
+      </>
+    ),
+  },
+};

package/js/widgets/Dashboard/components/DashboardItem/index.tsx

@@ -1,6 +1,18 @@
 import { PropsWithChildren, ReactNode } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { useSelect } from 'downshift';
+import { defineMessages, useIntl } from 'react-intl';
 import { JoanieFile } from 'types/Joanie';
 import { Nullable, PropsWithTestId } from 'types/utils';
+import { Icon, IconTypeEnum } from 'components/Icon';
+
+const messages = defineMessages({
+  moreLabel: {
+    id: 'components.DashboardItem.more_label',
+    description: 'Accessible label for the more button on the dashboard item',
+    defaultMessage: 'See additional options',
+  },
+});
 
 export type DashboardItemProps = PropsWithTestId<{
   title: ReactNode;
@@ -9,6 +21,7 @@ export type DashboardItemProps = PropsWithTestId<{
   imageFile?: Nullable<JoanieFile>;
   footer?: ReactNode;
   mode?: 'full' | 'compact';
+  more?: ReactNode;
 }>;
 
 // This is temporary due to the fact that backend doesn't give this attribute yet.
@@ -23,6 +36,7 @@ export const DashboardItem = ({
   footer,
   mode = 'full',
   children,
+  more,
   ...props
 }: PropsWithChildren<DashboardItemProps>) => {
   return (
@@ -58,6 +72,7 @@ export const DashboardItem = ({
               <h5 className="dashboard-item__block__head__title">{title}</h5>
               <div className="dashboard-item__block__head__code">{code}</div>
             </div>
+            {more && <DashboardItemMore more={more} />}
           </header>
         )}
         <footer className="dashboard-item__block__footer">{footer}</footer>
@@ -66,3 +81,28 @@ export const DashboardItem = ({
     </div>
   );
 };
+
+const DashboardItemMore = ({ more }: { more: ReactNode }) => {
+  const intl = useIntl();
+  const { isOpen, getToggleButtonProps, getMenuProps } = useSelect({
+    items: [],
+  });
+
+  return (
+    <div className="selector dashboard-item__block__head__more">
+      <Button
+        icon={<Icon name={IconTypeEnum.MORE} />}
+        color="tertiary"
+        size="small"
+        aria-label={intl.formatMessage(messages.moreLabel)}
+        {...getToggleButtonProps()}
+      />
+      <ul
+        {...getMenuProps()}
+        className={`selector__list ${isOpen ? '' : 'selector__list--is-closed'}`}
+      >
+        {isOpen && more}
+      </ul>
+    </div>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev92",
+  "version": "2.25.0-b2.dev96",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -50,19 +50,19 @@
     "@hookform/resolvers": "3.3.4",
     "@openfun/cunningham-react": "2.4.0",
     "@openfun/cunningham-tokens": "2.1.0",
-    "@sentry/browser": "7.100.1",
-    "@sentry/types": "7.100.1",
-    "@storybook/addon-actions": "7.6.14",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addon-interactions": "7.6.14",
-    "@storybook/addon-links": "7.6.14",
-    "@storybook/react": "7.6.14",
-    "@storybook/react-webpack5": "7.6.14",
+    "@sentry/browser": "7.101.1",
+    "@sentry/types": "7.101.1",
+    "@storybook/addon-actions": "7.6.16",
+    "@storybook/addon-essentials": "7.6.16",
+    "@storybook/addon-interactions": "7.6.16",
+    "@storybook/addon-links": "7.6.16",
+    "@storybook/react": "7.6.16",
+    "@storybook/react-webpack5": "7.6.16",
     "@storybook/testing-library": "0.2.2",
-    "@tanstack/query-core": "5.20.1",
-    "@tanstack/query-sync-storage-persister": "5.20.1",
-    "@tanstack/react-query": "5.20.1",
-    "@tanstack/react-query-persist-client": "5.20.1",
+    "@tanstack/query-core": "5.21.7",
+    "@tanstack/query-sync-storage-persister": "5.21.7",
+    "@tanstack/react-query": "5.21.7",
+    "@tanstack/react-query-persist-client": "5.21.7",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
@@ -74,20 +74,20 @@
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.11",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.56",
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.2.19",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
+    "@typescript-eslint/eslint-plugin": "7.0.1",
+    "@typescript-eslint/parser": "7.0.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.35.1",
+    "core-js": "3.36.0",
     "downshift": "8.3.1",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
@@ -101,7 +101,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-storybook": "0.8.0",
     "fetch-mock": "9.11.0",
     "file-loader": "6.2.0",
     "glob": "10.3.10",
@@ -113,7 +113,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.1.7",
+    "msw": "2.2.1",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.0.3",
     "prettier": "3.2.5",
@@ -124,14 +124,14 @@
     "react-hook-form": "7.50.1",
     "react-intl": "6.6.2",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.22.0",
-    "sass": "1.70.0",
+    "react-router-dom": "6.22.1",
+    "sass": "1.71.0",
     "source-map-loader": "5.0.0",
-    "storybook": "7.6.14",
+    "storybook": "7.6.16",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.3.3",
     "uuid": "9.0.1",
-    "webpack": "5.90.1",
+    "webpack": "5.90.2",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
@@ -140,7 +140,7 @@
   },
   "resolutions": {
     "@testing-library/dom": "9.3.4",
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.56",
     "@types/react-dom": "18.2.19"
   },
   "msw": {