Skip to content

Refactor PreIssueAccessTokenActionConfigForm to use useReducer#10484

Open
canbo206 wants to merge 4 commits into
wso2:masterfrom
canbo206:fix-issue-27947
Open

Refactor PreIssueAccessTokenActionConfigForm to use useReducer#10484
canbo206 wants to merge 4 commits into
wso2:masterfrom
canbo206:fix-issue-27947

Conversation

@canbo206

@canbo206 canbo206 commented Jun 29, 2026

Copy link
Copy Markdown

Purpose

This PR addresses the react-doctor/prefer-useReducer lint warning in
PreIssueAccessTokenActionConfigForm. The component had 5 separate useState
calls managing related form state (isAuthenticationUpdateFormState,
authenticationType, isSubmitting, isHasRule, and rule). These have been
refactored into a single useReducer hook with explicit TypeScript interfaces
for state and actions, improving readability and maintainability.

Related Issues

Related PRs

  • N/A

Checklist

  • e2e cypress tests locally verified. (for internal contributers)
  • Manual test round performed and verified.
  • UX/UI review done on the final implementation.
  • Documentation provided. (Add links if there are any)
  • Relevant backend changes deployed and verified
  • Unit tests provided. (Add links if there are any)
  • Integration tests provided. (Add links if there are any)

Security checks

Developer Checklist (Mandatory)

  • Complete the Developer Checklist in the related product-is issue to track any behavioral change or migration impact.

@CLAassistant

CLAassistant commented Jun 29, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

PreIssueAccessTokenActionConfigForm now uses a reducer-backed form state instead of multiple local state hooks. Effects, validation, submit handling, child form callbacks, and submit loading all read from or dispatch to the shared formState.


Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name Status Explanation Resolution
Changeset Required ❌ Error The changed files include the feature refactor but no new .changeset/*.md file; only .changeset/README.md was modified. Add a new .changeset/*.md file covering the changed package(s) and version bump; README alone is not sufficient.
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title is concise and accurately summarizes the main change: refactoring the component to use useReducer.
Description check ✅ Passed The description follows the template and includes purpose, related issue, PRs, checklist, security checks, and developer checklist.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • 🛠️ create changeset

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@features/admin.actions.v1/components/pre-issue-access-token-action-config-form.tsx`:
- Around line 85-98: The reducer state in
pre-issue-access-token-action-config-form is currently typed too narrowly for
values that can be absent. Update FormStateInterface so authenticationType and
rule can be null, widen FormActionInterface payloads for SET_AUTHENTICATION_TYPE
and SET_RULE to accept null, and adjust the RuleConfigForm setRule prop/type to
allow null as well. Ensure the reducer and any related state initialization or
action handling in this component use the updated nullable types consistently.
- Line 220: The pre-issue-access-token-action-config-form component has stray
extra braces that break parsing, so clean up the malformed conditional and file
terminator in the main form component. In `PreIssueAccessTokenActionConfigForm`,
change the `if (formState.isAuthenticationUpdateFormState || isCreateFormState)`
block to use a single opening brace, and remove the extra trailing `};` at the
end of the file so the component is syntactically valid.
- Around line 210-216: Initialize payloadRule to null before the
formState.isHasRule branching in pre-issue-access-token-action-config-form.tsx
so the create flow with no selected rule is explicitly treated as absent. Update
the logic around the payloadRule assignment and the later payloadRule !== null
check to use a consistent null sentinel, keeping the existing formState.rule and
isCreateFormState handling intact.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 34c94822-4ce3-4981-baf3-77ea35adc41a

📥 Commits

Reviewing files that changed from the base of the PR and between 8d38a1c and 220771a.

📒 Files selected for processing (1)
  • features/admin.actions.v1/components/pre-issue-access-token-action-config-form.tsx

Comment on lines 210 to 216
if (formState.isHasRule) {
payloadRule = formState.rule;
} else {
if (!isCreateFormState && !rule) {
if (!isCreateFormState && !formState.rule) {
payloadRule = {};
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Initialize payloadRule to null before branching. In the create flow with no selected rule, it can stay undefined, so the later payloadRule !== null check still treats it as present.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@features/admin.actions.v1/components/pre-issue-access-token-action-config-form.tsx`
around lines 210 - 216, Initialize payloadRule to null before the
formState.isHasRule branching in pre-issue-access-token-action-config-form.tsx
so the create flow with no selected rule is explicitly treated as absent. Update
the logic around the payloadRule assignment and the later payloadRule !== null
check to use a consistent null sentinel, keeping the existing formState.rule and
isCreateFormState handling intact.

@pavinduLakshan

Copy link
Copy Markdown
Member

Hi @canbo206, Thank you for the contribution. Let's update the pr title and description. Also please address the coderabbit bot comments as well. Thanks in advance!

@canbo206

canbo206 commented Jul 1, 2026

Copy link
Copy Markdown
Author

Hi @pavinduLakshan thanks for the feedback! I have addressed all three
CodeRabbit comments:

  1. Updated FormStateInterface and FormActionInterface to allow null for
    authenticationType and rule
  2. Removed the stray double brace on the if statement
  3. Removed the extra trailing }; at the end of the file

import { AxiosError } from "axios";
import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import React, { FunctionComponent, ReactElement, useEffect, useReducer } from "react";import { useTranslation } from "react-i18next";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
import React, { FunctionComponent, ReactElement, useEffect, useReducer } from "react";import { useTranslation } from "react-i18next";
import React, { FunctionComponent, ReactElement, useEffect, useReducer } from "react";
import { useTranslation } from "react-i18next";

Comment on lines +86 to +90
isAuthenticationUpdateFormState: boolean;
authenticationType: AuthenticationType | null;
isSubmitting: boolean;
isHasRule: boolean;
rule: RuleWithoutIdInterface | null;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

lets add doc comments for interface members

Comment on lines +194 to +201
Partial<ActionConfigFormPropertyInterface> => {

// Call the utility validate function
return validateActionCommonFields(values, {
authenticationType: formState.authenticationType,
isAuthenticationUpdateFormState: formState.isAuthenticationUpdateFormState,
isCreateFormState: isCreateFormState
});

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

removing indentation will cause lint failures

const [ isHasRule, setIsHasRule ] = useState<boolean>(false);
const [ rule, setRule ] = useState<RuleWithoutIdInterface>(null);

const [ formState, dispatch ] = useReducer<React.Reducer<FormStateInterface, FormActionInterface>>(

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

variable name formState is too generic imo

@pavinduLakshan

pavinduLakshan commented Jul 16, 2026

Copy link
Copy Markdown
Member

Let's update the pr title and description.

Hi @canbo206, kind reminder on this.

PS: Also the issue link is not properly mentioned in the PR description. Let's fix that too.

@pavinduLakshan

Copy link
Copy Markdown
Member

The linked issue reports over 200 occurrences, but this pr only fixes one. is this intentional?

@codecov

codecov Bot commented Jul 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.85%. Comparing base (e8a1a85) to head (14b1876).
⚠️ Report is 433 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #10484      +/-   ##
==========================================
+ Coverage   72.62%   72.85%   +0.22%     
==========================================
  Files         469      470       +1     
  Lines       70633    71228     +595     
  Branches      240      240              
==========================================
+ Hits        51300    51892     +592     
- Misses      19222    19225       +3     
  Partials      111      111              

see 25 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@canbo206 canbo206 changed the title Fix issue 27947 Refactor PreIssueAccessTokenActionConfigForm to use useReducer Jul 16, 2026
@canbo206

Copy link
Copy Markdown
Author

The linked issue reports over 200 occurrences, but this pr only fixes one. is this intentional?

Hi @pavinduLakshan I started with one file to get the pattern and get initial feedback before scaling. I'm happy to fix additional files in this PR or open separate PRs for the remaining occurrences. Whichever one you prefer.

@pavinduLakshan

Copy link
Copy Markdown
Member

The linked issue reports over 200 occurrences, but this pr only fixes one. is this intentional?

Hi @pavinduLakshan I started with one file to get the pattern and get initial feedback before scaling. I'm happy to fix additional files in this PR or open separate PRs for the remaining occurrences. Whichever one you prefer.

Great, and thanks. Let's open separate prs for the remaining occurrences as that'd make it much easier to manage for both of us.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React Doctor] prefer-useReducer: Component "PreIssueAccessTokenActionConfigForm" has 5 useState calls — consid... (258 occurrences)

3 participants