search

talent-connect / connect

Mentor-mentee and jobseeker-company matchmaking platform used by ReDI School of Digital Integration, in Berlin, Munich and Düsseldorf, Germany.
https://connect.berlin.redi-school.org
24 stars 8 forks source link

Job Posting 3-dot Context Menu w/ copy link function #852

Closed ericbolikowski closed 8 months ago

ericbolikowski commented 8 months ago

What Github issue does this PR relate to? Insert link.

809

What should the reviewer know?

Demo video: https://share.cleanshot.com/rjHqnSHK (too long for GIF)

This PR implements a reusable "three-dots menu" component (more aptly named <CardContextMenu> in the codebase).

The context menu is used as the CTA in Job Listing cards displayed in:

  1. <EditableJobPostings>
  2. `

<CardContextMenu> displays a menu on click with options controlled through the menuItems prop. Options shown in (1) vary from (2).

The following features accessed from menu items are implemented:

Delete: triggers a confirmation modal. It follows a new design that is relative to existing models more light in the design, so a new <LightModal> component was implemented. Edit: edit button triggers the "normal" Edit modal as we know it. The Delete button is removed. Copy URL: copies the URL of the Job Listing's page to clipboard. Then displays a toast message. We already supported toasts via <AppNotification>. CON and TP apps both held identical implementations of this component, so it was refactored back into a single "atom" now living in the shared-atomic-design-components library. Reactivate: a button to Reactivate listings used to appear as a single CTA on cards in <ExpiredJobPostings>. Button moved to a menu item. Clicking triggers the same logic as before

Finally, the <CardContextMenu> used in <EditableJobPostings> is wrapped into a <Tooltip> component to display a tooltip about the copy url function.

A complete migration from material-ui to the latest version of mui is also in place.

Summary by CodeRabbit

gitguardian[bot] commented 8 months ago

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request
| GitGuardian id | GitGuardian status | Secret | Commit | Filename | | | -------------- | ------------------ | ------------------------------ | ---------------- | --------------- | -------------------- | | [753993](https://dashboard.gitguardian.com/incidents/753993?occurrence=119905772) | Triggered | Generic High Entropy Secret | f101fd603653b2976fd4458cbd9b95e6fa06a33d | nx.json | [View secret](https://github.com/talent-connect/connect/commit/f101fd603653b2976fd4458cbd9b95e6fa06a33d#diff-15552e50b1b7c05b05b7ffe08ee47b5ed62b8d2039229c58972a42fd22a7381cL18) |
🛠 Guidelines to remediate hardcoded secrets
1. Understand the implications of revoking this secret by investigating where it is used in your code. 2. Replace and store your secret safely. [Learn here](https://blog.gitguardian.com/secrets-api-management?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) the best practices. 3. Revoke and [rotate this secret](https://docs.gitguardian.com/secrets-detection/secrets-detection-engine/detectors/generics/generic_high_entropy_secret#revoke-the-secret?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). 4. If possible, [rewrite git history](https://blog.gitguardian.com/rewriting-git-history-cheatsheet?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data. To avoid such incidents in the future consider - following these [best practices](https://blog.gitguardian.com/secrets-api-management/?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) for managing and storing secrets including API keys and other credentials - install [secret detection on pre-commit](https://docs.gitguardian.com/ggshield-docs/integrations/git-hooks/pre-commit?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) to catch secret before it leaves your machine and ease remediation.

🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!

coderabbitai[bot] commented 8 months ago

[!IMPORTANT]

Auto Review Skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository.

To trigger a single review, invoke the @coderabbitai review command.

Walkthrough

The updates span across the ReDI Talent Pool application, enhancing UI components and backend data handling. Notable changes include the integration of a new AppNotification component for streamlined notifications, the introduction of CardContextMenu and LightModal for improved user interactions, and a shift towards using @mui for material components. Additionally, adjustments in import orders and the consolidation of similar functionalities reflect a focus on code organization and optimization.

Changes

Files Change Summary
.../src/App.tsx Updated to include AppNotification; adjusted import orders.
.../components/molecules/CardContextMenu.tsx, LightModal.tsx New components for context menus and modals.
.../components/organisms/Avatar.tsx, .../cv-list/CvListItem.tsx, .../jobseeker-profile/JobseekerProfileForJobseekerEyes.tsx, .../me/MeCompany.tsx Shifted to @mui imports for material components.
.../components/organisms/ExpiredJobListings.tsx, .../company-profile-editables/EditableJobPostings.tsx Enhanced job listing functionalities with delete options and simplified job editing logic.
.../components/organisms/JobListingCard.scss Added styles for ellipsis and icons.
.../pages/app/browse/BrowseJobseeker.tsx Modified icon interaction.
.../pages/front/login/Login.tsx, .../reset-password/SetNewPassword.tsx Updated notification handling via showNotification.
.../lib/tp-job-listing/... Adjusted job listing data handling with additional fields and corrected mappings.
.../shared-atomic-design-components/src/lib/atoms/... Introduced AppNotification and new icons; updated imports and hooks usage.
libs/shared-config/src/lib/config.ts Added dynamic URL setting for different environments.

"In the code's weave, a change does thread,
Through files and functions, seamlessly spread.
🐇 With each line, a new feature hops in sight,
A digital burrow, built just right."

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.
katamatata commented 8 months ago

These seem to be duplicated & should be removed. Correct?

1.

image
  1. image
helloanil commented 8 months ago

@coderabbitai review

ericbolikowski commented 8 months ago

These seem to be duplicated & should be removed. Correct?

@katamatata nice catch & fix. PS! Strange that I can't reply to your comment in the "thread", but only here.

ericbolikowski commented 8 months ago

One minor issue: The modals for onDelete click action on active and expired job listings look different. The one for active job listings is darker & the tooltip text renders above it

@katamatata: Will have a look

ericbolikowski commented 8 months ago

@katamatata:

Do we really need the tooltip on the 3-dot menu about copying the link? IMHO, it might be confusing. There are also other actions in the menu, not only 'copy the link', and the name of this action inside the menu is self-explanatory. Also, I guess we would inform the company representatives about the new flows/features anyway, so we can let them know where they can find different actions.

I see the point. It would be more ideal with some kind of announcement "Now you can copy the URL of Job Listing" banner/modal show once or twice.

I think we're short on time, so maybe we keep it for about a month then remove it? Can you bring it up in a team check-in?

ericbolikowski commented 8 months ago

@katamatata solved this one, and it was such a "d'oh I did somethin' silly" mistake 😆

One minor issue: The modals for onDelete click action on active and expired job listings look different. The one for active job listings is darker & the tooltip text renders above it

We can look at it during a mentoring session if you want! If you want to see how I screwed up 😁