Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨(frontend) split dashboard certifiate page #2370

Merged

Conversation

rlecellier
Copy link
Collaborator

@rlecellier rlecellier commented Apr 12, 2024

Purpose

joanie's certificate endpoint now return only order's certificate by
default.
to retrive enrollments certificate we need a second request with the
right filter.
Here we add tab in learner dashboard certificate page to render both
list: order and enrollments certificates

image
Capture vidéo du 25-04-2024 16:39:29.webm

@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch 5 times, most recently from 25ddcbe to cd8ce34 Compare April 16, 2024 12:46
@rlecellier rlecellier marked this pull request as ready for review April 16, 2024 13:34
@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch from cd8ce34 to 95dd442 Compare April 16, 2024 13:34
src/frontend/js/components/Tabs/_styles.scss Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/_styles.scss Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/_styles.scss Outdated Show resolved Hide resolved
src/frontend/cunningham.cjs Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/_styles.scss Show resolved Hide resolved
src/frontend/js/components/Tabs/TabsContext/index.tsx Outdated Show resolved Hide resolved
src/frontend/scss/vendors/cunningham-tokens.scss Outdated Show resolved Hide resolved
CHANGELOG.md Outdated Show resolved Hide resolved
src/frontend/js/pages/DashboardCertificates/index.tsx Outdated Show resolved Hide resolved
@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch 7 times, most recently from 7e6e527 to 80b434a Compare April 25, 2024 15:07
src/frontend/cunningham.cjs Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/index.tsx Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/_styles.scss Outdated Show resolved Hide resolved
src/frontend/cunningham.cjs Outdated Show resolved Hide resolved
Comment on lines 36 to 42
<Tabs.Tab
name="enrollment-certificate-tab"
initialIsActive={certificateType === CertificateType.ENROLLMENT}
href={generatePath(LearnerDashboardPaths.ENROLLMENT_CERTIFICATES)}
>
<FormattedMessage {...messages.enrollmentCertificateTabLabel} />
</Tabs.Tab>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just remember that we talked to hide this tab if the user has no certificate of this kind. Maybe we could do that in another PR ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would prefere yes, it's a different journey.

edit: PR #2387

@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch from 80b434a to 034fc91 Compare April 26, 2024 13:29
@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch 4 times, most recently from 876fce1 to 034a2c3 Compare May 15, 2024 14:53
Copy link
Member

@jbpenrath jbpenrath left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Last few comments then it will be good

src/frontend/js/components/Tabs/index.tsx Outdated Show resolved Hide resolved
const TabContextProvider = ({
initialActiveTabName,
children,
}: PropsWithChildren & { initialActiveTabName?: string }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}: PropsWithChildren & { initialActiveTabName?: string }) => {
}: PropsWithChildren<{ initialActiveTabName?: string }>) => {

const Tabs = ({
initialActiveTabName,
children,
}: PropsWithChildren & { initialActiveTabName: string }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}: PropsWithChildren & { initialActiveTabName: string }) => {
}: PropsWithChildren<{ initialActiveTabName: string }>) => {

const { activeTabName, setActiveTabName } = useContext(TabsContext);
const navigate = useNavigate();

const isActive = !!activeTabName && activeTabName === name;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should work ?

Suggested change
const isActive = !!activeTabName && activeTabName === name;
const isActive = activeTabName === name;

Comment on lines 60 to 62
{certificates.items.length === 0 && (
<Banner message={intl.formatMessage(messages.empty)} type={BannerType.INFO} />
)}
Copy link
Member

@jbpenrath jbpenrath May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, we should not display this banner until we are fetching data.
Currently, there is flickering effect when switching tab.

CleanShot.2024-05-15.at.19.29.28.mp4

@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch 2 times, most recently from e40c1ed to ba8f711 Compare May 16, 2024 12:45
src/frontend/js/components/Tabs/index.tsx Outdated Show resolved Hide resolved
src/frontend/js/components/Tabs/index.tsx Outdated Show resolved Hide resolved
@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch 4 times, most recently from f4c5d06 to 9916c59 Compare May 16, 2024 15:28
@rlecellier rlecellier enabled auto-merge (rebase) May 16, 2024 15:28
@rlecellier rlecellier force-pushed the rlecellier/learner_dashboard_split_certificate_page branch from 9916c59 to 330d141 Compare May 16, 2024 15:31
We need a basic tab component to render two linked section in the
learner dashbaord certificates page.
build cunningham theme with new entries for tabs.
joanie's certificate endpoint now return only order's certificate by
default.
to retrive enrollments certificate we need a second request with the
right filter.
Here we add tab in learner dashboard certificate page to render both
list: order and enrollments certificates
certificate entry on learner sidebar menu can render multiple routes:
* order certificate
* enrollment certificate

our menu item must be selected when any of theses two route is active.
@jbpenrath jbpenrath force-pushed the rlecellier/learner_dashboard_split_certificate_page branch from 330d141 to bb2ec6e Compare May 16, 2024 15:43
@rlecellier rlecellier merged commit f94be66 into master May 16, 2024
20 checks passed
@rlecellier rlecellier deleted the rlecellier/learner_dashboard_split_certificate_page branch May 16, 2024 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants