feat(organizations): add Organization Settings route TASK-981 #5299
Conversation
# Conflicts: # jsapp/js/account/organization/OrganizationSettingsField.tsx # jsapp/js/account/organization/organizationSettingsRoute.module.scss
magicznyleszek
changed the title
| @@ -13,7 +13,7 @@ import type { | |||
| } from './account.constants'; | |||
|
|
|||
| // See: kobo/apps/accounts/forms.py (KoboSignupMixin) | |||
| const ORGANIZATION_TYPE_SELECT_OPTIONS = [ | |||
| export const ORGANIZATION_TYPE_SELECT_OPTIONS = [ | |||
There was a problem hiding this comment.
IMO it's a bit off to have this exported from "accountFieldsEditor", maybe we should move this const somewhere else more directed to organizations?
| } | ||
|
|
||
| /** | ||
| * A `TextBox` wrapper componet for `OrganizationSettingsRoute` that makes code |
There was a problem hiding this comment.
Typo
| * A `TextBox` wrapper componet for `OrganizationSettingsRoute` that makes code | |
| * A `TextBox` wrapper component for `OrganizationSettingsRoute` that makes code |
| ); | ||
| const mmoLabelLowercase = mmoLabel.toLowerCase(); | ||
|
|
||
| if (!orgQuery.data) { |
There was a problem hiding this comment.
I believe we should use the loading flag instead.
| if (!orgQuery.data) { | |
| if (orgQuery.data.isLoading) { |
| required | ||
| onChange={onChange} | ||
| disabled={!onChange || isDisabled} | ||
| errors={validateValue ? validateValue(value) : undefined} |
There was a problem hiding this comment.
🤔
the logic here seems to be reversed, or the naming may be confusing.
validateValue seems like it should return true if the field is valid.
Maybe we could just have the same errors prop as boolean being set in the parent and passed through?
| export default function OrganizationSettingsRoute() { | ||
| const orgQuery = useOrganizationQuery(); | ||
| const [subscriptions] = useState(() => subscriptionStore); | ||
| const [state, setState] = useState<State>({name: ''}); |
There was a problem hiding this comment.
I'm not really a fan of this pattern of having an object in state.
Usually when that's the case it's common to use useReducer, but in this case, just for a few fields I'd go with multiple states.
| isDisabled={!isUserAdminOrOwner || isPendingOrgPatch} | ||
| /> | ||
|
|
||
| {isStripeEnabled && state.website && ( |
There was a problem hiding this comment.
For me, who doesn't have the website filled in yet, the field is not displayed for editing. Is this on purpose?
Same thing for the type
🗒️ Checklist
<type>(<scope>)<!>: <title> TASK-1234frontendorbackendunless it's global📣 Summary
In Organization Settings route (
#/account/organization/settings) display editable organization name, and website. Also display non-editable organization type.📖 Description
Only some roles allow editing the fields, and there is some logic in regards to fields being visible.
👀 Preview steps
mmosEnabled#/account/organization/settingsNext steps:
#/account/organization/settings💭 Notes
Includes
planNamecode being moved out ofjsapp/js/account/usage/yourPlan.component.tsxintojsapp/js/account/subscriptionStore.tsso it can be used in both places now.