From 79a32b89b9d41df6cb8f1f96980d2591a5ecb192 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 15 Feb 2019 17:52:52 +0100 Subject: [PATCH] SONARCLOUD-380 Rework modal styling of SC and SQ * Update modal-fields * Update form-fields styling * Update modal-fields usage in extensions * Clean css --- .../server/user/ws/SetSettingAction.java | 2 +- .../server/user/ws/SetSettingActionTest.java | 11 +- .../main/js/app/components/StartupModal.tsx | 1 - .../main/js/app/styles/components/modals.css | 163 ++------- .../src/main/js/app/styles/init/base.css | 4 + .../src/main/js/app/styles/init/forms.css | 29 +- .../src/main/js/app/styles/init/type.css | 6 +- server/sonar-web/src/main/js/app/types.d.ts | 5 +- .../js/apps/account/components/Password.tsx | 8 +- .../components/__tests__/Password-test.tsx} | 19 +- .../__snapshots__/Password-test.tsx.snap | 90 +++++ .../components/ScannerContext.tsx | 2 +- .../components/Stacktrace.tsx | 2 +- .../ScannerContext-test.tsx.snap | 2 +- .../__snapshots__/Stacktrace-test.tsx.snap | 2 +- .../components/ActivationFormModal.tsx | 8 +- .../components/BulkChangeModal.tsx | 12 +- .../components/CustomRuleFormModal.tsx | 303 ++++++++--------- .../components/RuleDetailsCustomRules.tsx | 4 +- .../components/RuleDetailsDescription.tsx | 6 +- .../components/RuleDetailsProfiles.tsx | 2 +- .../__tests__/ActivationFormModal-test.tsx | 38 +++ .../__tests__/BulkChangeModal-test.tsx | 41 +++ .../__tests__/CustomRuleFormModal-test.tsx | 39 +++ .../__tests__/RuleListItem-test.tsx | 18 +- .../ActivationFormModal-test.tsx.snap | 101 ++++++ .../BulkChangeModal-test.tsx.snap | 56 ++++ .../CustomRuleFormModal-test.tsx.snap | 237 ++++++++++++++ .../__snapshots__/RuleListItem-test.tsx.snap | 8 +- .../src/main/js/apps/coding-rules/styles.css | 9 - .../components/UpgradeOrganizationModal.tsx | 4 +- .../UpgradeOrganizationModal-test.tsx.snap | 2 +- .../organization/AutoOrganizationCreate.tsx | 14 +- .../organization/RemoteOrganizationChoose.tsx | 2 +- .../__tests__/AutoOrganizationCreate-test.tsx | 27 +- .../AutoOrganizationCreate-test.tsx.snap | 14 +- .../RemoteOrganizationChoose-test.tsx.snap | 1 + .../organization/__tests__/actions-test.ts | 8 +- .../js/apps/create/organization/actions.ts | 16 +- .../apps/custom-measures/components/Form.tsx | 7 +- .../__snapshots__/Form-test.tsx.snap | 2 + .../apps/custom-metrics/components/Form.tsx | 5 +- .../__snapshots__/Form-test.tsx.snap | 1 + .../main/js/apps/groups/components/Form.tsx | 3 +- .../__snapshots__/Form-test.tsx.snap | 1 + .../issues/components/BulkChangeModal.tsx | 95 +++--- .../BulkChangeModal-test.tsx.snap | 25 +- .../src/main/js/apps/issues/styles.css | 9 + .../organizationMembers/AddMemberForm.tsx | 2 +- .../ManageMemberGroupsForm.tsx | 106 +++--- .../apps/organizationMembers/MembersList.tsx | 11 +- .../organizationMembers/MembersListHeader.tsx | 2 +- .../organizationMembers/MembersListItem.tsx | 43 ++- .../organizationMembers/MembersPageHeader.tsx | 157 ++++----- .../OrganizationMembers.tsx | 27 +- .../organizationMembers/SyncMemberForm.tsx | 121 +++---- .../__tests__/ManageMemberGroupsForm-test.tsx | 36 +- .../__tests__/MembersList-test.tsx | 28 +- .../__tests__/MembersListItem-test.tsx | 81 ++--- .../__tests__/MembersPageHeader-test.tsx | 12 +- .../__tests__/OrganizationMembers-test.tsx | 13 +- .../__tests__/SyncMemberForm-test.tsx | 9 +- .../__snapshots__/AddMemberForm-test.tsx.snap | 2 +- .../ManageMemberGroupsForm-test.tsx.snap | 66 ++-- .../__snapshots__/MembersList-test.tsx.snap | 1 - .../MembersListHeader-test.tsx.snap | 6 +- .../MembersListItem-test.tsx.snap | 80 +++-- .../MembersPageHeader-test.tsx.snap | 55 ++-- .../OrganizationMembers-test.tsx.snap | 13 +- .../SyncMemberForm-test.tsx.snap | 308 +++++++++--------- .../components/OrganizationEdit.tsx | 28 +- .../components/OrganizationEmpty.css | 2 +- .../components/OrganizationEmpty.tsx | 14 +- .../OrganizationEdit-test.tsx.snap | 108 +++--- .../OrganizationEmpty-test.tsx.snap | 28 +- .../permission-templates/components/Form.tsx | 7 +- .../components/__tests__/Form-test.tsx | 30 ++ .../__snapshots__/Form-test.tsx.snap | 12 + .../project/components/ApplyTemplate.tsx | 6 +- .../__tests__/ApplyTemplate-test.tsx | 53 +++ .../__snapshots__/ApplyTemplate-test.tsx.snap | 83 +++++ .../components/forms/AddEventForm.tsx | 3 +- .../components/forms/ChangeEventForm.tsx | 5 +- .../forms/__tests__/AddEventForm-test.tsx | 41 +++ .../forms/__tests__/ChangeEventForm-test.tsx | 35 ++ .../__snapshots__/AddEventForm-test.tsx.snap | 26 ++ .../ChangeEventForm-test.tsx.snap | 26 ++ .../components/RenameBranchModal.tsx | 2 +- .../components/SettingForm.tsx | 6 +- .../RenameBranchModal-test.tsx.snap | 3 + .../__snapshots__/SettingForm-test.tsx.snap | 8 +- .../js/apps/projectLinks/CreationModal.tsx | 6 +- .../__snapshots__/CreationModal-test.tsx.snap | 1 + .../BulkApplyTemplateModal.tsx | 2 +- .../projectsManagement/CreateProjectForm.tsx | 3 +- .../BulkApplyTemplateModal-test.tsx.snap | 8 + .../CreateProjectForm-test.tsx.snap | 9 +- .../components/ConditionModal.tsx | 7 +- .../components/ConditionOperator.tsx | 8 +- .../components/CopyQualityGateForm.tsx | 3 +- .../components/CreateQualityGateForm.tsx | 3 +- .../quality-gates/components/MetricSelect.tsx | 5 +- .../components/RenameQualityGateForm.tsx | 3 +- .../__tests__/ConditionModal-test.tsx | 43 +++ .../__tests__/ConditionOperator-test.tsx | 37 +++ .../__tests__/CopyQualityGateForm-test.tsx} | 19 +- .../__tests__/CreateQualityGateForm-test.tsx | 28 ++ .../__tests__/MetricSelect-test.tsx | 40 +++ .../__tests__/RenameQualityGateForm-test.tsx | 35 ++ .../ConditionModal-test.tsx.snap | 85 +++++ .../ConditionOperator-test.tsx.snap | 26 ++ .../CopyQualityGateForm-test.tsx.snap | 14 + .../CreateQualityGateForm-test.tsx.snap | 8 + .../__snapshots__/MetricSelect-test.tsx.snap | 20 ++ .../RenameQualityGateForm-test.tsx.snap | 37 +++ .../components/CopyProfileForm.tsx | 2 +- .../components/ExtendProfileForm.tsx | 2 +- .../components/RenameProfileForm.tsx | 2 +- .../ExtendProfileForm-test.tsx.snap | 1 + .../details/ChangeParentForm.tsx | 3 +- .../details/ProfilePermissionsForm.tsx | 2 +- .../details/ProfilePermissionsFormSelect.tsx | 8 +- .../ProfilePermissionsForm-test.tsx.snap | 12 +- .../home/CreateProfileForm.tsx | 4 +- .../home/RestoreProfileForm.tsx | 42 +-- .../home/__tests__/CreateProfileForm-test.tsx | 43 +++ .../__tests__/RestoreProfileForm-test.tsx | 28 ++ .../CreateProfileForm-test.tsx.snap | 39 +++ .../RestoreProfileForm-test.tsx.snap | 62 ++++ .../js/apps/settings/components/EmailForm.tsx | 43 +-- .../components/__tests__/EmailForm-test.tsx | 27 ++ .../__snapshots__/EmailForm-test.tsx.snap | 90 +++++ .../settings/encryption/EncryptionForm.tsx | 4 +- .../tutorials/onboarding/OnboardingModal.tsx | 26 +- .../tutorials/onboarding/OnboardingPage.tsx | 1 - .../onboarding/OrganizationsShortList.tsx | 31 +- .../onboarding/OrganizationsShortListItem.tsx | 6 +- .../__tests__/OnboardingModal-test.tsx | 1 - .../__tests__/OrganizationsShortList-test.tsx | 4 +- .../OrganizationsShortListItem-test.tsx | 10 +- .../OnboardingModal-test.tsx.snap | 24 +- .../OrganizationsShortList-test.tsx.snap | 27 +- .../src/main/js/apps/tutorials/styles.css | 44 --- .../js/apps/users/components/PasswordForm.tsx | 2 +- .../js/apps/users/components/TokensForm.tsx | 2 +- .../js/apps/users/components/UserForm.tsx | 2 +- .../users/components/UserScmAccountInput.tsx | 2 +- .../__snapshots__/TokensForm-test.tsx.snap | 4 +- .../webhooks/components/CreateWebhookForm.tsx | 1 + .../CreateWebhookForm-test.tsx.snap | 2 + .../components/MeasuresOverlay.tsx | 2 +- .../MeasuresOverlay-test.tsx.snap | 6 +- .../js/components/common/MarkdownTips.tsx | 9 +- .../main/js/components/controls/Checkbox.tsx | 17 +- .../js/components/controls/ConfirmModal.tsx | 4 +- .../src/main/js/components/controls/Modal.tsx | 19 +- .../src/main/js/components/controls/Radio.tsx | 5 +- .../js/components/controls/SearchSelect.tsx | 3 +- .../components/controls/ValidationModal.tsx | 10 +- .../controls/__tests__/Checkbox-test.tsx | 4 + .../__snapshots__/Checkbox-test.tsx.snap | 9 + .../__snapshots__/Radio-test.tsx.snap | 4 +- .../__snapshots__/SearchSelect-test.tsx.snap | 1 - .../OnboardingAddMembersIcon.tsx | 3 +- .../src/main/js/components/ui/NewInfoBox.tsx | 54 --- .../__snapshots__/NewInfoBox-test.tsx.snap | 44 --- .../src/main/js/components/ui/buttons.css | 26 +- .../src/main/js/components/ui/buttons.tsx | 2 +- .../src/main/js/helpers/testMocks.ts | 118 ++++--- .../resources/org/sonar/l10n/core.properties | 14 +- 170 files changed, 2980 insertions(+), 1596 deletions(-) rename server/sonar-web/src/main/js/{components/ui/NewInfoBox.css => apps/account/components/__tests__/Password-test.tsx} (75%) create mode 100644 server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/ActivationFormModal-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/BulkChangeModal-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/CustomRuleFormModal-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/BulkChangeModal-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/Form-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/permission-templates/components/__tests__/__snapshots__/Form-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/ApplyTemplate-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/AddEventForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/ChangeEventForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/__snapshots__/AddEventForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/__snapshots__/ChangeEventForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionModal-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ConditionOperator-test.tsx rename server/sonar-web/src/main/js/{components/ui/__tests__/NewInfoBox-test.tsx => apps/quality-gates/components/__tests__/CopyQualityGateForm-test.tsx} (67%) create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/CreateQualityGateForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/MetricSelect-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/RenameQualityGateForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionModal-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/ConditionOperator-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/MetricSelect-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/CreateProfileForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/RestoreProfileForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/apps/settings/components/__tests__/EmailForm-test.tsx create mode 100644 server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap create mode 100644 server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap delete mode 100644 server/sonar-web/src/main/js/components/ui/NewInfoBox.tsx delete mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/NewInfoBox-test.tsx.snap diff --git a/server/sonar-server/src/main/java/org/sonar/server/user/ws/SetSettingAction.java b/server/sonar-server/src/main/java/org/sonar/server/user/ws/SetSettingAction.java index 116b2afca93..775b61b0aa6 100644 --- a/server/sonar-server/src/main/java/org/sonar/server/user/ws/SetSettingAction.java +++ b/server/sonar-server/src/main/java/org/sonar/server/user/ws/SetSettingAction.java @@ -57,7 +57,7 @@ public class SetSettingAction implements UsersWsAction { .setRequired(true) .setMaximumLength(100) .setDescription("Setting key") - .setPossibleValues("notifications.optOut", UserUpdater.NOTIFICATIONS_READ_DATE, "organizations.members.dismissSyncNotif"); + .setPossibleValues("notifications.optOut", UserUpdater.NOTIFICATIONS_READ_DATE); action.createParam(PARAM_VALUE) .setRequired(true) diff --git a/server/sonar-server/src/test/java/org/sonar/server/user/ws/SetSettingActionTest.java b/server/sonar-server/src/test/java/org/sonar/server/user/ws/SetSettingActionTest.java index f2175a39a03..6691c1c3695 100644 --- a/server/sonar-server/src/test/java/org/sonar/server/user/ws/SetSettingActionTest.java +++ b/server/sonar-server/src/test/java/org/sonar/server/user/ws/SetSettingActionTest.java @@ -91,17 +91,11 @@ public class SetSettingActionTest { .setParam("value", "true") .execute(); - ws.newRequest() - .setParam("key", "organizations.members.dismissSyncNotif") - .setParam("value", "org1,org2") - .execute(); - assertThat(db.getDbClient().userPropertiesDao().selectByUser(db.getSession(), user)) .extracting(UserPropertyDto::getKey, UserPropertyDto::getValue) .containsExactlyInAnyOrder( tuple("notifications.readDate", "1234"), - tuple("notifications.optOut", "true"), - tuple("organizations.members.dismissSyncNotif", "org1,org2")); + tuple("notifications.optOut", "true")); } @Test @@ -131,8 +125,7 @@ public class SetSettingActionTest { assertThat(definition.param("key").possibleValues()).containsExactlyInAnyOrder( "notifications.optOut", - "notifications.readDate", - "organizations.members.dismissSyncNotif"); + "notifications.readDate"); } } diff --git a/server/sonar-web/src/main/js/app/components/StartupModal.tsx b/server/sonar-web/src/main/js/app/components/StartupModal.tsx index cbc48881b23..1162ec0ad5a 100644 --- a/server/sonar-web/src/main/js/app/components/StartupModal.tsx +++ b/server/sonar-web/src/main/js/app/components/StartupModal.tsx @@ -153,7 +153,6 @@ export class StartupModal extends React.PureComponent { )} diff --git a/server/sonar-web/src/main/js/app/styles/components/modals.css b/server/sonar-web/src/main/js/app/styles/components/modals.css index 370030f2a61..0ded3991928 100644 --- a/server/sonar-web/src/main/js/app/styles/components/modals.css +++ b/server/sonar-web/src/main/js/app/styles/components/modals.css @@ -28,9 +28,6 @@ background-color: #fff; opacity: 0; transition: all 0.2s ease; -} - -.modal.sonarcloud { border-radius: 3px; } @@ -45,6 +42,11 @@ opacity: 1; } +.modal-small { + width: 450px; + margin-left: -225px; +} + .modal-medium { width: 830px; margin-left: -415px; @@ -86,116 +88,57 @@ margin-right: var(--sbw); } -.modal-container { - max-height: 60vh; - padding: 10px; - box-sizing: border-box; - overflow: auto; -} - -.modal.sonarcloud .modal-container { - border-top: 1px solid var(--barBorderColor); - margin-top: var(--pagePadding); -} - -.modal.sonarcloud .modal-container > :last-child { - margin-bottom: var(--pagePadding); -} - .modal-head { - padding: 0 10px; - background-color: var(--gray94); - border-bottom: 1px solid var(--disableGrayBorder); -} - -.modal.sonarcloud .modal-head { - background-color: transparent; - border-bottom: none; - padding: var(--pagePadding) calc(2 * var(--pagePadding)) 0; + padding: calc(4 * var(--gridSize)); + padding-bottom: 0; } .modal-head h1, .modal-head h2 { - line-height: 30px; - min-height: 30px; -} - -.modal.sonarcloud .modal-head h1, -.modal.sonarcloud .modal-head h2 { - margin-top: var(--gridSize); + margin: 0; font-size: var(--bigFontSize); font-weight: bold; - line-height: 30px; + line-height: normal; } .modal-body { - padding: 10px; + padding: var(--pagePadding) calc(4 * var(--gridSize)); } -.modal.sonarcloud .modal-body { - padding: var(--pagePadding) calc(2 * var(--pagePadding)); +.modal-container { + max-height: 60vh; + box-sizing: border-box; + overflow-y: scroll; + border-top: 1px solid var(--barBorderColor); + margin-top: var(--pagePadding); + padding-right: calc(4 * var(--gridSize) - var(--sbw)); +} + +.modal-container > :last-child { + margin-bottom: var(--pagePadding); } .modal-field, -.modal-large-field, .modal-validation-field { clear: both; display: block; - padding: 5px 0 5px 130px; -} - -.modal-large-field { - padding: 20px 40px; -} - -.modal-validation-field { - padding: 3px 0 3px 130px; + padding: 0; + margin-bottom: calc(var(--gridSize) * 2); } .modal-field label, .modal-validation-field label { - position: relative; - left: -140px; display: block; - float: left; - width: 120px; - margin-right: -130px; - padding-top: 5px; - padding-bottom: 2px; - padding-left: 10px; - line-height: 1; - text-align: right; - overflow: hidden; - text-overflow: ellipsis; -} - -.modal-large-field label { - display: inline-block; - padding-bottom: 15px; font-weight: bold; -} - -.modal-field .note { - line-height: var(--controlHeight); -} - -.readonly-field { - padding-top: 5px; - margin-left: -5px; - line-height: 1; + padding-bottom: calc(var(--gridSize) / 2); } .modal-field a.icon-checkbox, .modal-field input, -.modal-large-field input, .modal-field select, -.modal-large-field select, .modal-field textarea, -.modal-large-field textarea, -.modal-field .Select, -.modal-large-field .Select { +.modal-field .Select { margin-right: 5px; - margin-bottom: 10px; } .modal-field a.icon-checkbox { @@ -203,15 +146,12 @@ } .modal-field input[type='radio'], -.modal-large-field input[type='radio'], -.modal-field input[type='checkbox'], -.modal-large-field input[type='checkbox'] { +.modal-field input[type='checkbox'] { margin-top: 5px; margin-bottom: 4px; } -.modal-field > .icon-checkbox, -.modal-large-field > .icon-checkbox { +.modal-field > .icon-checkbox { padding-top: 6px; padding-right: 8px; } @@ -222,77 +162,44 @@ .modal-field textarea, .modal-field select, .modal-field .Select { - width: 250px; -} - -.modal-field textarea { - max-width: 250px; - min-width: 250px; - max-height: 50vh; - min-height: var(--controlHeight); -} - -.modal-large-field input[type='text'], -.modal-large-field input[type='email'], -.modal-large-field input[type='password'], -.modal-large-field textarea, -.modal-large-field select, -.modal-large-field .Select { width: 100%; } -.modal-large-field textarea { - max-width: 100%; - min-width: 100%; - max-height: 50vh; - min-height: var(--controlHeight); -} - .modal-validation-field input, .modal-validation-field textarea, .modal-validation-field .Select { - margin-right: 5px; + margin-right: var(--gridSize); margin-bottom: 2px; - width: 250px; + width: calc(100% - 3 * var(--gridSize)); } +.modal-field textarea, .modal-validation-field textarea { - max-width: 250px; - min-width: 250px; + max-width: 100%; + min-width: 100%; max-height: 50vh; min-height: var(--controlHeight); } - .modal-validation-field input:not(.is-invalid), .modal-validation-field .Select:not(.is-invalid) { - margin-bottom: 18px; + margin-bottom: calc(var(--tinyControlHeight) + 2px); } .modal-field-description { - padding-bottom: 4px; line-height: 1.4; color: var(--secondFontColor); font-size: var(--smallFontSize); overflow: hidden; text-overflow: ellipsis; -} - -.modal-validation-field .modal-field-description { margin-top: 2px; } .modal-foot { - padding: 10px; - border-top: 1px solid var(--disableGrayBorder); - background-color: var(--gray94); - text-align: right; -} - -.modal.sonarcloud .modal-foot { - padding: var(--pagePadding); + padding: var(--pagePadding) calc(4 * var(--gridSize)); border-top: 1px solid var(--barBorderColor); background-color: var(--barBackgroundColor); border-radius: 3px; + text-align: right; } .modal-foot button, diff --git a/server/sonar-web/src/main/js/app/styles/init/base.css b/server/sonar-web/src/main/js/app/styles/init/base.css index 67eefb1de61..af8916a1839 100644 --- a/server/sonar-web/src/main/js/app/styles/init/base.css +++ b/server/sonar-web/src/main/js/app/styles/init/base.css @@ -81,6 +81,10 @@ textarea { font-family: inherit; } +textarea { + min-height: 40px; +} + /*Remove button padding in FF*/ select::-moz-focus-inner, input::-moz-focus-inner, diff --git a/server/sonar-web/src/main/js/app/styles/init/forms.css b/server/sonar-web/src/main/js/app/styles/init/forms.css index e270290c3a5..3a820fe2894 100644 --- a/server/sonar-web/src/main/js/app/styles/init/forms.css +++ b/server/sonar-web/src/main/js/app/styles/init/forms.css @@ -160,16 +160,11 @@ select { } .input-super-large { - width: 100%; + width: 100% !important; max-width: 300px; min-width: 200px; } -textarea.input-super-large { - max-width: 600px; - min-width: 300px; -} - .input-ghost { padding: 0 !important; border: none !important; @@ -193,13 +188,31 @@ em.mandatory { .form-field { clear: both; display: block; - padding-top: var(--gridSize); padding-bottom: calc(2 * var(--gridSize)); } .form-field label { display: block; - padding-bottom: var(--gridSize); + font-weight: bold; + padding-bottom: calc(var(--gridSize) / 2); +} + +.form-field-description { + line-height: 1.4; + color: var(--secondFontColor); + font-size: var(--smallFontSize); + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; +} + +.form-field input[type='text'], +.form-field input[type='email'], +.form-field input[type='password'], +.form-field textarea, +.form-field select, +.form-field .Select { + width: 250px; } .radio-toggle { diff --git a/server/sonar-web/src/main/js/app/styles/init/type.css b/server/sonar-web/src/main/js/app/styles/init/type.css index 2b056a346b4..36046303c59 100644 --- a/server/sonar-web/src/main/js/app/styles/init/type.css +++ b/server/sonar-web/src/main/js/app/styles/init/type.css @@ -168,6 +168,10 @@ small, font-size: var(--smallFontSize); } +.medium { + font-size: var(--mediumFontSize); +} + .big { font-size: var(--bigFontSize); } @@ -255,7 +259,7 @@ small, } .text-normal { - font-weight: normal; + font-weight: normal !important; } .text-muted { diff --git a/server/sonar-web/src/main/js/app/types.d.ts b/server/sonar-web/src/main/js/app/types.d.ts index 45d8d3e0dc2..f412c82962d 100644 --- a/server/sonar-web/src/main/js/app/types.d.ts +++ b/server/sonar-web/src/main/js/app/types.d.ts @@ -216,10 +216,7 @@ declare namespace T { value: string; } - type CurrentUserSettingNames = - | 'notifications.optOut' - | 'notifications.readDate' - | 'organizations.members.dismissSyncNotif'; + type CurrentUserSettingNames = 'notifications.optOut' | 'notifications.readDate'; export interface CustomMeasure { createdAt?: string; diff --git a/server/sonar-web/src/main/js/apps/account/components/Password.tsx b/server/sonar-web/src/main/js/apps/account/components/Password.tsx index fa681a26ec8..66e2aa43986 100644 --- a/server/sonar-web/src/main/js/apps/account/components/Password.tsx +++ b/server/sonar-web/src/main/js/apps/account/components/Password.tsx @@ -87,7 +87,7 @@ export default class Password extends React.Component { ))} -
+
-
+
-
+
-
+
{translate('my_profile.password.submit')} diff --git a/server/sonar-web/src/main/js/components/ui/NewInfoBox.css b/server/sonar-web/src/main/js/apps/account/components/__tests__/Password-test.tsx similarity index 75% rename from server/sonar-web/src/main/js/components/ui/NewInfoBox.css rename to server/sonar-web/src/main/js/apps/account/components/__tests__/Password-test.tsx index 0c8b0ca2a20..2b5900be381 100644 --- a/server/sonar-web/src/main/js/components/ui/NewInfoBox.css +++ b/server/sonar-web/src/main/js/apps/account/components/__tests__/Password-test.tsx @@ -17,16 +17,11 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -.new-info-box { - display: flex; - padding: var(--gridSize); - background-color: var(--veryLightBlue); - border: 1px solid var(--alertBorderInfo); - border-radius: 2px; -} +import * as React from 'react'; +import { shallow } from 'enzyme'; +import Password from '../Password'; +import { mockCurrentUser } from '../../../../helpers/testMocks'; -.new-info-box-header { - display: flex; - justify-content: space-between; - align-items: center; -} +it('renders correctly', () => { + expect(shallow()).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap new file mode 100644 index 00000000000..e16485c7246 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap @@ -0,0 +1,90 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+

+ my_profile.password.title +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + my_profile.password.submit + +
+
+
+`; diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/ScannerContext.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/ScannerContext.tsx index a4fe42e1914..72c73262ce1 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/ScannerContext.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/ScannerContext.tsx @@ -62,7 +62,7 @@ export default class ScannerContext extends React.PureComponent { const { scannerContext } = this.state; return ( - +

{translate('background_tasks.scanner_context')} diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Stacktrace.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Stacktrace.tsx index 1d8e2735f25..9ac1066d96f 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Stacktrace.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Stacktrace.tsx @@ -70,7 +70,7 @@ export default class Stacktrace extends React.PureComponent { const { loading, stacktrace } = this.state; return ( - +

{translate('background_tasks.error_stacktrace')} diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/ScannerContext-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/ScannerContext-test.tsx.snap index dc47f7e97c5..4515f08bff8 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/ScannerContext-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/ScannerContext-test.tsx.snap @@ -3,8 +3,8 @@ exports[`renders 1`] = `
void; onDone: (severity: string) => Promise; organization: string | undefined; - profiles: BaseProfile[]; + profiles: Profile[]; rule: T.Rule | T.RuleDetails; } @@ -153,7 +153,7 @@ export default class ActivationFormModal extends React.PureComponent +

{this.props.modalHeader}

@@ -206,7 +206,6 @@ export default class ActivationFormModal extends React.PureComponent{param.key} {param.type === 'TEXT' ? (