♻️ Hide tutorials on other pages (#1181)

* ♻️ Hide tutorials on other pages

* ✅ Update Tutorials.test

* ✅ Update Tutorials.test.tsx

Author: mariush2

src/organisms/TopBar/Tutorials/Tutorials.styles.ts

@@ -7,10 +7,8 @@ export const Container = styled.div`
   flex-direction: column;
   padding: ${spacings.large};
   width: 520px;
-  > h4 {
-    margin-bottom: ${spacings.x_large};
-  }
-  > hr {
+  height: 100%;
+  > h4:not(:last-child) {
     margin-bottom: ${spacings.x_large};
   }
 `;

src/organisms/TopBar/Tutorials/Tutorials.test.tsx

@@ -47,30 +47,23 @@ test('Renders expected items when opening the tutorials menu', async ({
       <Tutorials />
     </TutorialProvider>,
     {
-      routes: ['/tutorial'],
-      initialEntries: ['/tutorial'],
+      routes: ['/'],
+      initialEntries: ['/'],
     },
     { wrapper: Providers }
   );
   const user = userEvent.setup();
 
-  await user.click(screen.getByRole('button'));
+  await user.click(await screen.findByRole('button'));
 
   await waitFor(() =>
-    expect(
-      screen.getByText(`Available Tutorials (${tutorials.length})`)
-    ).toBeInTheDocument()
+    expect(screen.getByText(`Available Tutorials (1)`)).toBeInTheDocument()
   );
 
   expect(screen.getByText('For current page')).toBeInTheDocument();
-  expect(screen.getByText('For other pages')).toBeInTheDocument();
-  expect(screen.getByRole('separator')).toBeInTheDocument();
-
-  for (const tutorial of tutorials) {
-    expect(
-      screen.getByRole('button', { name: tutorial.name })
-    ).toBeInTheDocument();
-  }
+  expect(
+    screen.getByRole('button', { name: tutorials[0].name })
+  ).toBeInTheDocument();
 });
 
 test('Hides expected tutorials when providing filter fn', async ({
@@ -83,8 +76,8 @@ test('Hides expected tutorials when providing filter fn', async ({
       <Tutorials filterTutorials={filterFunction} />
     </TutorialProvider>,
     {
-      routes: ['/tutorial'],
-      initialEntries: ['/tutorial'],
+      routes: ['/'],
+      initialEntries: ['/'],
     },
     { wrapper: Providers }
   );
@@ -95,91 +88,72 @@ test('Hides expected tutorials when providing filter fn', async ({
   await waitFor(() =>
     expect(
       screen.getByText(
-        `Available Tutorials (${tutorials.filter(filterFunction).length})`
+        `Available Tutorials (${tutorials.filter((t) => t.path === '/').filter(filterFunction).length})`
       )
     ).toBeInTheDocument()
   );
-
-  for (const tutorial of tutorials) {
-    if (tutorial.willPopUp) {
-      expect(
-        screen.getByRole('button', { name: tutorial.name })
-      ).toBeInTheDocument();
-    } else {
-      expect(
-        screen.queryByRole('button', { name: tutorial.name })
-      ).not.toBeInTheDocument();
-    }
-  }
 });
 
 test('Clicking TutorialItem triggers callback, so we can navigate / do whatever we need', async ({
   worker,
 }) => {
   worker.use(tutorialHandler);
   const callback = vi.fn();
-
   await renderWithRouter(
     <TutorialProvider>
       <Tutorials onTutorialStart={callback} />
     </TutorialProvider>,
     {
-      routes: ['/tutorial'],
-      initialEntries: ['/tutorial'],
+      routes: ['/'],
+      initialEntries: ['/'],
     },
     { wrapper: Providers }
   );
   const user = userEvent.setup();
 
-  await user.click(screen.getByRole('button'));
+  await user.click(await screen.findByRole('button'));
 
   await waitFor(() =>
-    expect(
-      screen.getByText(`Available Tutorials (${tutorials.length})`)
-    ).toBeInTheDocument()
+    expect(screen.getByText(`Available Tutorials (1)`)).toBeInTheDocument()
   );
 
-  const randomTutorial = faker.helpers.arrayElement(tutorials);
   const tutorialItem = screen.getByRole('button', {
-    name: randomTutorial.name,
+    name: tutorials[0].name,
   });
 
   await user.click(tutorialItem);
 
-  expect(callback).toHaveBeenCalledWith(randomTutorial.id);
+  expect(callback).toHaveBeenCalledWith(tutorials[0].id);
 });
 
 test('Shows "completed" if tutorial has been seen', async ({ worker }) => {
-  worker.use(tutorialHandler);
-  const randomTutorial = faker.helpers.arrayElement(tutorials);
   window.localStorage.setItem(
     `sam-seen-tutorials-${environment.getAppName(import.meta.env.VITE_NAME)}`,
-    JSON.stringify([randomTutorial.id])
+    JSON.stringify([tutorials[0].id])
   );
+  worker.use(tutorialHandler);
   const callback = vi.fn();
   await renderWithRouter(
     <TutorialProvider>
       <Tutorials onTutorialStart={callback} />
     </TutorialProvider>,
     {
-      routes: ['/tutorial'],
-      initialEntries: ['/tutorial'],
+      routes: ['/'],
+      initialEntries: ['/'],
     },
     { wrapper: Providers }
   );
   const user = userEvent.setup();
 
-  await user.click(screen.getByRole('button'));
+  await user.click(await screen.findByRole('button'));
 
   await waitFor(() =>
-    expect(
-      screen.getByText(`Available Tutorials (${tutorials.length})`)
-    ).toBeInTheDocument()
+    expect(screen.getByText(`Available Tutorials (1)`)).toBeInTheDocument()
   );
 
   expect(
     screen.getByRole('button', {
-      name: `COMPLETED ${randomTutorial.name}`,
+      name: `COMPLETED ${tutorials[0].name}`,
     })
   ).toBeInTheDocument();
 });

src/organisms/TopBar/Tutorials/Tutorials.tsx

@@ -1,6 +1,6 @@
 import { FC, HTMLAttributes, useRef, useState } from 'react';
 
-import { Divider, Icon, Typography } from '@equinor/eds-core-react';
+import { Icon, Typography } from '@equinor/eds-core-react';
 import { youtube_alt } from '@equinor/eds-icons';
 import {
   MyTutorialDto,
@@ -27,22 +27,14 @@ export const Tutorials: FC<TutorialsProps> = ({
   onTutorialStart,
   ...rest
 }) => {
-  const { allTutorials, tutorialsOnThisPage } = useTutorials();
+  const { tutorialsOnThisPage } = useTutorials();
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
-  const filteredAllTutorials = filterTutorials
-    ? allTutorials.filter(filterTutorials)
-    : allTutorials;
   const filteredTutorialsOnThisPage = filterTutorials
     ? tutorialsOnThisPage.filter(filterTutorials)
     : tutorialsOnThisPage;
 
-  const tutorialsOnOtherPages = filteredAllTutorials.filter(
-    (tutorial) =>
-      filteredTutorialsOnThisPage.findIndex((t) => t.id === tutorial.id) === -1
-  );
-
   const handleToggleOpen = () => setOpen((prev) => !prev);
 
   return (
@@ -63,7 +55,7 @@ export const Tutorials: FC<TutorialsProps> = ({
         >
           <Container>
             <Typography variant="h4">
-              Available Tutorials ({filteredAllTutorials.length})
+              Available Tutorials ({filteredTutorialsOnThisPage.length})
             </Typography>
             {filteredTutorialsOnThisPage.length > 0 && (
               <TutorialList>
@@ -78,21 +70,6 @@ export const Tutorials: FC<TutorialsProps> = ({
                 ))}
               </TutorialList>
             )}
-            {filteredTutorialsOnThisPage.length > 0 &&
-              filteredTutorialsOnThisPage.length > 0 && <Divider />}
-            {tutorialsOnOtherPages.length > 0 && (
-              <TutorialList>
-                <Typography variant="caption">For other pages</Typography>
-                {tutorialsOnOtherPages.map((tutorial) => (
-                  <TutorialItem
-                    key={tutorial.id}
-                    onTutorialStart={onTutorialStart}
-                    onClose={handleToggleOpen}
-                    {...tutorial}
-                  />
-                ))}
-              </TutorialList>
-            )}
           </Container>
         </TopBarMenu>
       )}