Select the correct request tab link for request page url by pankajjs · Pull Request #964 · RealDevSquad/website-dashboard

pankajjs · 2025-03-22T10:17:46Z

Date: 22 March, 2025

Developer Name: @pankajjs

Issue Ticket Number

Closes [Bug]: mismatch in request page url and request tab after reloading #960

Description

This PR fixes the mismatch in request page url and selected request tab.
-It correctly selects the request tab link given the request page url.
-It matches the request tab link with given page url even after reloading.

Documentation Updated?

Yes
No

Under Feature Flag

Yes
No

Database Changes

Yes
No

Breaking Changes

Yes
No

Development Tested?

Yes
No

Screenshots

Working Video

4.mp4

Test Coverage

Screenshots

Additional Notes

coderabbitai · 2025-03-22T10:17:53Z

Important

Review skipped

Auto incremental 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.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Summary by CodeRabbit

Tests
- Introduced a new test case verifying that the request page URL updates to the appropriate query parameter after user interactions and reloading.
Bug Fixes
- Enhanced the request page behavior so that URL parameters accurately reflect user actions, ensuring consistent state during page reloads.

Walkthrough

This pull request introduces a new test case to verify that the request page URL correctly updates after the page reloads. It also modifies the control flow in the request script by adding a call to update the URL query parameter (using updateUrlWithQuery(OOO_REQUEST_TYPE)) immediately following the population of request statuses. These changes ensure that the URL and request tab remain synchronized during user interaction.

Changes

File(s)	Change Summary
`__tests__/requests/requests.test.js`	Added a test case ("should match the request page url with ooo request after reloading") to verify that the URL query parameter reflects the correct state after reloading.
`requests/script.js`	Inserted a call to `updateUrlWithQuery(OOO_REQUEST_TYPE)` immediately after `populateStatus()` to update the URL query parameter during the rendering of request cards.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant RP as RequestPage
    participant PS as populateStatus
    participant UQ as updateUrlWithQuery

    U->>RP: Navigate to Request Page
    RP->>PS: Populate request statuses
    PS-->>RP: Return status data
    RP->>UQ: Update URL with OOO_REQUEST_TYPE
    UQ-->>RP: URL updated

Assessment against linked issues

Objective	Addressed	Explanation
Fix mismatch between request page URL and request tab (#960)	✅

Suggested reviewers

VinuB-Dev
RishiChaubey31
iamitprakash

Poem

I'm a hopping coder, swift and bright,
Fixing URLs by day and night.
My tests and code now clearly unite,
For request pages that are just right.
Bouncing with joy—hop on, let's delight!

🪧 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 <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
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 testing code 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
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/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

MayankBansal12 · 2025-03-22T12:15:41Z

Hi @pankajjs
Instead of rendering the default OOO type, shouldn't we fetch the type from the URL and render accordingly after reloading?

pankajjs · 2025-03-22T12:25:38Z

Hi @pankajjs Instead of rendering the default OOO type, shouldn't we fetch the type from the URL and render accordingly after reloading?

I think you are correct. If the request url is of type=onboarding after refresh, we should be displaying onboarding card.
Thanks for noticing it.

cloudflare-workers-and-pages · 2025-03-22T13:53:05Z

Deploying dashboard-rds with Cloudflare Pages

Latest commit:	`f49e20d`
Status:	✅ Deploy successful!
Preview URL:	https://c1626288.dashboard-rds.pages.dev
Branch Preview URL:	https://fix-mismatch-tab-url.dashboard-rds.pages.dev

View logs

pankajjs · 2025-03-22T13:55:25Z

requests/index.html

-            data-testid="ooo-tab"
-            >OOO</a
-          >
+          <a href="#" id="ooo_tab_link" data-testid="ooo-tab">OOO</a>


Remove the default selected_tab class from here because after a reload it selects the ooo tab then goes to another tab to match the request page url

pankajjs · 2025-03-22T13:56:09Z

requests/script.js

 const applyFilterButton = document.getElementById('applyFilterButton');
 const userNameFilterInput = document.getElementById('assignee-search-input');
-let currentReqType = OOO_REQUEST_TYPE;
+let currentReqType = params.get('type') ?? OOO_REQUEST_TYPE;


Fetches type from page url if not found select ooo request type as default

pankajjs · 2025-03-22T13:57:16Z

requests/script.js

+function updateTabLink(requestType) {
+  if (requestType === OOO_REQUEST_TYPE) {
+    oooTabLink.classList.add(selected__tab__class);
+    onboardingExtensionTabLink.classList.remove(selected__tab__class);
+    extensionTabLink.classList.remove(selected__tab__class);
+  } else if (requestType === ONBOARDING_EXTENSION_REQUEST_TYPE) {
+    onboardingExtensionTabLink.classList.add(selected__tab__class);
+    oooTabLink.classList.remove(selected__tab__class);
+    extensionTabLink.classList.remove(selected__tab__class);
+  } else if (requestType === EXTENSION_REQUEST_TYPE) {
+    extensionTabLink.classList.add(selected__tab__class);
+    oooTabLink.classList.remove(selected__tab__class);
+    onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  }
+}
+


Based on current request type it adds selected__tab class to request tab link and removes from others

pankajjs · 2025-03-22T13:58:10Z

requests/script.js

-  oooTabLink.classList.add(selected__tab__class);
-  extensionTabLink.classList.remove(selected__tab__class);
-  onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());


Have refactored this as it is being handle in updateTabLink function

pankajjs · 2025-03-22T13:58:15Z

requests/script.js

-  extensionTabLink.classList.add(selected__tab__class);
-  oooTabLink.classList.remove(selected__tab__class);
-  onboardingExtensionTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());


Have refactored this as it is being handle in updateTabLink function

pankajjs · 2025-03-22T13:58:21Z

requests/script.js

-  onboardingExtensionTabLink.classList.add(selected__tab__class);
-  extensionTabLink.classList.remove(selected__tab__class);
-  oooTabLink.classList.remove(selected__tab__class);
+  updateTabLink(currentReqType.toUpperCase());


Have refactored this as it is being handle in updateTabLink function

pankajjs · 2025-03-22T13:59:11Z

requests/script.js

  }
 }
-
+updateTabLink(currentReqType.toUpperCase());


select the request tab link based on current type for every page reload

pankajjs · 2025-03-22T14:19:42Z

__tests__/requests/requests.test.js

+  });
+
  it('should update the card when the accept or reject button is clicked for OOO requests', async () => {
+    await page.click('#ooo_tab_link');


Since the selected__tab has been removed from index.html, has to manually click ooo_tab_link to simulate the behaviour

pankajjs requested review from Achintya-Chatterjee and AnujChhikara March 22, 2025 10:24

fix: match the request tab link with the page url after a page reload

f49e20d

pankajjs force-pushed the fix/mismatch-tab-url branch from 60f2907 to f49e20d Compare March 22, 2025 13:53

pankajjs commented Mar 22, 2025

View reviewed changes

pankajjs changed the title ~~Match the request page url with ooo request type after page reloading~~ Select the correct request tab link for request page url Mar 22, 2025

pankajjs commented Mar 22, 2025

View reviewed changes

prakashchoudhary07 approved these changes Mar 24, 2025

View reviewed changes

prakashchoudhary07 merged commit 0b721a5 into develop Mar 24, 2025
6 checks passed

prakashchoudhary07 deleted the fix/mismatch-tab-url branch March 24, 2025 19:39

pankajjs mentioned this pull request Mar 25, 2025

Dev to Main Sync #963

Merged

10 tasks

coderabbitai bot mentioned this pull request Apr 7, 2025

display requests cards after reloading the /requests page #973

Merged

10 tasks

Comments

Conversation

pankajjs commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue Ticket Number

Description

Documentation Updated?

Under Feature Flag

Database Changes

Breaking Changes

Development Tested?

Screenshots

Test Coverage

Additional Notes

Uh oh!

coderabbitai bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Summary by CodeRabbit

Walkthrough

Changes

Sequence Diagram(s)

Assessment against linked issues

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

MayankBansal12 commented Mar 22, 2025

Uh oh!

pankajjs commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Mar 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying dashboard-rds with Cloudflare Pages

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pankajjs commented Mar 22, 2025 •

edited

Loading

coderabbitai bot commented Mar 22, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

pankajjs commented Mar 22, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 22, 2025 •

edited

Loading