Skip to content
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.

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

[Publisher] Agency Settings: Settings page + Account Tab (2/5) #1256 #1308

Conversation

corypride
Copy link
Collaborator

Description of the change

Updated styling for the Agency Settings and associated files in order to combine Agency Settings and Team Management into one Settings page with two tabs (“Account” & “Team Members” - w/ the first tab being the default selected tab).

RecidivizSettingsPgRefactor2.mp4

Type of change

All pull requests must have at least one of the following labels applied (otherwise the PR will fail):

Label Description
Type: Bug non-breaking change that fixes an issue
Type: Feature non-breaking change that adds functionality
Type: Breaking Change fix or feature that would cause existing functionality to not work as expected
Type: Non-breaking refactor change addresses some tech debt item or prepares for a later change, but does not change functionality
Type: Configuration Change adjusts configuration to achieve some end related to functionality, development, performance, or security
Type: Dependency Upgrade upgrades a project dependency - these changes are not included in release notes

Related issues

Closes #1256

Checklists

Development

This box MUST be checked by the submitter prior to merging:

  • [ x] Double- and triple-checked that there is no Personally Identifiable Information (PII) being mistakenly added in this pull request

These boxes should be checked by the submitter prior to merging:

  • Tests have been written to cover the code changed/added as part of this pull request

Code review

These boxes should be checked by reviewers prior to merging:

  • This pull request has a descriptive title and information useful to a reviewer
  • This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
  • Potential security implications or infrastructural changes have been considered, if relevant

@mxosman
Copy link
Contributor

mxosman commented Apr 15, 2024

Hi Cory! I thought I would get to this by end of day - but I will review first thing tomorrow morning.

Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

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

Hi @corypride! So cool to see this starting to take shape! I'm still reviewing, but wanted to get the first batch of reviews out while I keep digging in.

publisher/.gitignore Outdated Show resolved Hide resolved
publisher/.idea/vcs.xml Outdated Show resolved Hide resolved
publisher/src/components/Button/Button.stories.tsx Outdated Show resolved Hide resolved
publisher/src/components/Input/ErrorWithTooltip.tsx Outdated Show resolved Hide resolved
publisher/src/components/Settings/AccountSettings.tsx Outdated Show resolved Hide resolved
publisher/src/components/Settings/AgencySettingsURL.tsx Outdated Show resolved Hide resolved
@corypride
Copy link
Collaborator Author

corypride commented Apr 16, 2024 via email

…tte, fixed some margin and spacing issues in the Settings.styles, AgencySettings.styles, and AccountSettings.styles files
… for email reminder input on AgencySettingsEmailNotifications
…logic to show display component next to the section labels of AgencySettingsDescription and AgencySettingsUrl
…ommon repo and adjusted spacing on severalelements in the AgencySettings sections.
@corypride corypride requested a review from mxosman April 22, 2024 16:57
Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

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

Hi Cory! I'm still re-reviewing, but in the meantime, two big items that stand out to me are:

  1. There's a 69k line package-lock.json that's being pushed up in this PR which we should not include because we haven't installed any packages in this PR - and it will cause issues when the app gets built to be deployed.
  2. Can you remove the duplicate /Button components in the /publisher repo?

Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

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

Getting closer, Cory! Left some more thoughts and also waiting on the TabbedBar changes as well. Let me know if I can clarify anything further!

…r CheckboxSpacingWrapper in the AgencySettings.styles, added capitialization to the values in the Sectors sectionin the AgencySettingsBasicInfo file
common/components/Input/Input.styled.tsx Outdated Show resolved Hide resolved
common/components/Input/Input.tsx Outdated Show resolved Hide resolved
publisher/src/pages/Settings.tsx Outdated Show resolved Hide resolved
@corypride corypride requested a review from mxosman May 1, 2024 19:06
Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

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

SO CLOSE! Only one thing left and this will be good to go, Cory! (Left a nit too that would be helpful to include!)

publisher/src/pages/Settings.tsx Outdated Show resolved Hide resolved
publisher/src/pages/Settings.tsx Outdated Show resolved Hide resolved
…s page and updated GuideKey to point to AgencySetting
@corypride corypride requested a review from mxosman May 3, 2024 01:26
@corypride corypride requested a review from mxosman May 6, 2024 00:19
Copy link
Contributor

@mxosman mxosman left a comment

Choose a reason for hiding this comment

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

Great work on this, @corypride! I know this was a beast and I appreciate all of your work on this and addressing the feedback. This will be a huge (and very much needed) face-lift for the Publisher. Thank you for helping us out with this, good sir!

@corypride corypride merged commit aff8617 into cory/agency-settings-design-udpates-feature May 6, 2024
7 checks passed
corypride added a commit that referenced this pull request May 21, 2024
* [Publisher]Agency Settings: edit profileDropdownMetadata  and create GlobalStyles.tsx (#1271)

* [Publisher]Agency Settings: edit profileDropdownMetadata to replace 'Your Account,' 'Agency Settings,' and 'Team Management' with the option 'Settings'. Added GlobalStyles.tsx

* [Publisher]GlobalStyles.tsx: add license header and 2 component skeletons

* [Publisher]GlobalStyles.tsx: removed extra whitespace characters

* [Publisher]GlobalStyles.tsx: ran yarn lint --fix

* [Publisher]Settings.tsx and SettingsMenu: refactor and removal

* Revert "[Publisher]Settings.tsx and SettingsMenu: refactor and removal"

This reverts commit 54373c1.

* [Publisher]Agency Settings: refactor of Settings.tsx and removal of SettingsMenu.tsx (#1272)

* [Publisher]Agency Settings: edit profileDropdownMetadata to replace 'Your Account,' 'Agency Settings,' and 'Team Management' with the option 'Settings'. Added GlobalStyles.tsx

* [Publisher]GlobalStyles.tsx: add license header and 2 component skeletons

* [Publisher]GlobalStyles.tsx: removed extra whitespace characters

* [Publisher]GlobalStyles.tsx: ran yarn lint --fix

* [Publisher]Settings.tsx and SettingsMenu: refactor and removal

* [Publisher] Agency Settings: Settings page + Account Tab (2/5) #1256 (#1308)

* made major changes to the settings page components and all that is connected

* [Publisher][Design Update] Agency Settings: Settings page + Account Tab (2/5)

* ran yarn lint --fix

* manually removed extra space in code on AgencySettings.styles.tsx

* removed unused code from AgencySettingsEmailNotifications and AgencySetting.styles

* Removed all files that are in the .gitignore

* removed TODO notes from AccountSettings.tsx and added suggested styling to GlobalStyles.tsx

* removed unused code, replaced custom colors with colors from the palette, fixed some margin and spacing issues in the Settings.styles, AgencySettings.styles, and AccountSettings.styles files

* removed custom color and used color from palette and adjusted spacing for email reminder input on AgencySettingsEmailNotifications

* created custom components in AgencySettings.Styles to replace divs and spans in the AgencySettingsBasicInfo file

* removed div and added styling to custom component in AgencySettings.styles

* created a AgencySettingActionRequiredIndicator component and applied logic to show display component next to the section labels of AgencySettingsDescription and AgencySettingsUrl

* removed duplicate input component and used an existing one from the common repo and adjusted spacing on severalelements in the AgencySettings sections.

* Added flags to Input.tsx and new styles to Input.styled.tsx

* Removed duplicate button componenet

* used the checkboxOptions component to replace an input checkbox in AgencySettingEmailNotifications

* removed unnecessary styling inheritance and made a meaningful name for CheckboxSpacingWrapper in the AgencySettings.styles, added capitialization to the values in the Sectors sectionin the AgencySettingsBasicInfo file

* simplified logic on AgencySettingsActionRequiredIndicator in the AgencySettingDescription and AgencySettingsURL pages

* changed a variable name

* added settigsViewOptions object in prep for using common tabbed bar component

* added TabbedBar component to Settings page

* removed unused logic on Input.tsx

* removed unused logic on Input.tsx

* added close-icon-lg.svg to the assets folder

* refactored const SettigsViewOptions to use the tabOptions enum in the Settings pg

* removed log statement and removed const declaration from  tabOptions in Settings page

* moved tabOptions enum outside of the Settings function

* modified label on settingViewOptions to remove underscore from Team_Members

* cleaned up logic statement in AgencySettingsSupervisions

* added logic to DescriptionSection in the AgencySettingsEmailNotifications

* modified subpopulations modal by left-aligning options

* removed const systemsToDisplayInReadMode from AgencySettingSupervisons because we no longer need the filtering that the const provided

* renamed the SettingsTitle component -- SettingsTitleContainer and split the font styling between two new components, SettingsTitle and SettingsSubTitle

* updated the 'Learn More' link on the Settings page to point to the set-up-metrics page

* replaced styling to the NewInput component in Input.styled.tsx

* removed unused code in Input component

* updated tabOptions enum on Settings page

* changed variable name on Settings page

* updated initial value of the const currentSettingsView on the Settings page and updated GuideKey to point to AgencySetting

* changed logic for the AgencySettingActionRequiredIndicator to depend on purposeAndFunctionsSetting variable

* [Publisher][Design Update] Agency Settings: Account Tab Modals (excluding Jurisdictions) (3/5) #1257 (#1327)

* made major changes to the settings page components and all that is connected

* [Publisher][Design Update] Agency Settings: Settings page + Account Tab (2/5)

* ran yarn lint --fix

* manually removed extra space in code on AgencySettings.styles.tsx

* removed unused code from AgencySettingsEmailNotifications and AgencySetting.styles

* Removed all files that are in the .gitignore

* removed TODO notes from AccountSettings.tsx and added suggested styling to GlobalStyles.tsx

* removed unused code, replaced custom colors with colors from the palette, fixed some margin and spacing issues in the Settings.styles, AgencySettings.styles, and AccountSettings.styles files

* removed custom color and used color from palette and adjusted spacing for email reminder input on AgencySettingsEmailNotifications

* created custom components in AgencySettings.Styles to replace divs and spans in the AgencySettingsBasicInfo file

* removed div and added styling to custom component in AgencySettings.styles

* created a AgencySettingActionRequiredIndicator component and applied logic to show display component next to the section labels of AgencySettingsDescription and AgencySettingsUrl

* removed duplicate input component and used an existing one from the common repo and adjusted spacing on severalelements in the AgencySettings sections.

* Added flags to Input.tsx and new styles to Input.styled.tsx

* Removed duplicate button componenet

* used the checkboxOptions component to replace an input checkbox in AgencySettingEmailNotifications

* removed unnecessary styling inheritance and made a meaningful name for CheckboxSpacingWrapper in the AgencySettings.styles, added capitialization to the values in the Sectors sectionin the AgencySettingsBasicInfo file

* simplified logic on AgencySettingsActionRequiredIndicator in the AgencySettingDescription and AgencySettingsURL pages

* changed a variable name

* added settigsViewOptions object in prep for using common tabbed bar component

* added TabbedBar component to Settings page

* removed unused logic on Input.tsx

* removed unused logic on Input.tsx

* added close-icon-lg.svg to the assets folder

* refactored const SettigsViewOptions to use the tabOptions enum in the Settings pg

* removed log statement and removed const declaration from  tabOptions in Settings page

* moved tabOptions enum outside of the Settings function

* modified label on settingViewOptions to remove underscore from Team_Members

* cleaned up logic statement in AgencySettingsSupervisions

* added logic to DescriptionSection in the AgencySettingsEmailNotifications

* modified subpopulations modal by left-aligning options

* removed const systemsToDisplayInReadMode from AgencySettingSupervisons because we no longer need the filtering that the const provided

* renamed the SettingsTitle component -- SettingsTitleContainer and split the font styling between two new components, SettingsTitle and SettingsSubTitle

* updated the 'Learn More' link on the Settings page to point to the set-up-metrics page

* replaced styling to the NewInput component in Input.styled.tsx

* removed unused code in Input component

* updated tabOptions enum on Settings page

* changed variable name on Settings page

* updated initial value of the const currentSettingsView on the Settings page and updated GuideKey to point to AgencySetting

* changed logic for the AgencySettingActionRequiredIndicator to depend on purposeAndFunctionsSetting variable

* added onClickClose function option to the Modal component, added the Modal component to AccountSettings

* added email edit modal to the AccountSetting page

* updated Modal and Input to allow custom styling options

* started adding custom styling to Modal and Input that will apply to the Settings page modals

* started adding custom styling to Modal and Input that will apply to the Settings page modals

* added custom styling to AccountSettings Modal and the Modal input

* updated styling for the modal on AgencySettingsDescription

* updated styling on AgencySettingsURL edit modal

* added email validation to AccountSettings page

* added email url validation and styling to the AccountSettings page

* updated the validateAgencyURL logic

* removed unused logic in helperUtils

* ran linting

* added  url validation and styling to the AgencySettings page

* ran linting

* caught bug in validateURL logic that did not meet figma specs for valid or invalid URL

* refactored regex on helpUtils validateAgencyURL function

* refactored validatAgencyURL function's regex

* removed hover styling on button if the logic determines that there should be agencySettingsConfigs

* made adjustments to AccountSettings AccountSettingsDescription and URL according to suggestions in PR #1257

* removed unused logic from Modal.tsx. Adjusted AccountSettings and AgencyDescription modals to not persist invalid email or URL on the UI

* adjusted AccountSettings, AgencySettingsDescription, and AgencySettingURL modal

* removed uneccessary logic from validateEmail function in helperUtils and refactored modal logic in AccountSettings

* updated AgencySettingSupervisions and UnsavedChanges modals according to figma docs

* ran linting

* refactored title and searchbar area of AgencySettingsJurisdictions page

* finished refactoring of searchbar for AgencySettingsJurisdictions page

* finished refactoring of searchbar for AgencySettingsJurisdictions page

* removed opacity setting on Button component

* adjusted the logic in the onClickClose function on the AccountSettings page

* renamed editModeAndTypeUpdate function to resetEditModeTypeStates and moved some of its functionality to a new function called validateUpdateEmailErrorStates on the AccountSettings page

* updated spacing to all agency and account settings modals

* updated validation of URL and Email to check validation on change

* ran linting

* cleaned up logic on AgencySettings pages removed unused code

* fixed bug in AgencySettingURL error checking logic and removed the cancel button from AgencySettingsJurisdictions modal
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants