Rework organization page #8679

hotzenklotz · 2025-06-06T13:02:48Z

This PR refreshes the layout and styling of the organization page to be in inline with the account setting page.

URL of deployed dev instance (used for testing):

https://___.webknossos.xyz

Steps to test:

Make sure to test various orga configs: Basic, Team, Power and variations on too many users, too much storage space, subscription exceeded etc.
Check light/dark mode

Issues:

related to Add Account Settings page #8672

(Please delete unneeded items, merge only when none are left open)

Updated changelog
Updated migration guide if applicable
Updated documentation if applicable
Adapted wk-libs python client if relevant API parts change
Removed dev-only changes like prints and application.conf edits
Considered common edge cases
Needs datastore update after deployment

coderabbitai · 2025-06-06T13:02:55Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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.

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

🪧 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.
- Explain this complex logic.
- 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 explain this code block.
- @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 explain its main purpose.
- @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate sequence diagram to generate a sequence diagram of the changes in 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.

- Updated the navbar link for managing organizations to point to the overview page. - Replaced `AccountSettingsTitle` with `SettingsTitle` in multiple views for consistency. - Introduced `SettingsCard` component for better organization of settings-related UI. - Added new views for organization notifications and overview, enhancing the organization management experience. - Cleaned up unused code and improved the structure of organization-related components.

- Updated the CustomPlanUpgradeCard to include a MailOutlined icon and improved layout with responsive columns. - Modified OrganizationNotificationsView to dispatch the updated organization state after saving notification settings. - Added organization name editing functionality in OrganizationOverviewView with validation and state management. - Refactored organization overview stats display for better readability and structure. - Improved imports in organization-related components for consistency.

- Updated OrganizationController to include the current user's identity in the organization JSON response. - Modified organization cards to export components for better reusability. - Improved the upgrade plan modal by wrapping components in a ConfigProvider for consistent theming and layout adjustments. - Refactored the modal body to use responsive columns for displaying upgrade options. These changes aim to improve the user experience and maintainability of the organization management interface.

hotzenklotz · 2025-06-16T18:28:02Z

@philippotto I branched of the account settings page PR for this feature to reuse some components. Please focus the review only on the updated orga page for now.

hotzenklotz · 2025-06-16T18:30:10Z

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

@@ -71,7 +73,12 @@ export function extendPricingPlan(organization: APIOrganization) {
 }

 export function upgradeUserQuota() {
-  renderIndependently((destroyCallback) => <UpgradeUserQuotaModal destroy={destroyCallback} />);
+  renderIndependently((destroyCallback) => (
+    <ConfigProvider theme={getAntdTheme(getSystemColorTheme())}>


This is a bit dirty. It would be cleaner to fetch the user and apply the correct light/dark theme. This workaround, however, at least applies the right theme colors for primary buttons etc and is a close enough heuristic to match the OS appearance.

I don't understand why this is necessary. renderIndependently uses GlobalThemeProvider which reads the user object from the store and also creates a ConfigProvider wrapper?

hotzenklotz · 2025-06-16T18:31:15Z

frontend/javascripts/router.tsx

@@ -630,7 +630,17 @@ class ReactRouter extends React.Component<Props> {
              <SecuredRouteWithErrorBoundary
                isAuthenticated={isAuthenticated}
                path="/organizations/:organizationId"
-                render={() => <OrganizationEditView />}
+                render={() => <Redirect to="/organization" />}


I left the legacy frontend route for backward compatibility. Maybe that is not really needed though.

philippotto

cool stuff 👍 I really like the overall look. I left some comments and found this during testing:

I'm in the basic plan. I cannot really see what other plans are available and what they offer. the box at the bottom probably describes all power features? but what about the team features? also the point "Everything from Power, Team and Basic plans" seems incorrect, because there is nothing better than power, right?

I don't understand this box. the label sas "plan & subscription", the tooltip talks about notification and the content is my name?

ideally, this would look similar to how the orga name can be edited.

philippotto · 2025-06-18T11:49:03Z

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

+  renderIndependently((destroyCallback) => (
+    <ConfigProvider theme={getAntdTheme(getSystemColorTheme())}>
+      {" "}
+      …<UpgradeUserQuotaModal destroy={destroyCallback} />


is … on purpose here?

philippotto · 2025-06-18T11:50:32Z

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

@@ -71,7 +73,12 @@ export function extendPricingPlan(organization: APIOrganization) {
 }

 export function upgradeUserQuota() {
-  renderIndependently((destroyCallback) => <UpgradeUserQuotaModal destroy={destroyCallback} />);
+  renderIndependently((destroyCallback) => (
+    <ConfigProvider theme={getAntdTheme(getSystemColorTheme())}>


I don't understand why this is necessary. renderIndependently uses GlobalThemeProvider which reads the user object from the store and also creates a ConfigProvider wrapper?

philippotto · 2025-06-18T11:52:05Z

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

+          <Col span={12}>
+            <TeamPlanUpgradeCard
+              teamUpgradeCallback={() => {
+                sendUpgradePricingPlanEmail(PricingPlanEnum.Team);


shouldn't these calls be awaited before a success toast is shown?

philippotto · 2025-06-18T11:53:56Z

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

-        okButtonCallback={okButtonCallback}
-        destroy={destroyCallback}
-      />
+      <ConfigProvider theme={getAntdTheme(getSystemColorTheme())}>


upgradeStorageQuota does the same, too? is it really necessary?

Yes, you were riright about renderIndepently. Maybe I was confused why light/dark mode was not working (perhaps I did not refresh the page... ) Anyway, they are not needed. Good reviewer!

frontend/javascripts/admin/organization/pricing_plan_utils.ts

philippotto · 2025-06-18T12:31:40Z

frontend/javascripts/admin/organization/organization_view.tsx

+  return (
+    <Layout
+      style={{
+        minHeight: "calc(100vh - 64px)",


couldn't DEFAULT_NAVBAR_HEIGHT be used? if not: shouldn't we extract the 64?

philippotto · 2025-06-18T12:34:00Z

frontend/javascripts/admin/organization/organization_dangerzone_view.tsx

@@ -0,0 +1,66 @@
+import { SettingsCard } from "admin/account/helpers/settings_card";


the file name should use danger_zone to be consistent with the casing in the module.

philippotto · 2025-06-18T12:37:28Z

frontend/javascripts/admin/organization/organization_notifications.tsx

@@ -0,0 +1,95 @@
+import { MailOutlined, SaveOutlined } from "@ant-design/icons";


this file exists with and without _view. one should probably be deleted?

philippotto · 2025-06-18T12:38:32Z

frontend/javascripts/admin/organization/organization_overview_view.tsx

+  }
+
+  async function setOrganizationName(newOrgaName: string) {
+    const OrgaNameRegexPattern = /^[A-Za-z0-9\\-_\\. ß]+$/;


can be moved to top level. casing is weird. should probably be UPPER_CASE.

philippotto · 2025-06-18T12:42:45Z

frontend/javascripts/admin/organization/organization_overview_view.tsx

+    {
+      key: "owner",
+      title: "Owner",
+      value: "John Doe",


oopsie daisy

Good catch. Done

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

…sos into orga-settings-page

hotzenklotz · 2025-06-18T13:26:59Z

I'm in the basic plan. I cannot really see what other plans are available and what they offer. the box at the bottom probably describes all power features? but what about the team features? also the point "Everything from Power, Team and Basic plans" seems incorrect, because there is nothing better than power, right?

That is odd. I can't reproduce that. my Basic plan looks like in the PR description...

I don't understand this box. the label says "plan & subscription", the tooltip talks about notification and the content is my name?

All the Cards on this page are about notifications. Who receives notifications about these different things. In some cases you can edit them; in other cases they are just informative.

Ideally, this would show the email address of the owner. But that is another fetch of the user and lookup. Let's see... what can be done.

philippotto · 2025-06-18T13:40:18Z

That is odd. I can't reproduce that. my Basic plan looks like in the PR description...

probably because I used the dev instance and iswkorg was not true.

philippotto · 2025-06-18T13:40:52Z

That is odd. I can't reproduce that. my Basic plan looks like in the PR description...

probably because I used the dev instance and iswkorg was not true.

still, this should show sensible stuff (e.g., for self-hosted instances).

hotzenklotz · 2025-06-23T13:26:26Z

@philippotto I think I addressed all your feedback.

Regarding "custom" plans: I decided against showing any ad card for the moment. There are too many installation variations covered by "custom", so getting the wording right is hard. We can always add something later if we have a better understadning of the situation.

philippotto · 2025-06-24T10:10:42Z

hotzenklotz · 2025-06-24T11:33:19Z

storage always showed up as 0 B in use. probably independent of this PR, though...
users and storage show the infinity symbol? it should be 3 users and 5 gb. I switched from custom to basic in the DB. maybe this is the reason?

You have to explicitly set these values in the DB. There are columns in the Organisation table for that. Otherwise it defaults to null, i.e. infinity

hotzenklotz · 2025-06-24T12:16:34Z

this doesn't advertise for custom. is this on purpose? I understood your comment above so that custom plans won't have any advertisements, but getting to "custom" is a different story? but probably not a deal breaker for now.

This is intentional. There is no clear definition on how to get to custom. There is not straight path "Power" --> "Custom".

hotzenklotz · 2025-06-24T12:26:00Z

@philippotto I think I addressed all your points.

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

philippotto

nice, lgtm, only see the one typo I commented.

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

This PR adds a new "Account Settings" page to host various other sub-pages for: - changing email (soon) - changing password - appearance/theme - passkeys (future) - API Auth Token <img width="1269" alt="Screenshot 2025-06-25 at 10 45 45" src="https://github.com/user-attachments/assets/848cc79b-b636-4de1-b495-e15059e7d452" /> <img width="1268" alt="Screenshot 2025-06-25 at 10 45 54" src="https://github.com/user-attachments/assets/fcfb3c08-8a58-450e-b50d-96bd58ed9f1a" /> <img width="1269" alt="Screenshot 2025-06-25 at 10 46 01" src="https://github.com/user-attachments/assets/4a7da90e-a2ed-4a60-ac9b-ebff65d8e140" /> ### URL of deployed dev instance (used for testing): - https://accountsettingspage.webknossos.xyz/ ### Steps to test: - Go to new Account settings page - Change PW - Try dark/light mode ### Issues: - Blocked by #8671 - Blocked by #8679 - fixes #5408 ------ (Please delete unneeded items, merge only when none are left open) - [x] Updated [changelog](../blob/master/CHANGELOG.unreleased.md#unreleased) - [ ] Updated [migration guide](../blob/master/MIGRATIONS.unreleased.md#unreleased) if applicable - [ ] Updated [documentation](../blob/master/docs) if applicable - [ ] Adapted [wk-libs python client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client) if relevant API parts change - [ ] Removed dev-only changes like prints and application.conf edits - [x] Considered [common edge cases](../blob/master/.github/common_edge_cases.md) - [ ] Needs datastore update after deployment --------- Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Philipp Otto <philipp.4096@gmail.com>

refactor orga settings in new style

4cd2ecd

hotzenklotz self-assigned this Jun 6, 2025

hotzenklotz added the frontend label Jun 6, 2025

philippotto changed the title ~~Refresh organization page~~ Rework organization page Jun 6, 2025

hotzenklotz added 7 commits June 16, 2025 10:12

Merge branch 'account-settings-page' into orga-settings-page

d022413

formatting

a2002cb

fix setting cards buttons

749861a

changelog

44e0966

hotzenklotz marked this pull request as ready for review June 16, 2025 18:26

hotzenklotz requested a review from philippotto June 16, 2025 18:26

hotzenklotz commented Jun 16, 2025

View reviewed changes

Merge branch 'account-settings-page' into orga-settings-page

8716091

philippotto requested changes Jun 18, 2025

View reviewed changes

hotzenklotz and others added 3 commits June 18, 2025 14:56

Update frontend/javascripts/admin/organization/pricing_plan_utils.ts

55bf833

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

applied PR feedback

513011b

Merge branch 'orga-settings-page' of github.com:scalableminds/webknos…

01ae877

…sos into orga-settings-page

Show owner email in notifications

67e8819

hotzenklotz added 3 commits June 18, 2025 15:52

fix pricing plan label

121c91a

Merge branch 'account-settings-page' into orga-settings-page

203ae75

do not show upgrade options for custom plans yet

df8e81d

hotzenklotz mentioned this pull request Jun 23, 2025

Add Account Settings page #8672

Merged

7 tasks

fix null / infinity on update

66086aa

appled PR feedback

1903218

apply PR feedback

d61a522

hotzenklotz added 2 commits June 24, 2025 16:10

fix linitng

f2ee79d

Merge branch 'account-settings-page' into orga-settings-page

2ed707a

philippotto reviewed Jun 24, 2025

View reviewed changes

frontend/javascripts/admin/organization/upgrade_plan_modal.tsx Outdated Show resolved Hide resolved

philippotto reviewed Jun 24, 2025

View reviewed changes

philippotto approved these changes Jun 24, 2025

View reviewed changes

Update frontend/javascripts/admin/organization/upgrade_plan_modal.tsx

9599a88

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

hotzenklotz merged commit e489f9d into account-settings-page Jun 25, 2025
4 checks passed

hotzenklotz deleted the orga-settings-page branch June 25, 2025 08:25

		@@ -0,0 +1,66 @@
		import { SettingsCard } from "admin/account/helpers/settings_card";

		@@ -0,0 +1,95 @@
		import { MailOutlined, SaveOutlined } from "@ant-design/icons";

Rework organization page #8679

Rework organization page #8679

Uh oh!

Conversation

hotzenklotz commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

URL of deployed dev instance (used for testing):

Steps to test:

Issues:

Uh oh!

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

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

hotzenklotz commented Jun 16, 2025

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!

philippotto left a comment

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!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hotzenklotz commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

philippotto commented Jun 18, 2025

Uh oh!

philippotto commented Jun 18, 2025

Uh oh!

hotzenklotz commented Jun 23, 2025

Uh oh!

philippotto commented Jun 24, 2025 • edited by hotzenklotz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

General

Default config (no wkorg and custom plan)

Wkorg + Custom

hotzenklotz commented Jun 6, 2025 •

edited

Loading

coderabbitai bot commented Jun 6, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

hotzenklotz commented Jun 18, 2025 •

edited

Loading

philippotto commented Jun 24, 2025 •

edited by hotzenklotz

Loading

hotzenklotz commented Jun 24, 2025 •

edited

Loading