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

Api key expiration frontend notifications #2388

Merged
merged 4 commits into from
Mar 7, 2024

Conversation

CDimonaco
Copy link
Member

Description

When the trento frontend application loads, we fetch the api key expiration.

If the api key is expired, the frontend shows a persistent toast.
If the api key will expire in 30 days, the frontend shows a dismissable toast.

This pr also adds a dismissable toast, and a custom notification dispatching with custom duration and dismissable.

image
image

How was this tested?

Automated tests, e2e tests

@CDimonaco CDimonaco added enhancement New feature or request javascript Pull requests that update Javascript code labels Mar 6, 2024
@CDimonaco CDimonaco self-assigned this Mar 6, 2024
Copy link
Contributor

@abravosuse abravosuse left a comment

Choose a reason for hiding this comment

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

Code apart, the toasts look good to me Carmine!

@arbulu89 arbulu89 requested a review from rtorrero March 6, 2024 15:54
Copy link
Contributor

@rtorrero rtorrero left a comment

Choose a reason for hiding this comment

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

LGTM @CDimonaco , only few minor things. Also, would it make sense to have the DismissibleToast component in storybook?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think the correct word would be Dismissible

Copy link
Member Author

Choose a reason for hiding this comment

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

We can change it, I googled and the two forms are both valid, idk

Copy link
Contributor

Choose a reason for hiding this comment

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

I prefer Dismissable. It looks more correct in this case

assets/js/state/sagas/settings.test.jsx Show resolved Hide resolved
Copy link
Contributor

@arbulu89 arbulu89 left a comment

Choose a reason for hiding this comment

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

Really nice @CDimonaco
I left some nitpick comments.
I guess that the visualization of the api key itself in the settings page will have its own sagas/queries, right?

assets/js/common/DismissableToast/DismissableToast.jsx Outdated Show resolved Hide resolved
assets/js/common/DismissableToast/index.js Show resolved Hide resolved
assets/js/state/sagas/notifications.jsx Outdated Show resolved Hide resolved
assets/js/state/sagas/notifications.jsx Outdated Show resolved Hide resolved
assets/js/state/sagas/notifications.jsx Outdated Show resolved Hide resolved
assets/js/state/sagas/settings.test.jsx Show resolved Hide resolved
expect(dispatched).toEqual([]);
});

it('should dispatch an expired key notification if the expire_at of the api key is in the past', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

for me these test description texts are a bit awkard, but well, i can live with that XD

test/e2e/cypress/e2e/settings.cy.js Show resolved Hide resolved
@CDimonaco
Copy link
Member Author

@rtorrero Storybook for the component it's not needed, it's not a real "visual" component, in storybook is just a div without style, it's meant to be used inside the toast library wrapper, who injects styles and icon

@CDimonaco CDimonaco force-pushed the api_key_expiration_frontend_toast branch from 524b9eb to 8c2d9d8 Compare March 6, 2024 17:07
Copy link
Contributor

@arbulu89 arbulu89 left a comment

Choose a reason for hiding this comment

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

Thank you for the updates @CDimonaco

Copy link
Contributor

Choose a reason for hiding this comment

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

I prefer Dismissable. It looks more correct in this case

assets/js/state/sagas/settings.test.jsx Outdated Show resolved Hide resolved
@jagabomb
Copy link
Contributor

jagabomb commented Mar 7, 2024

Is it possible to add this to Storybook? I would like review it in the browser. 😅

@CDimonaco
Copy link
Member Author

Is it possible to add this to Storybook? I would like review it in the browser. 😅

It's completely useless to have in storybook like I was saying in the other comment, it's an unstyled piece of html, the result is in the screenshot and the library itslef provide the style to the toast, I can put a button in storybook to spawn a toast but Idk if it's really useful

@jagabomb
Copy link
Contributor

jagabomb commented Mar 7, 2024

It's completely useless to have in storybook like I was saying in the other comment, it's an unstyled piece of html, the result is in the screenshot and the library itslef provide the style to the toast, I can put a button in storybook to spawn a toast but Idk if it's really useful

Sorry I missed that comment. I would find it useful to review the component and just make sure it renders the same and that there will be consistency in the future should changes occur.

Copy link
Member

@EMaksy EMaksy left a comment

Choose a reason for hiding this comment

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

Hey, well done, besides the small comments left by others nothing to add.
LGTM!

@CDimonaco CDimonaco force-pushed the api_key_expiration_frontend_toast branch 2 times, most recently from c0d1b0d to ea73402 Compare March 7, 2024 13:09
@CDimonaco CDimonaco merged commit 9180167 into main Mar 7, 2024
24 checks passed
@CDimonaco CDimonaco deleted the api_key_expiration_frontend_toast branch March 7, 2024 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request javascript Pull requests that update Javascript code
Development

Successfully merging this pull request may close these issues.

None yet

6 participants