Skip to content

feat(UserInfo): Migrate User Info FAB to React #33620

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 7 commits into from
Jun 3, 2025
Merged

feat(UserInfo): Migrate User Info FAB to React #33620

merged 7 commits into from
Jun 3, 2025

Conversation

EnxDev
Copy link
Contributor

@EnxDev EnxDev commented May 29, 2025 •
edited
Loading

SUMMARY 🚀

This PR migrates the UserInfo view from server-side rendering (SSR) to a fully client-side React implementation ⚛️
While the UI remains largely unchanged, the data fetching logic is now handled entirely on the client side for better maintainability and consistency.

Changes Included 🔧

  • Migrated the UserInfo view from FAB to a React-based implementation ⚛️
  • Fetches user data dynamically📡
  • Introduced modals for editing user details and resetting passwords 🛠️
  • Ensured parity with the previous functionality ✅
  • Updated routing and UI behavior where needed 🧭

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

  • Before
    table-before

  • After
    Screenshot 2025-06-03 171635

  • After
    reset-password-after

  • Before
    reset-password-before

  • After
    after-edit-user

  • Before
    before-edit-user

TESTING INSTRUCTIONS

  • Run superset init
  • All tests should pass

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@EnxDev EnxDev requested review from mistercrunch, geido and msyavuz May 29, 2025 20:23
@github-actions github-actions bot added the api Related to the REST API label May 29, 2025
@dosubot dosubot bot added the change:frontend Requires changing the frontend label May 29, 2025
@EnxDev EnxDev added frontend:refactor:antd5 frontend:refactor Related to refactoring the frontend labels May 29, 2025
korbit-ai[bot]
korbit-ai bot reviewed May 29, 2025
View reviewed changes
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

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

I've completed my review and didn't find any issues.

Files scanned ​
File Path Reviewed
superset-frontend/src/components/Descriptions/index.tsx ✅
superset/views/user_info.py ✅
superset/views/users/schemas.py ✅
superset-frontend/src/components/Modal/FormModal.tsx ✅
superset-frontend/src/types/bootstrapTypes.ts ✅
superset-frontend/src/components/Icons/AntdEnhanced.tsx ✅
superset-frontend/src/views/routes.tsx ✅
superset-frontend/src/features/userInfo/UserInfoModal.tsx ✅
superset/views/users/api.py ✅
superset-frontend/src/pages/UserInfo/index.tsx ✅
superset/views/base.py ✅
superset/views/utils.py ✅
superset/initialization/init.py ✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

@EnxDev EnxDev marked this pull request as draft May 29, 2025 20:33
@EnxDev EnxDev marked this pull request as ready for review May 30, 2025 20:19
korbit-ai[bot]
korbit-ai bot reviewed May 30, 2025
View reviewed changes
Copy link

@korbit-ai korbit-ai bot left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Status
Design Non-Descriptive Method Name ▹ view 🧠 Incorrect
Readability Missing Translation Wrapper ▹ view 🧠 Not in scope
Documentation Redundant field descriptions ▹ view 🧠 Incorrect
Security Missing Permission Check for User Info Route ▹ view 🧠 Incorrect
Readability Inconsistent Component Type Annotations ▹ view 🧠 Incorrect
Security Unverified secure transport for password transmission ▹ view 🧠 Not in standard
Security Missing autocomplete prevention on password field ▹ view 🧠 Not in standard
Performance Memoize Password Validator Function ▹ view 🧠 Not in scope
Functionality Incorrect API endpoint for user updates ▹ view 🧠 Incorrect
Readability Inconsistent Marshmallow Field Imports ▹ view 🧠 Not in standard
Files scanned ​
File Path Reviewed
superset-frontend/src/components/Descriptions/index.tsx ✅
superset/views/user_info.py ✅
superset/views/users/schemas.py ✅
superset-frontend/src/components/Modal/FormModal.tsx ✅
superset-frontend/src/types/bootstrapTypes.ts ✅
superset-frontend/src/components/Icons/AntdEnhanced.tsx ✅
superset/commands/database/validate.py ✅
superset-frontend/src/features/allEntities/AllEntitiesTable.tsx ✅
superset-frontend/src/features/tags/tags.ts ✅
superset-frontend/src/views/routes.tsx ✅
superset-frontend/src/features/userInfo/UserInfoModal.tsx ✅
superset/views/users/api.py ✅
superset-frontend/src/pages/UserInfo/index.tsx ✅
superset/views/base.py ✅
superset/views/utils.py ✅
superset/daos/tag.py ✅
superset/tags/api.py ✅
superset/initialization/init.py ✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset/views/users/schemas.py
Comment on lines +21 to 22
from marshmallow import fields, Schema
from marshmallow.fields import Boolean, Integer, String

This comment was marked as resolved.

Sign in to view

superset/views/users/schemas.py
Comment on lines +25 to +27
first_name_description = "The current user's first name"
last_name_description = "The current user's last name"
password_description = "The current user's password for authentication" # noqa: S105

This comment was marked as resolved.

Sign in to view

superset/views/user_info.py
Comment on lines +33 to +34
def list(self) -> FlaskResponse:
return super().render_app_template()

This comment was marked as resolved.

Sign in to view

superset-frontend/src/views/routes.tsx
@@ -243,6 +247,7 @@ export const routes: Routes = [
path: '/sqllab/',
Component: SqlLab,
},
{ path: '/user_info/', Component: UserInfo },

This comment was marked as resolved.

Sign in to view

superset-frontend/src/views/routes.tsx
Comment on lines 137 to 146
const UsersList: LazyExoticComponent<any> = lazy(
() => import(/* webpackChunkName: "UsersList" */ 'src/pages/UsersList'),
);

const UserInfo = lazy(
() => import(/* webpackChunkName: "UserInfo" */ 'src/pages/UserInfo'),
);
const ActionLogList: LazyExoticComponent<any> = lazy(
() => import(/* webpackChunkName: "ActionLogList" */ 'src/pages/ActionLog'),
);

This comment was marked as resolved.

Sign in to view

superset-frontend/src/features/userInfo/UserInfoModal.tsx
Comment on lines +53 to +56
await SupersetClient.put({
endpoint: `/api/v1/me/`,
jsonPayload: { ...payload },
});

This comment was marked as resolved.

Sign in to view

superset-frontend/src/features/userInfo/UserInfoModal.tsx
Comment on lines +97 to +100
<Input.Password
name="password"
placeholder="Enter the user's password"
/>

This comment was marked as resolved.

Sign in to view

superset-frontend/src/features/userInfo/UserInfoModal.tsx
>
<Input.Password
name="password"
placeholder="Enter the user's password"

This comment was marked as resolved.

Sign in to view

superset-frontend/src/features/userInfo/UserInfoModal.tsx
Comment on lines +90 to +120
const ResetPasswordFields = () => (
<>
<FormItem
name="password"
label={t('Password')}
rules={[{ required: true, message: t('Password is required') }]}
>
<Input.Password
name="password"
placeholder="Enter the user's password"
/>
</FormItem>
<FormItem
name="confirm_password"
label={t('Confirm Password')}
dependencies={['password']}
rules={[
{
required: true,
message: t('Please confirm your password'),
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error(t('Passwords do not match!')));
},
}),
]}
>

This comment was marked as resolved.

Sign in to view

superset-frontend/src/features/userInfo/UserInfoModal.tsx
try {
const { confirm_password, ...payload } = values;
await SupersetClient.put({
endpoint: `/api/v1/me/`,

This comment was marked as resolved.

Sign in to view

@github-actions GitHub Actions
Copy link
Contributor

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

@github-actions GitHub Actions
Copy link
Contributor

@EnxDev Ephemeral environment spinning up at http://54.203.88.194:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

msyavuz
msyavuz reviewed May 31, 2025
View reviewed changes
@EnxDev EnxDev force-pushed the enxdev/feat/fab-user-info-migration branch from f39d4fa to bc51f93 Compare June 2, 2025 07:06
@EnxDev EnxDev removed the testenv-up label Jun 2, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 2, 2025

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 2, 2025

@EnxDev Ephemeral environment spinning up at http://44.245.179.174:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

@EnxDev EnxDev requested a review from msyavuz June 3, 2025 15:23
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 3, 2025

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 3, 2025

@EnxDev Ephemeral environment spinning up at http://35.167.60.95:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

msyavuz
msyavuz approved these changes Jun 3, 2025
View reviewed changes
Copy link
Member

@msyavuz msyavuz left a comment

Choose a reason for hiding this comment

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

LGTM!

@EnxDev EnxDev merged commit 2051915 into master Jun 3, 2025
61 of 62 checks passed
@EnxDev EnxDev deleted the enxdev/feat/fab-user-info-migration branch June 3, 2025 17:24
LevisNgigi pushed a commit to LevisNgigi/superset that referenced this pull request Jun 18, 2025
@EnxDev @LevisNgigi
feat(UserInfo): Migrate User Info FAB to React (apache#33620)
297cd1a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@msyavuz msyavuz msyavuz approved these changes

@mistercrunch mistercrunch Awaiting requested review from mistercrunch

@geido geido Awaiting requested review from geido

+1 more reviewer

@korbit-ai korbit-ai[bot] korbit-ai[bot] left review comments

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
api Related to the REST API change:frontend Requires changing the frontend frontend:refactor:antd5 frontend:refactor Related to refactoring the frontend size/XL
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@EnxDev @msyavuz @sadpandajoe