]> source.dussan.org Git - sonarqube.git/commitdiff
wrap react-modal and react-select in own components (#2759)
authorStas Vilchik <stas.vilchik@sonarsource.com>
Thu, 26 Oct 2017 20:44:08 +0000 (22:44 +0200)
committerStas Vilchik <stas.vilchik@sonarsource.com>
Mon, 30 Oct 2017 08:20:37 +0000 (09:20 +0100)
105 files changed:
server/sonar-web/src/main/js/app/components/help/GlobalHelp.js
server/sonar-web/src/main/js/app/components/help/__tests__/__snapshots__/GlobalHelp-test.js.snap
server/sonar-web/src/main/js/app/styles/components/react-select.css [deleted file]
server/sonar-web/src/main/js/app/styles/sonar.css
server/sonar-web/src/main/js/app/utils/exposeLibraries.js
server/sonar-web/src/main/js/apps/account/notifications/Projects.js
server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
server/sonar-web/src/main/js/apps/account/organizations/CreateOrganizationForm.js
server/sonar-web/src/main/js/apps/background-tasks/components/ScannerContext.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/Stacktrace.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.js
server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.js
server/sonar-web/src/main/js/apps/background-tasks/components/WorkersForm.tsx
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/ScannerContext-test.tsx.snap
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Stacktrace-test.tsx.snap
server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/WorkersForm-test.tsx.snap
server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.js
server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/MeasureViewSelect-test.js.snap
server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
server/sonar-web/src/main/js/apps/issues/sidebar/LanguageFacetFooter.js
server/sonar-web/src/main/js/apps/marketplace/components/LicenseEditionForm.tsx
server/sonar-web/src/main/js/apps/marketplace/components/UninstallEditionForm.tsx
server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/LicenseEditionForm-test.tsx.snap
server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/UninstallEditionForm-test.tsx.snap
server/sonar-web/src/main/js/apps/organizations/components/OrganizationDelete.js
server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/OrganizationDelete-test.js.snap
server/sonar-web/src/main/js/apps/organizations/components/forms/AddMemberForm.js
server/sonar-web/src/main/js/apps/organizations/components/forms/ManageMemberGroupsForm.js
server/sonar-web/src/main/js/apps/organizations/components/forms/RemoveMemberForm.js
server/sonar-web/src/main/js/apps/organizations/components/forms/__tests__/__snapshots__/AddMemberForm-test.js.snap
server/sonar-web/src/main/js/apps/organizations/components/forms/__tests__/__snapshots__/ManageMemberGroupsForm-test.js.snap
server/sonar-web/src/main/js/apps/organizations/components/forms/__tests__/__snapshots__/RemoveMemberForm-test.js.snap
server/sonar-web/src/main/js/apps/permissions/project/components/PublicProjectDisclaimer.js
server/sonar-web/src/main/js/apps/project-admin/deletion/Form.js
server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphsHeader.js
server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js
server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityPageHeader-test.js.snap
server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddEventForm.js
server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddGraphMetric.js
server/sonar-web/src/main/js/apps/projectActivity/components/forms/ChangeEventForm.js
server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveAnalysisForm.js
server/sonar-web/src/main/js/apps/projectActivity/components/forms/RemoveEventForm.js
server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx
server/sonar-web/src/main/js/apps/projectBranches/components/LeakPeriodForm.tsx
server/sonar-web/src/main/js/apps/projectBranches/components/LongBranchesPatternForm.tsx
server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/DeleteBranchModal-test.tsx.snap
server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/LongBranchesPatternForm-test.tsx.snap
server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap
server/sonar-web/src/main/js/apps/projectQualityGate/Form.tsx
server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/__snapshots__/Form-test.tsx.snap
server/sonar-web/src/main/js/apps/projectQualityProfiles/ProfileRow.tsx
server/sonar-web/src/main/js/apps/projectQualityProfiles/__tests__/__snapshots__/ProfileRow-test.tsx.snap
server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx
server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PerspectiveSelect-test.tsx.snap
server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsSortingSelect-test.tsx.snap
server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx
server/sonar-web/src/main/js/apps/projectsManagement/ChangeVisibilityForm.tsx
server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
server/sonar-web/src/main/js/apps/projectsManagement/DeleteModal.tsx
server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap
server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ChangeVisibilityForm-test.tsx.snap
server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/DeleteModal-test.tsx.snap
server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
server/sonar-web/src/main/js/apps/quality-gates/components/AddConditionForm.js
server/sonar-web/src/main/js/apps/quality-gates/components/Condition.js
server/sonar-web/src/main/js/apps/quality-gates/components/ThresholdInput.js
server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/ThresholdInput-test.js
server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/components/DeleteProfileForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsForm-test.tsx.snap
server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ProfilePermissionsFormSelect-test.tsx.snap
server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx
server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.js
server/sonar-web/src/main/js/apps/settings/components/inputs/__tests__/InputForSingleSelectList-test.js
server/sonar-web/src/main/js/apps/system/components/ChangeLogLevelForm.tsx
server/sonar-web/src/main/js/apps/system/components/__tests__/__snapshots__/ChangeLogLevelForm-test.tsx.snap
server/sonar-web/src/main/js/apps/system/components/system-upgrade/SystemUpgradeForm.tsx
server/sonar-web/src/main/js/apps/system/components/system-upgrade/__tests__/__snapshots__/SystemUpgradeForm-test.tsx.snap
server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.js
server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationStep.js
server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationStep-test.js
server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap [new file with mode: 0644]
server/sonar-web/src/main/js/apps/users/components/UsersSelectSearch.js
server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearch-test.js.snap
server/sonar-web/src/main/js/components/common/RestartForm.tsx
server/sonar-web/src/main/js/components/controls/Modal.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/components/controls/SearchSelect.js
server/sonar-web/src/main/js/components/controls/Select.tsx [new file with mode: 0644]
server/sonar-web/src/main/js/components/controls/SimpleModal.tsx
server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SearchSelect-test.js.snap
server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SimpleModal-test.tsx.snap
server/sonar-web/src/main/js/components/controls/react-select.css [new file with mode: 0644]

index 43f4616f8b83ca5825b211d092f87587ce84e3d9..e6c60c0e8bff476b8ef0ee7e675ae2229ed68a0b 100644 (file)
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
 import classNames from 'classnames';
 import LinksHelp from './LinksHelp';
 import LinksHelpSonarCloud from './LinksHelpSonarCloud';
 import ShortcutsHelp from './ShortcutsHelp';
 import TutorialsHelp from './TutorialsHelp';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -97,12 +97,7 @@ export default class GlobalHelp extends React.PureComponent {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={translate('help')}
-        className="modal modal-medium"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={translate('help')} medium={true} onRequestClose={this.props.onClose}>
         <div className="modal-head">
           <h2>{translate('help')}</h2>
         </div>
index 5aaa41aa5f87a52b5df8feb33a6dbd49f559b415..eaaccb8f0a1d2b62df089c1c5ed220a0c232e604 100644 (file)
@@ -2,19 +2,9 @@
 
 exports[`does not show tutorials for anonymous 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal modal-medium"
-  closeTimeoutMS={0}
   contentLabel="help"
-  isOpen={true}
+  medium={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div
     className="modal-head"
diff --git a/server/sonar-web/src/main/js/app/styles/components/react-select.css b/server/sonar-web/src/main/js/app/styles/components/react-select.css
deleted file mode 100644 (file)
index 3d3816e..0000000
+++ /dev/null
@@ -1,459 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-.Select {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  font-size: var(--smallFontSize);
-  text-align: left;
-}
-
-.Select,
-.Select div,
-.Select input,
-.Select span {
-  box-sizing: border-box;
-}
-
-.Select.is-disabled > .Select-control {
-  background-color: #f9f9f9;
-}
-
-.Select.is-disabled > .Select-control:hover {
-  box-shadow: none;
-}
-
-.Select.is-disabled .Select-arrow-zone {
-  cursor: default;
-  pointer-events: none;
-}
-
-.Select-control {
-  position: relative;
-  display: table;
-  width: 100%;
-  height: var(--controlHeight);
-  border: 1px solid var(--gray80);
-  border-collapse: separate;
-  border-radius: 2px;
-  background-color: #fff;
-  color: var(--baseFontColor);
-  cursor: default;
-  outline: none;
-  overflow: hidden;
-}
-
-.is-searchable.is-open > .Select-control {
-  cursor: text;
-}
-
-.is-open > .Select-control {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  background: #fff;
-}
-
-.is-open > .Select-control > .Select-arrow {
-  border-color: transparent transparent #999;
-  border-width: 0 5px 5px;
-}
-
-.is-searchable.is-focused:not(.is-open) > .Select-control {
-  cursor: text;
-}
-
-.is-focused:not(.is-open) > .Select-control {
-  border-color: var(--blue);
-}
-
-.Select-placeholder,
-:not(.Select--multi) > .Select-control .Select-value {
-  bottom: 0;
-  left: 0;
-  line-height: 23px;
-  padding-left: 8px;
-  padding-right: 24px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.Select-value svg,
-.Select-value [class^='icon-'] {
-  padding-top: 5px;
-}
-
-.Select-value img {
-  padding-top: 3px;
-}
-
-.Select-option svg,
-.Select-option img,
-.Select-option [class^='icon-'] {
-  padding-top: 2px;
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  .Select-value-label {
-  color: var(--baseFontColor);
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label:hover,
-.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus,
-.has-value.is-pseudo-focused:not(.Select--multi)
-  > .Select-control
-  > .Select-value
-  a.Select-value-label:focus {
-  color: #007eff;
-  outline: none;
-  text-decoration: underline;
-}
-
-.Select-input {
-  vertical-align: top;
-  height: 22px;
-  padding-left: 8px;
-  padding-right: 8px;
-  outline: none;
-}
-
-.Select-input > input {
-  background: none transparent;
-  border: 0 none;
-  cursor: default;
-  display: inline-block;
-  font-family: inherit;
-  font-size: var(--smallFontSize);
-  height: 22px;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  -webkit-appearance: none;
-}
-
-.is-focused .Select-input > input {
-  cursor: text;
-}
-
-.has-value.is-pseudo-focused .Select-input {
-  opacity: 0;
-}
-
-.Select-control:not(.is-searchable) > .Select-input {
-  outline: none;
-}
-
-.Select-loading-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 16px;
-}
-
-.Select-loading {
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  animation: Select-animation-spin 400ms infinite linear;
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  border: 2px solid #ccc;
-  border-right-color: var(--baseFontColor);
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-
-.Select-clear-zone {
-  -webkit-animation: Select-animation-fadeIn 200ms;
-  -o-animation: Select-animation-fadeIn 200ms;
-  animation: Select-animation-fadeIn 200ms;
-  color: #999;
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 9px;
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.Select-clear-zone:hover .Select-clear {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDIzMSwyMCw1Nik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgIDwvZz48L3N2Zz4=);
-}
-
-.Select-clear {
-  display: block;
-  width: 9px;
-  height: 9px;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDE1MywxNTMsMTUzKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4gICAgPC9nPjwvc3ZnPg==);
-  background-size: 9px 9px;
-  text-indent: -9999px;
-}
-
-.Select--multi .Select-clear-zone {
-  width: 17px;
-}
-
-.Select-arrow-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 20px;
-  padding-right: 5px;
-}
-
-.Select-arrow {
-  border-color: #999 transparent transparent;
-  border-style: solid;
-  border-width: 4px 4px 2px;
-  display: inline-block;
-  height: 0;
-  width: 0;
-}
-
-.is-open .Select-arrow,
-.Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: #666;
-}
-
-@-webkit-keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.Select-menu-outer {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-top-color: var(--barBorderColor);
-  box-sizing: border-box;
-  margin-top: -1px;
-  max-height: 200px;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: var(--dropdownMenuZIndex);
-  -webkit-overflow-scrolling: touch;
-  box-shadow: var(--defaultShadow);
-}
-
-.Select-menu {
-  max-height: 198px;
-  padding: 5px 0;
-  overflow-y: auto;
-}
-
-.Select-option {
-  display: block;
-  line-height: 20px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  color: var(--baseFontColor);
-  font-size: var(--smallFontSize);
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.Select-option:last-child {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.Select-option.is-focused {
-  background-color: var(--barBackgroundColor);
-}
-
-.Select-option.is-disabled {
-  font-weight: 600;
-  cursor: default;
-}
-
-.Select-noresults {
-  box-sizing: border-box;
-  color: #999;
-  cursor: default;
-  display: block;
-  padding: 8px 10px;
-}
-
-.Select--multi .Select-value {
-  background-color: rgba(0, 126, 255, 0.08);
-  border-radius: 2px;
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  color: var(--baseFontColor);
-  display: inline-block;
-  font-size: var(--smallFontSize);
-  line-height: 14px;
-  margin: 1px 4px 1px 1px;
-  vertical-align: top;
-}
-
-.Select-value-label {
-  font-size: var(--smallFontSize);
-}
-
-.is-searchable.is-open .Select-value-label {
-  opacity: 0.5;
-}
-
-.Select-big .Select-control {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.Select-big .Select-placeholder {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.Select-big .Select-value-label {
-  display: inline-block;
-  margin-top: 7px;
-  line-height: 16px;
-}
-
-.Select-big .Select-option {
-  padding: 7px 8px;
-  line-height: 16px;
-}
-
-.Select-big img,
-.Select-big svg {
-  padding-top: 0;
-}
-
-.Select--multi .Select-value-icon,
-.Select--multi .Select-value-label {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.Select--multi .Select-value-label {
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  cursor: default;
-  padding: 2px 5px;
-}
-
-.Select--multi a.Select-value-label {
-  color: #007eff;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.Select--multi a.Select-value-label:hover {
-  text-decoration: underline;
-}
-
-.Select--multi .Select-value-icon {
-  cursor: pointer;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-right: 1px solid rgba(0, 126, 255, 0.24);
-  padding: 1px 5px 3px;
-}
-
-.Select--multi .Select-value-icon:hover,
-.Select--multi .Select-value-icon:focus {
-  background-color: rgba(0, 113, 230, 0.08);
-  color: #0071e6;
-}
-
-.Select--multi .Select-value-icon:active {
-  background-color: rgba(0, 126, 255, 0.24);
-}
-
-.Select--multi.is-disabled .Select-value {
-  background-color: #fcfcfc;
-  border: 1px solid #e3e3e3;
-  color: var(--baseFontColor);
-}
-
-.Select--multi.is-disabled .Select-value-icon {
-  cursor: not-allowed;
-  border-right: 1px solid #e3e3e3;
-}
-
-.Select--multi.is-disabled .Select-value-icon:hover,
-.Select--multi.is-disabled .Select-value-icon:focus,
-.Select--multi.is-disabled .Select-value-icon:active {
-  background-color: #fcfcfc;
-}
-
-.Select-aria-only {
-  display: none;
-}
-
-@keyframes Select-animation-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-  }
-}
index 8d10dc96ca1fe56d5cb5c7ed91ba8a6e7376bd6c..bccf053cfe775f90ef19afb6717ebfa0cc63d5d7 100644 (file)
@@ -48,7 +48,6 @@
 @import './components/badges.css';
 @import './components/columns.css';
 @import './components/search.css';
-@import './components/react-select.css';
 @import './components/side-tabs.css';
 @import './components/boxed-group.css';
 
index b1c1238c9a63db8515ae2a224a4527232b2638f8..cc6b71226b44dddd1d804a2ab2efdcc8b0fa8747 100644 (file)
@@ -19,8 +19,6 @@
  */
 import * as ReactRedux from 'react-redux';
 import * as ReactRouter from 'react-router';
-import Select from 'react-select';
-import Modal from 'react-modal';
 import throwGlobalError from './throwGlobalError';
 import * as measures from '../../helpers/measures';
 import * as request from '../../helpers/request';
@@ -31,6 +29,8 @@ import DateTimeFormatter from '../../components/intl/DateTimeFormatter';
 import FavoriteContainer from '../../components/controls/FavoriteContainer';
 import LicenseEditionSet from '../../apps/marketplace/components/LicenseEditionSet';
 import ListFooter from '../../components/controls/ListFooter';
+import Modal from '../../components/controls/Modal';
+import Select from '../../components/controls/Select';
 import Tooltip from '../../components/controls/Tooltip';
 import ModalForm from '../../components/common/modal-form';
 import SelectList from '../../components/SelectList';
index d7d9df33ed7f2015ad63de8924f05f3c592c69f1..c55e6c8aaa0cf7c967705eabf51051c67e6d2c12 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import Select from 'react-select';
 import { connect } from 'react-redux';
 import { differenceBy } from 'lodash';
 import ProjectNotifications from './ProjectNotifications';
+import Select, { AsyncSelect } from '../../../components/controls/Select';
 import Organization from '../../../components/shared/Organization';
 import { translate } from '../../../helpers/l10n';
 import { getSuggestions } from '../../../api/components';
@@ -126,7 +126,7 @@ class Projects extends React.PureComponent {
           <span className="text-middle spacer-right">
             {translate('my_account.set_notifications_for')}:
           </span>
-          <Select.Async
+          <AsyncSelect
             autoload={false}
             cache={false}
             name="new_project"
index ed54ae19c4daf9d9f0ead37a0c1f1ac856404c83..3d6b8b28eb1fa039f23b5628163e034a7cc3355f 100644 (file)
@@ -34,20 +34,15 @@ exports[`should render projects 1`] = `
       my_account.set_notifications_for
       :
     </span>
-    <Async
+    <AsyncSelect
       autoload={false}
       cache={false}
-      ignoreAccents={true}
-      ignoreCase={true}
       loadOptions={[Function]}
-      loadingPlaceholder="Loading..."
       minimumInput={2}
       name="new_project"
       onChange={[Function]}
       optionRenderer={[Function]}
-      options={Array []}
       placeholder="my_account.search_project"
-      searchPromptText="Type to search"
       style={
         Object {
           "width": "300px",
@@ -101,20 +96,15 @@ exports[`should render projects 2`] = `
       my_account.set_notifications_for
       :
     </span>
-    <Async
+    <AsyncSelect
       autoload={false}
       cache={false}
-      ignoreAccents={true}
-      ignoreCase={true}
       loadOptions={[Function]}
-      loadingPlaceholder="Loading..."
       minimumInput={2}
       name="new_project"
       onChange={[Function]}
       optionRenderer={[Function]}
-      options={Array []}
       placeholder="my_account.search_project"
-      searchPromptText="Type to search"
       style={
         Object {
           "width": "300px",
@@ -168,20 +158,15 @@ exports[`should render projects 3`] = `
       my_account.set_notifications_for
       :
     </span>
-    <Async
+    <AsyncSelect
       autoload={false}
       cache={false}
-      ignoreAccents={true}
-      ignoreCase={true}
       loadOptions={[Function]}
-      loadingPlaceholder="Loading..."
       minimumInput={2}
       name="new_project"
       onChange={[Function]}
       optionRenderer={[Function]}
-      options={Array []}
       placeholder="my_account.search_project"
-      searchPromptText="Type to search"
       style={
         Object {
           "width": "300px",
index 03da57ec199e137c973177e7a7449c1b2c6a45f9..bd6b0c854fa0994e1408ed99878b6b9393424df2 100644 (file)
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
 import { debounce } from 'lodash';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 import { createOrganization } from '../../organizations/actions';
 
@@ -119,12 +119,7 @@ class CreateOrganizationForm extends React.PureComponent {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('my_account.create_organization')}</h2>
         </header>
index 1e01f0ce5a231f7c7803bce3645f94bbe8fe5d82..b8598a02362f81c3c5f61bb6779033b5a559e76b 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { getTask } from '../../../api/ce';
 import { translate } from '../../../helpers/l10n';
 import { Task } from '../types';
+import Modal from '../../../components/controls/Modal';
 
 interface Props {
   onClose: () => void;
@@ -63,12 +63,7 @@ export default class ScannerContext extends React.PureComponent<Props, State> {
     const { scannerContext } = this.state;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="scanner context"
-        className="modal modal-large"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="scanner context" large={true} onRequestClose={this.props.onClose}>
         <div className="modal-head">
           <h2>
             {translate('background_tasks.scanner_context')}
index 56c5a82e0da3056a21a405c71933ea7e89b7ada6..0c450bf02dc12b1f7ae25c674d3cc4f1e6ce3dd6 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { getTask } from '../../../api/ce';
 import { translate } from '../../../helpers/l10n';
+import Modal from '../../../components/controls/Modal';
 import { Task } from '../types';
 
 interface Props {
@@ -64,12 +64,7 @@ export default class Stacktrace extends React.PureComponent<Props, State> {
     const { loading, stacktrace } = this.state;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="stacktrace"
-        className="modal modal-large"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="stacktrace" large={true} onRequestClose={this.props.onClose}>
         <div className="modal-head">
           <h2>
             {translate('background_tasks.error_stacktrace')}
index 602e9c7e3d3167c0d044d332e648d88e75f6caf7..c3cecdbbf80c79daff265fa0c0834768ebdfa6b3 100644 (file)
@@ -19,8 +19,8 @@
  */
 /* @flow */
 import React from 'react';
-import Select from 'react-select';
 import { STATUSES } from '../constants';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 const StatusFilter = ({ value, onChange } /*: { value: ?string, onChange: Function } */) => {
index 44add2f88698e70b94db3049585abceb6c362882..4d8377d8cdf022bb880e8de5144d1d1ba594b027 100644 (file)
@@ -19,8 +19,8 @@
  */
 /* @flow */
 import React from 'react';
-import Select from 'react-select';
 import { ALL_TYPES } from '../constants';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 const TypesFilter = (
index b0849315a4e3c4481d1851fc2abd685c9cac10ae..7b2d2821a1b97c7d39e0c20ca71ae2967c3f840a 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
-import Select from 'react-select';
 import { times } from 'lodash';
 import { setWorkerCount } from '../../../api/ce';
+import Modal from '../../../components/controls/Modal';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 const MAX_WORKERS = 10;
@@ -83,10 +83,7 @@ export default class WorkersForm extends React.PureComponent<Props, State> {
 
     return (
       <Modal
-        isOpen={true}
         contentLabel={translate('background_tasks.change_number_of_workers')}
-        className="modal"
-        overlayClassName="modal-overlay"
         onRequestClose={this.handleClose}>
         <header className="modal-head">
           <h2>{translate('background_tasks.change_number_of_workers')}</h2>
index d456c84d89ec6f0ffb10e747364f98f65545fdf2..8aac352340c4cc5e8c14f7468214b29b08e3ced6 100644 (file)
@@ -2,19 +2,9 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal modal-large"
-  closeTimeoutMS={0}
   contentLabel="scanner context"
-  isOpen={true}
+  large={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div
     className="modal-head"
index 77022e03f216cbe8f865950f06f0ff9620637075..5e3d7a5a25fe9e29395b5cf35ed4782f34802372 100644 (file)
@@ -2,19 +2,9 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal modal-large"
-  closeTimeoutMS={0}
   contentLabel="stacktrace"
-  isOpen={true}
+  large={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div
     className="modal-head"
index 379c4e1d9b17be9b5d83e0ea45a9135d41b08062..4b9dfd60686e0229a54e89166892c19b52607222 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`changes select 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="background_tasks.change_number_of_workers"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -30,40 +19,9 @@ exports[`changes select 1`] = `
       className="modal-body"
     >
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
         className="input-tiny spacer-top"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
-        disabled={false}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -108,16 +66,8 @@ exports[`changes select 1`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value={1}
-        valueComponent={[Function]}
-        valueKey="value"
       />
       <div
         className="big-spacer-top alert alert-success markdown"
@@ -150,19 +100,8 @@ exports[`changes select 1`] = `
 
 exports[`changes select 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="background_tasks.change_number_of_workers"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -178,40 +117,9 @@ exports[`changes select 2`] = `
       className="modal-body"
     >
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
         className="input-tiny spacer-top"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
-        disabled={false}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -256,16 +164,8 @@ exports[`changes select 2`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value={7}
-        valueComponent={[Function]}
-        valueKey="value"
       />
       <div
         className="big-spacer-top alert alert-success markdown"
index 8736d86e44ff5846b6ce3cc2144aac999a7d6d73..41715c40b4f4c176d6ad76bb54998a95e9853cb3 100644 (file)
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import ListIcon from '../../../components/icons-components/ListIcon';
 import TreeIcon from '../../../components/icons-components/TreeIcon';
 import TreemapIcon from '../../../components/icons-components/TreemapIcon';
+import Select from '../../../components/controls/Select';
 import { hasList, hasTree, hasTreemap } from '../utils';
 import { translate } from '../../../helpers/l10n';
 /*:: import type { Metric } from '../../../store/metrics/actions'; */
index c007678dbabd3059b835a67c85a9316441797544..6a46b06820b725583e66abf0fe0693201cf4d4fb 100644 (file)
@@ -2,40 +2,9 @@
 
 exports[`should display correctly with treemap option 1`] = `
 <Select
-  addLabelText="Add \\"{label}\\"?"
-  arrowRenderer={[Function]}
   autoBlur={true}
-  autosize={true}
-  backspaceRemoves={true}
-  backspaceToRemoveMessage="Press backspace to remove {label}"
-  clearAllText="Clear all"
-  clearRenderer={[Function]}
-  clearValueText="Clear value"
   clearable={false}
-  closeOnSelect={true}
-  deleteRemoves={true}
-  delimiter=","
-  disabled={false}
-  escapeClearsValue={true}
-  filterOptions={[Function]}
-  ignoreAccents={true}
-  ignoreCase={true}
-  inputProps={Object {}}
-  isLoading={false}
-  joinValues={false}
-  labelKey="label"
-  matchPos="any"
-  matchProp="any"
-  menuBuffer={0}
-  menuRenderer={[Function]}
-  multi={false}
-  noResultsText="No results found"
-  onBlurResetsInput={true}
   onChange={[Function]}
-  onCloseResetsInput={true}
-  onSelectResetsInput={true}
-  openOnClick={true}
-  optionComponent={[Function]}
   options={
     Array [
       Object {
@@ -70,16 +39,8 @@ exports[`should display correctly with treemap option 1`] = `
       },
     ]
   }
-  pageSize={5}
-  placeholder="Select..."
-  required={false}
-  scrollMenuIntoView={true}
   searchable={false}
-  simpleValue={false}
-  tabSelectsValue={true}
   value="tree"
-  valueComponent={[Function]}
-  valueKey="value"
   valueRenderer={[Function]}
 />
 `;
index 8662db7ae8da9e74194dedaf0569b4e15abcd4b1..025d92df51ba5e870c05a1d0b8bb1f67e74b609c 100644 (file)
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
-import Select, { Creatable } from 'react-select';
 import { pickBy, sortBy } from 'lodash';
 import SearchSelect from '../../../components/controls/SearchSelect';
 import Checkbox from '../../../components/controls/Checkbox';
+import Modal from '../../../components/controls/Modal';
+import Select, { Creatable } from '../../../components/controls/Select';
 import Tooltip from '../../../components/controls/Tooltip';
 import MarkdownTips from '../../../components/common/MarkdownTips';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
@@ -511,12 +511,7 @@ export default class BulkChangeModal extends React.PureComponent {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="modal" onRequestClose={this.props.onClose}>
         {this.state.loading ? this.renderLoading() : this.renderForm()}
       </Modal>
     );
index 639b521597b355eb2a8b7f4dc8c52c78ca2d1d45..e75f10633a4f9d56a9dbeef3ce35dcf1d31f4c5f 100644 (file)
@@ -19,8 +19,8 @@
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import { connect } from 'react-redux';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { getLanguages } from '../../../store/rootReducer';
 
index ee86ac1159617e4c69b9311378efc61ec80af498..414a768e48561e581adf1de2874644f6303c0181 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import LicenseEditionSet from './LicenseEditionSet';
 import { Edition, EditionStatus, applyLicense } from '../../../api/marketplace';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export interface Props {
@@ -87,12 +87,7 @@ export default class LicenseEditionForm extends React.PureComponent<Props, State
       ? translateWithParameters('marketplace.downgrade_to_x', edition.name)
       : translateWithParameters('marketplace.upgrade_to_x', edition.name);
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index 1af1ee86295a3a1b72431e13b69f2351d4015dfc..c2bd0bf77111908f014f92b0f8cef12de03a2efb 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { Edition, EditionStatus, uninstallEdition } from '../../../api/marketplace';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export interface Props {
@@ -75,12 +75,7 @@ export default class UninstallEditionForm extends React.PureComponent<Props, Sta
     const currentEdition = edition ? edition.name : translate('marketplace.commercial_edition');
     const header = translateWithParameters('marketplace.uninstall_x', currentEdition);
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index bd4aa78eb6adce9df0332d99e89672bf072b2d22..85de7c934df47aa5784d534238d98e7347487fbf 100644 (file)
@@ -32,19 +32,8 @@ exports[`should correctly change the button based on the status 3`] = `
 
 exports[`should display correctly 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="marketplace.upgrade_to_x.Foo"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 05cefbe37c2ea45cfa58830c04ddc2811695cb43..0b3ad80dd5cbd2bdbc9014938970e0cdab4abff0 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`should display correctly 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="marketplace.uninstall_x.Foo"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index ef7ebd4d5e42b7a076df522a4a8aac823439ea3f..d1b270dd0d44e2f2581088401084d52c8150d7a5 100644 (file)
@@ -20,9 +20,9 @@
 // @flow
 import React from 'react';
 import Helmet from 'react-helmet';
-import Modal from 'react-modal';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 import { getOrganizationByKey } from '../../../store/rootReducer';
 import { deleteOrganization } from '../actions';
@@ -63,12 +63,7 @@ class OrganizationDelete extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.handleCloseModal}>
+      <Modal contentLabel="modal form" onRequestClose={this.handleCloseModal}>
         <header className="modal-head">
           <h2>{translate('organization.delete')}</h2>
         </header>
index b34a9e508da4a7e884c5c73d8d383dfdb53e045a..d8593ee9ffc3738dc93c38ce6056d8c99854aa29 100644 (file)
@@ -67,19 +67,8 @@ exports[`smoke test 2`] = `
       delete
     </button>
     <Modal
-      ariaHideApp={true}
-      bodyOpenClassName="ReactModal__Body--open"
-      className="modal"
-      closeTimeoutMS={0}
       contentLabel="modal form"
-      isOpen={true}
       onRequestClose={[Function]}
-      overlayClassName="modal-overlay"
-      parentSelector={[Function]}
-      portalClassName="ReactModalPortal"
-      shouldCloseOnEsc={true}
-      shouldCloseOnOverlayClick={true}
-      shouldFocusAfterRender={true}
     >
       <header
         className="modal-head"
@@ -153,19 +142,8 @@ exports[`smoke test 3`] = `
       delete
     </button>
     <Modal
-      ariaHideApp={true}
-      bodyOpenClassName="ReactModal__Body--open"
-      className="modal"
-      closeTimeoutMS={0}
       contentLabel="modal form"
-      isOpen={true}
       onRequestClose={[Function]}
-      overlayClassName="modal-overlay"
-      parentSelector={[Function]}
-      portalClassName="ReactModalPortal"
-      shouldCloseOnEsc={true}
-      shouldCloseOnOverlayClick={true}
-      shouldFocusAfterRender={true}
     >
       <header
         className="modal-head"
index 8eec0075670b33827e303076238866944231a1c7..b62b316c97d1306784ad89c3df295ae02cbe3573 100644 (file)
@@ -19,9 +19,9 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
 import UsersSelectSearch from '../../../users/components/UsersSelectSearch';
 import { searchMembers } from '../../../../api/organizations';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 /*:: import type { Organization } from '../../../../store/organizations/duck'; */
 /*:: import type { Member } from '../../../../store/organizationsMembers/actions'; */
@@ -78,12 +78,7 @@ export default class AddMemberForm extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('users.add')}</h2>
         </header>
index 60892a2aa879378cb432c94a4f51956a7999d596..0152ce62c211a52cb6038d6c8356fc336d125453 100644 (file)
@@ -19,9 +19,9 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
 import { keyBy, pickBy } from 'lodash';
 import { getUserGroups } from '../../../../api/users';
+import Modal from '../../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import OrganizationGroupCheckbox from '../OrganizationGroupCheckbox';
 /*:: import type { Member } from '../../../../store/organizationsMembers/actions'; */
@@ -106,12 +106,7 @@ export default class ManageMemberGroupsForm extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('organization.members.manage_groups')}</h2>
         </header>
index 7be06862158053fc60460233f2bfe9c16738a601..d14eff121c6714365f23c0bf2046bd324f8f9bc2 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 /*:: import type { Member } from '../../../../store/organizationsMembers/actions'; */
 /*:: import type { Organization } from '../../../../store/organizations/duck'; */
@@ -62,12 +62,7 @@ export default class RemoveMemberForm extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('users.remove')}</h2>
         </header>
index 96d42f260975f442eb9ff5a2758de17a08d971d9..eee77a0a2cd4d6dea4413bf0632ba3668d4122cf 100644 (file)
@@ -14,19 +14,8 @@ exports[`should render and open the modal 2`] = `
 >
   organization.members.add
   <Modal
-    ariaHideApp={true}
-    bodyOpenClassName="ReactModal__Body--open"
-    className="modal"
-    closeTimeoutMS={0}
     contentLabel="modal form"
-    isOpen={true}
     onRequestClose={[Function]}
-    overlayClassName="modal-overlay"
-    parentSelector={[Function]}
-    portalClassName="ReactModalPortal"
-    shouldCloseOnEsc={true}
-    shouldCloseOnOverlayClick={true}
-    shouldFocusAfterRender={true}
   >
     <header
       className="modal-head"
index 751d905c910320291cf817909e09a4f7999e6286..eaa7b2a51d05d5aa028946afabc8e273be11b988 100644 (file)
@@ -84,19 +84,8 @@ exports[`should render and open the modal 2`] = `
 >
   organization.members.manage_groups
   <Modal
-    ariaHideApp={true}
-    bodyOpenClassName="ReactModal__Body--open"
-    className="modal"
-    closeTimeoutMS={0}
     contentLabel="modal form"
-    isOpen={true}
     onRequestClose={[Function]}
-    overlayClassName="modal-overlay"
-    parentSelector={[Function]}
-    portalClassName="ReactModalPortal"
-    shouldCloseOnEsc={true}
-    shouldCloseOnOverlayClick={true}
-    shouldFocusAfterRender={true}
   >
     <header
       className="modal-head"
index b1b8bdb072d61592059cbd3161183a18a48fbf1f..72f58137dc4450ba6b4289f81e9ccbf7c4960433 100644 (file)
@@ -29,19 +29,8 @@ exports[`should render and open the modal 2`] = `
 >
   organization.members.remove
   <Modal
-    ariaHideApp={true}
-    bodyOpenClassName="ReactModal__Body--open"
-    className="modal"
-    closeTimeoutMS={0}
     contentLabel="modal form"
-    isOpen={true}
     onRequestClose={[Function]}
-    overlayClassName="modal-overlay"
-    parentSelector={[Function]}
-    portalClassName="ReactModalPortal"
-    shouldCloseOnEsc={true}
-    shouldCloseOnOverlayClick={true}
-    shouldFocusAfterRender={true}
   >
     <header
       className="modal-head"
index a2a575b86704bc4eaf723e0e940204aa668ecaa7..337af71d4cefe614fb1280908747089ffb59cc4f 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 
 /*::
@@ -51,12 +51,7 @@ export default class PublicProjectDisclaimer extends React.PureComponent {
     const { qualifier } = this.props.component;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="modal form" onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>
             {translateWithParameters('projects_role.turn_x_to_public', this.props.component.name)}
index c2dd276e85b8881af5a3e125c1473a183c163524..41b3d310881f6379c7bd4130251418b387d69358 100644 (file)
@@ -19,8 +19,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-modal';
 import { deleteProject, deletePortfolio } from '../../../api/components';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export default class Form extends React.PureComponent {
@@ -80,12 +80,7 @@ export default class Form extends React.PureComponent {
         </button>
 
         {this.state.modalOpen && (
-          <Modal
-            isOpen={true}
-            contentLabel="project deletion"
-            className="modal"
-            overlayClassName="modal-overlay"
-            onRequestClose={this.closeModal}>
+          <Modal contentLabel="project deletion" onRequestClose={this.closeModal}>
             <form onSubmit={this.handleSubmit}>
               <div className="modal-head">
                 <h2>{translate('qualifier.delete.TRK')}</h2>
index d6dce52077b5c2bc3540a423bd5c85a328940187..608c5ab7dec07cf856d28ee2c091cd35b6a66b97 100644 (file)
@@ -19,9 +19,9 @@
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import AddGraphMetric from './forms/AddGraphMetric';
 import { isCustomGraph, GRAPH_TYPES } from '../utils';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 /*:: import type { Metric } from '../types'; */
 
index f4f9a9a7874085e80f8f50c9dac3f2748f9deee0..98949deec3524fd1b7ba238b58bccde9d5eab1df 100644 (file)
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption';
 import ProjectActivityEventSelectValue from './ProjectActivityEventSelectValue';
 import ProjectActivityDateInput from './ProjectActivityDateInput';
 import { EVENT_TYPES, APPLICATION_EVENT_TYPES } from '../utils';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 /*:: import type { RawQuery } from '../../../helpers/query'; */
 
index 12ff75c53424e99a44d01fb1ec34d1f8ef9b4a8f..1656aec026de7a1ce519dcfd25f48fe093d0dc48 100644 (file)
@@ -5,39 +5,9 @@ exports[`should render correctly the list of series 1`] = `
   className="page-header"
 >
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="input-medium pull-left big-spacer-right"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={true}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -59,16 +29,10 @@ exports[`should render correctly the list of series 1`] = `
         },
       ]
     }
-    pageSize={5}
     placeholder="project_activity.filter_events..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value=""
     valueComponent={[Function]}
-    valueKey="value"
   />
   <ProjectActivityDateInput
     className="pull-left"
index 21f7980a9bd6c9162c2fb673c1c3bc12fc01b6c2..f1b45f2cdaf7b8541201a6e1526a7d5c55bf2937 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 /*:: import type { Analysis } from '../../types'; */
 
@@ -98,12 +98,7 @@ export default class AddEventForm extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate(this.props.addEventButtonText)}</h2>
         </header>
index bf9c646b599b0d754ca308e94ceab7ef58838e2d..76dfd5e7bf505e5a07a04c682333b50f4f0854be 100644 (file)
@@ -20,8 +20,8 @@
 // @flow
 import React from 'react';
 import classNames from 'classnames';
-import Modal from 'react-modal';
-import Select from 'react-select';
+import Modal from '../../../../components/controls/Modal';
+import Select from '../../../../components/controls/Select';
 import Tooltip from '../../../../components/controls/Tooltip';
 import { isDiffMetric } from '../../../../helpers/measures';
 import {
@@ -103,12 +103,7 @@ export default class AddGraphMetric extends React.PureComponent {
   renderModal() {
     const { metricsTypeFilter } = this.props;
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="graph metric add"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="graph metric add" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('project_activity.graphs.custom.add_metric')}</h2>
         </header>
index bf5714b036211994154356e5bdc356dd6667d836..2dad5bc831c54caab0699998f06be6e393b3da5d 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 /*:: import type { Event } from '../../types'; */
 
@@ -96,12 +96,7 @@ export default class ChangeEventForm extends React.PureComponent {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate(this.props.changeEventButtonText)}</h2>
         </header>
index 40e73827ff7b29497d1289063b9d294fa8d35856..88d6e69f48e7ad3b49981ec4664c93417ae657bd 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 /*:: import type { Analysis } from '../../types'; */
 
@@ -89,12 +89,7 @@ export default class RemoveAnalysisForm extends React.PureComponent {
 
   renderModal() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate('project_activity.delete_analysis')}</h2>
         </header>
index 43cc1539aeff3b095231ffaacff12ca0c207eaa6..abed52766cdc94fd367a3a49c03cc9c5ee2738fb 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 /*:: import type { Event } from '../../types'; */
 
@@ -82,12 +82,7 @@ export default class RemoveEventForm extends React.PureComponent {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.closeForm}>
+      <Modal contentLabel="modal form" onRequestClose={this.closeForm}>
         <header className="modal-head">
           <h2>{translate(this.props.removeEventButtonText)}</h2>
         </header>
index 5b8e9cb8c7fd7ab4af59d88b7225c1ea5af57140..da22d4f87e96766fa2a9aee6b280f24a38c1b8a5 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { deleteBranch } from '../../../api/branches';
 import { Branch } from '../../../app/types';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 interface Props {
@@ -74,12 +74,7 @@ export default class DeleteBranchModal extends React.PureComponent<Props, State>
     const header = translate('branches.delete');
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index ac05eabcc074dd7fdafa237805d57b999200c6f8..d71f1ebccfdca8467f1712162e75d5b125695ebd 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import SettingForm from './SettingForm';
 import { translate } from '../../../helpers/l10n';
 import { getValues, SettingValue } from '../../../api/settings';
+import Modal from '../../../components/controls/Modal';
 
 interface Props {
   branch: string;
@@ -77,12 +77,7 @@ export default class LeakPeriodForm extends React.PureComponent<Props, State> {
     const header = translate('branches.set_leak_period');
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index 8a683b25529221336b2e3029e3360a86e99af975..6a36e38c0c4ad573f51aa6d228b004cdc3bc8097 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import SettingForm from './SettingForm';
 import { translate } from '../../../helpers/l10n';
 import { SettingValue } from '../../../api/settings';
+import Modal from '../../../components/controls/Modal';
 
 interface Props {
   onChange: () => void;
@@ -34,12 +34,7 @@ export default function LongBranchesPatternForm(props: Props) {
   const header = translate('branches.detection_of_long_living_branches');
 
   return (
-    <Modal
-      isOpen={true}
-      contentLabel={header}
-      className="modal"
-      overlayClassName="modal-overlay"
-      onRequestClose={props.onClose}>
+    <Modal contentLabel={header} onRequestClose={props.onClose}>
       <header className="modal-head">
         <h2>{header}</h2>
       </header>
index 52a381eb90c8e5a4c954b2f695b56a728b13a078..3d100e93d2bd761d8874792d91f873ec0a569a80 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { renameBranch } from '../../../api/branches';
 import { Branch } from '../../../app/types';
 import { translate } from '../../../helpers/l10n';
+import Modal from '../../../components/controls/Modal';
 
 interface Props {
   branch: Branch;
@@ -84,12 +84,7 @@ export default class RenameBranchModal extends React.PureComponent<Props, State>
       this.state.loading || !this.state.name || this.state.name === branch.name;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index fe8762c945f98c6d0bb132fae775c9b47070afa4..0cfc9a4ebb6f06824e136e929f45acccc4e30b52 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.delete"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -54,19 +43,8 @@ exports[`renders 1`] = `
 
 exports[`renders 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.delete"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 8e0e2e2d8ca00d6450b705c6e18dee0774f8869e..d75d4297d92bff82ca4b5478603c2ecf67c3d857 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.detection_of_long_living_branches"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 1f190cd94c5dd6c19c436c13674071f95fc5f0af..5df1cc12dcf6b1b0c33aa316bbf4e7a48972795f 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.rename"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -77,19 +66,8 @@ exports[`renders 1`] = `
 
 exports[`renders 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.rename"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -152,19 +130,8 @@ exports[`renders 2`] = `
 
 exports[`renders 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="branches.rename"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index aa0b8bea1160efed29a453229b22c4adce61b392..a2bcf4111cfb4430bf52d834a54fb21c867ad783 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import { some } from 'lodash';
 import { QualityGate } from '../../api/quality-gates';
+import Select from '../../components/controls/Select';
 import { translate } from '../../helpers/l10n';
 
 interface Props {
index 4d448e7a8cbcd3d1622a819c8b3cd207e5895121..3e5a39759b885452581c2456ec7b77306ffb70c0 100644 (file)
@@ -3,39 +3,9 @@
 exports[`renders 1`] = `
 <div>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
     disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
-    optionComponent={[Function]}
     optionRenderer={[Function]}
     options={
       Array [
@@ -55,21 +25,13 @@ exports[`renders 1`] = `
         },
       ]
     }
-    pageSize={5}
     placeholder="none"
-    required={false}
-    scrollMenuIntoView={true}
-    searchable={true}
-    simpleValue={false}
     style={
       Object {
         "width": 300,
       }
     }
-    tabSelectsValue={true}
     value="1"
-    valueComponent={[Function]}
-    valueKey="value"
     valueRenderer={[Function]}
   />
 </div>
index 9a3febf80ade3fd254713b94348a72f89d4ff136..2b1c1a03fb192102a3eda9190994bb5d0c96c910 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import { Profile } from '../../api/quality-profiles';
+import Select from '../../components/controls/Select';
 import { translate } from '../../helpers/l10n';
 
 interface Props {
index 12542749c1ff23760a05477299819888884cde23..5729b3d6716768ea89dc2ffa70df4a10747f8f83 100644 (file)
@@ -13,39 +13,9 @@ exports[`renders 1`] = `
     className="thin nowrap"
   >
     <Select
-      addLabelText="Add \\"{label}\\"?"
-      arrowRenderer={[Function]}
-      autosize={true}
-      backspaceRemoves={true}
-      backspaceToRemoveMessage="Press backspace to remove {label}"
-      clearAllText="Clear all"
-      clearRenderer={[Function]}
-      clearValueText="Clear value"
       clearable={false}
-      closeOnSelect={true}
-      deleteRemoves={true}
-      delimiter=","
       disabled={false}
-      escapeClearsValue={true}
-      filterOptions={[Function]}
-      ignoreAccents={true}
-      ignoreCase={true}
-      inputProps={Object {}}
-      isLoading={false}
-      joinValues={false}
-      labelKey="label"
-      matchPos="any"
-      matchProp="any"
-      menuBuffer={0}
-      menuRenderer={[Function]}
-      multi={false}
-      noResultsText="No results found"
-      onBlurResetsInput={true}
       onChange={[Function]}
-      onCloseResetsInput={true}
-      onSelectResetsInput={true}
-      openOnClick={true}
-      optionComponent={[Function]}
       optionRenderer={[Function]}
       options={
         Array [
@@ -61,21 +31,12 @@ exports[`renders 1`] = `
           },
         ]
       }
-      pageSize={5}
-      placeholder="Select..."
-      required={false}
-      scrollMenuIntoView={true}
-      searchable={true}
-      simpleValue={false}
       style={
         Object {
           "width": 300,
         }
       }
-      tabSelectsValue={true}
       value="foo"
-      valueComponent={[Function]}
-      valueKey="value"
       valueRenderer={[Function]}
     />
   </td>
index 5b2e8af40569c94dbc222b7492bcac5067b89981..deabc22978094781411021815b20d97d4beb468d 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import PerspectiveSelectOption, { Option } from './PerspectiveSelectOption';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { VIEWS, VISUALIZATIONS } from '../utils';
 
index 434c1818eeb5d48376a5cd8ba338ec464c7880c9..9c2137903594f079beb62040f767e9494ab3ce68 100644 (file)
  */
 import * as React from 'react';
 import { sortBy } from 'lodash';
-import Select from 'react-select';
 import ProjectsSortingSelectOption, { Option } from './ProjectsSortingSelectOption';
 import SortAscIcon from '../../../components/icons-components/SortAscIcon';
 import SortDescIcon from '../../../components/icons-components/SortDescIcon';
+import Select from '../../../components/controls/Select';
 import Tooltip from '../../../components/controls/Tooltip';
 import { translate } from '../../../helpers/l10n';
 import { SORTING_METRICS, SORTING_LEAK_METRICS, parseSorting } from '../utils';
index 1c5a0c3e47a83024632ba2839e48fc1d1a296abc..944552d868204ef9926ff6fdc388d69248d5a7b2 100644 (file)
@@ -28,39 +28,9 @@ exports[`should render correctly 1`] = `
     :
   </label>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="little-spacer-left input-medium"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -106,16 +76,8 @@ exports[`should render correctly 1`] = `
         },
       ]
     }
-    pageSize={5}
-    placeholder="Select..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value="overall"
-    valueComponent={[Function]}
-    valueKey="value"
   />
 </div>
 `;
@@ -127,39 +89,9 @@ exports[`should render with coverage selected 1`] = `
     :
   </label>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="little-spacer-left input-medium"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -205,16 +137,8 @@ exports[`should render with coverage selected 1`] = `
         },
       ]
     }
-    pageSize={5}
-    placeholder="Select..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value="coverage"
-    valueComponent={[Function]}
-    valueKey="value"
   />
 </div>
 `;
index d1c569d96012eb3531b32be1bd68b25f95c0abaa..e5219e7902b07ec2f020fa9c5ec888b00ce14013 100644 (file)
@@ -7,39 +7,9 @@ exports[`should handle the descending sort direction 1`] = `
     :
   </label>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="little-spacer-left input-medium"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -85,16 +55,8 @@ exports[`should handle the descending sort direction 1`] = `
         },
       ]
     }
-    pageSize={5}
-    placeholder="Select..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value="vulnerability"
-    valueComponent={[Function]}
-    valueKey="value"
   />
   <Tooltip
     overlay="projects.sort_descending"
@@ -120,39 +82,9 @@ exports[`should render correctly for leak view 1`] = `
     :
   </label>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="little-spacer-left input-medium"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -198,16 +130,8 @@ exports[`should render correctly for leak view 1`] = `
         },
       ]
     }
-    pageSize={5}
-    placeholder="Select..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value="new_coverage"
-    valueComponent={[Function]}
-    valueKey="value"
   />
   <Tooltip
     overlay="projects.sort_ascending"
@@ -233,39 +157,9 @@ exports[`should render correctly for overall view 1`] = `
     :
   </label>
   <Select
-    addLabelText="Add \\"{label}\\"?"
-    arrowRenderer={[Function]}
-    autosize={true}
-    backspaceRemoves={true}
-    backspaceToRemoveMessage="Press backspace to remove {label}"
     className="little-spacer-left input-medium"
-    clearAllText="Clear all"
-    clearRenderer={[Function]}
-    clearValueText="Clear value"
     clearable={false}
-    closeOnSelect={true}
-    deleteRemoves={true}
-    delimiter=","
-    disabled={false}
-    escapeClearsValue={true}
-    filterOptions={[Function]}
-    ignoreAccents={true}
-    ignoreCase={true}
-    inputProps={Object {}}
-    isLoading={false}
-    joinValues={false}
-    labelKey="label"
-    matchPos="any"
-    matchProp="any"
-    menuBuffer={0}
-    menuRenderer={[Function]}
-    multi={false}
-    noResultsText="No results found"
-    onBlurResetsInput={true}
     onChange={[Function]}
-    onCloseResetsInput={true}
-    onSelectResetsInput={true}
-    openOnClick={true}
     optionComponent={[Function]}
     options={
       Array [
@@ -311,16 +205,8 @@ exports[`should render correctly for overall view 1`] = `
         },
       ]
     }
-    pageSize={5}
-    placeholder="Select..."
-    required={false}
-    scrollMenuIntoView={true}
     searchable={false}
-    simpleValue={false}
-    tabSelectsValue={true}
     value="name"
-    valueComponent={[Function]}
-    valueKey="value"
   />
   <Tooltip
     overlay="projects.sort_ascending"
index 5b45e79a6f53669baeb1bab93368d9a10d8f4ed6..c23ca53c3d370ed75c569a44f196b15281130530 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import * as PropTypes from 'prop-types';
 import { getFilterUrl } from './utils';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
index f446bc626ef0aaa6c21f803d37a689b1784709be..2c9b67be51398d6e95834c2e21b3404fe81fd073 100644 (file)
@@ -18,8 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
-import Select from 'react-select';
 import {
   getPermissionTemplates,
   bulkApplyTemplate,
@@ -27,6 +25,8 @@ import {
 } from '../../api/permissions';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import AlertWarnIcon from '../../components/icons-components/AlertWarnIcon';
+import Modal from '../../components/controls/Modal';
+import Select from '../../components/controls/Select';
 
 export interface Props {
   analyzedBefore?: string;
@@ -160,12 +160,7 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S
     const header = translate('permission_templates.bulk_apply_permission_template');
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index b464112c980c36b211a99ea03048d221798a228d..fa959ccbc82371598c20ca7f7eda4d6075845c4b 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import * as classNames from 'classnames';
 import { Organization, Visibility } from '../../app/types';
 import UpgradeOrganizationBox from '../../components/common/UpgradeOrganizationBox';
 import { translate } from '../../helpers/l10n';
+import Modal from '../../components/controls/Modal';
 
 export interface Props {
   onClose: () => void;
@@ -62,12 +62,7 @@ export default class ChangeVisibilityForm extends React.PureComponent<Props, Sta
     const { canUpdateProjectsVisibilityToPrivate } = this.props.organization;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="modal form" onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{translate('organization.change_visibility_form.header')}</h2>
         </header>
index 07352fda83984dcc12d1123dc1671a8646891845..510ad575f5a7efdbd5b9ab4d1fa3513c6dcbb2ee 100644 (file)
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
 import { Organization } from '../../app/types';
@@ -27,6 +26,7 @@ import VisibilitySelector from '../../components/common/VisibilitySelector';
 import { createProject } from '../../api/components';
 import { translate } from '../../helpers/l10n';
 import { getProjectUrl } from '../../helpers/urls';
+import Modal from '../../components/controls/Modal';
 
 interface Props {
   onClose: () => void;
@@ -131,12 +131,7 @@ export default class CreateProjectForm extends React.PureComponent<Props, State>
     const { createdProject } = this.state;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel="modal form"
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel="modal form" onRequestClose={this.props.onClose}>
         {createdProject ? (
           <div>
             <header className="modal-head">
index 04ae04af7bc6c71407bf0c01c7c9a40472e227fd..4919744ec7fc1aed8fd75cbf1dcf5fcd1586f09a 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { bulkDeleteProjects } from '../../api/components';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import AlertWarnIcon from '../../components/icons-components/AlertWarnIcon';
+import Modal from '../../components/controls/Modal';
 
 export interface Props {
   analyzedBefore?: string;
@@ -100,12 +100,7 @@ export default class DeleteModal extends React.PureComponent<Props, State> {
     const header = translate('qualifiers.delete', this.props.qualifier);
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index 2c9b0684090acace2641dd87cb45158f9c6f57eb..1d799214c95035a64361e2330a1809770b86855f 100644 (file)
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import { sortBy } from 'lodash';
 import BulkApplyTemplateModal from './BulkApplyTemplateModal';
 import DeleteModal from './DeleteModal';
@@ -29,6 +28,7 @@ import { translate } from '../../helpers/l10n';
 import QualifierIcon from '../../components/shared/QualifierIcon';
 import Tooltip from '../../components/controls/Tooltip';
 import DateInput from '../../components/controls/DateInput';
+import Select from '../../components/controls/Select';
 
 export interface Props {
   analyzedBefore?: string;
index 02eab945bf9055dfcfe70b7fbc0e820e772fa7c3..960502692b6dfb7d9c1cc926a2a9ee0e6bbb37ad 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`bulk applies template to all results 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -46,19 +35,8 @@ exports[`bulk applies template to all results 1`] = `
 
 exports[`bulk applies template to all results 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -90,39 +68,9 @@ exports[`bulk applies template to all results 2`] = `
         </em>
       </label>
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
         disabled={false}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -135,16 +83,8 @@ exports[`bulk applies template to all results 2`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value="foo"
-        valueComponent={[Function]}
-        valueKey="value"
       />
     </div>
   </div>
@@ -170,19 +110,8 @@ exports[`bulk applies template to all results 2`] = `
 
 exports[`bulk applies template to all results 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -214,39 +143,9 @@ exports[`bulk applies template to all results 3`] = `
         </em>
       </label>
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
         disabled={true}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -259,16 +158,8 @@ exports[`bulk applies template to all results 3`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value="foo"
-        valueComponent={[Function]}
-        valueKey="value"
       />
     </div>
   </div>
@@ -297,19 +188,8 @@ exports[`bulk applies template to all results 3`] = `
 
 exports[`bulk applies template to all results 4`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -343,19 +223,8 @@ exports[`bulk applies template to all results 4`] = `
 
 exports[`bulk applies template to selected results 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -387,19 +256,8 @@ exports[`bulk applies template to selected results 1`] = `
 
 exports[`bulk applies template to selected results 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -431,39 +289,9 @@ exports[`bulk applies template to selected results 2`] = `
         </em>
       </label>
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
         disabled={false}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -476,16 +304,8 @@ exports[`bulk applies template to selected results 2`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value="foo"
-        valueComponent={[Function]}
-        valueKey="value"
       />
     </div>
   </div>
@@ -511,19 +331,8 @@ exports[`bulk applies template to selected results 2`] = `
 
 exports[`bulk applies template to selected results 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -555,39 +364,9 @@ exports[`bulk applies template to selected results 3`] = `
         </em>
       </label>
       <Select
-        addLabelText="Add \\"{label}\\"?"
-        arrowRenderer={[Function]}
-        autosize={true}
-        backspaceRemoves={true}
-        backspaceToRemoveMessage="Press backspace to remove {label}"
-        clearAllText="Clear all"
-        clearRenderer={[Function]}
-        clearValueText="Clear value"
         clearable={false}
-        closeOnSelect={true}
-        deleteRemoves={true}
-        delimiter=","
         disabled={true}
-        escapeClearsValue={true}
-        filterOptions={[Function]}
-        ignoreAccents={true}
-        ignoreCase={true}
-        inputProps={Object {}}
-        isLoading={false}
-        joinValues={false}
-        labelKey="label"
-        matchPos="any"
-        matchProp="any"
-        menuBuffer={0}
-        menuRenderer={[Function]}
-        multi={false}
-        noResultsText="No results found"
-        onBlurResetsInput={true}
         onChange={[Function]}
-        onCloseResetsInput={true}
-        onSelectResetsInput={true}
-        openOnClick={true}
-        optionComponent={[Function]}
         options={
           Array [
             Object {
@@ -600,16 +379,8 @@ exports[`bulk applies template to selected results 3`] = `
             },
           ]
         }
-        pageSize={5}
-        placeholder="Select..."
-        required={false}
-        scrollMenuIntoView={true}
         searchable={false}
-        simpleValue={false}
-        tabSelectsValue={true}
         value="foo"
-        valueComponent={[Function]}
-        valueKey="value"
       />
     </div>
   </div>
@@ -638,19 +409,8 @@ exports[`bulk applies template to selected results 3`] = `
 
 exports[`bulk applies template to selected results 4`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="permission_templates.bulk_apply_permission_template"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 2eaf4fb187dba5c4373caf354db5c199542a6ce0..1ab30336149578f0de9d6b829ccfacdc4b5f2af0 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`changes visibility 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -110,19 +99,8 @@ exports[`changes visibility 1`] = `
 
 exports[`changes visibility 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -218,19 +196,8 @@ exports[`changes visibility 2`] = `
 
 exports[`renders disabled 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 322cdd80dda5c0857f87f88ae22134f4e9f58abe..0a24881df61fa7c0fcdd519242975a4eb8ca7a39 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`creates project 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="create-project-form"
@@ -132,19 +121,8 @@ exports[`creates project 1`] = `
 
 exports[`creates project 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="create-project-form"
@@ -262,19 +240,8 @@ exports[`creates project 2`] = `
 
 exports[`creates project 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="create-project-form"
@@ -395,19 +362,8 @@ exports[`creates project 3`] = `
 
 exports[`creates project 4`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div>
     <header
@@ -465,19 +421,8 @@ exports[`creates project 4`] = `
 
 exports[`shows more 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="create-project-form"
@@ -595,19 +540,8 @@ exports[`shows more 1`] = `
 
 exports[`shows more 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="modal form"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="create-project-form"
index 9e568644af0043f0dbf4240713a5b42b62e44c42..d33cef35d2599425c7ee5e8633eb24fc22e37da6 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`deletes all projects 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="qualifiers.delete.TRK"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -59,19 +48,8 @@ exports[`deletes all projects 1`] = `
 
 exports[`deletes all projects 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="qualifiers.delete.TRK"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -119,19 +97,8 @@ exports[`deletes all projects 2`] = `
 
 exports[`deletes selected projects 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="qualifiers.delete.TRK"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -176,19 +143,8 @@ exports[`deletes selected projects 1`] = `
 
 exports[`deletes selected projects 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="qualifiers.delete.TRK"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 5e8bdfddf0dce056a026bc8bbb3a9532bf016293..25eae9b2ece204b31ef86210637b62cb46d3f0c5 100644 (file)
@@ -53,41 +53,11 @@ exports[`render qualifiers filter 1`] = `
           className="thin nowrap text-middle"
         >
           <Select
-            addLabelText="Add \\"{label}\\"?"
-            arrowRenderer={[Function]}
-            autosize={true}
-            backspaceRemoves={true}
-            backspaceToRemoveMessage="Press backspace to remove {label}"
             className="input-medium"
-            clearAllText="Clear all"
-            clearRenderer={[Function]}
-            clearValueText="Clear value"
             clearable={false}
-            closeOnSelect={true}
-            deleteRemoves={true}
-            delimiter=","
             disabled={false}
-            escapeClearsValue={true}
-            filterOptions={[Function]}
-            ignoreAccents={true}
-            ignoreCase={true}
-            inputProps={Object {}}
-            isLoading={false}
-            joinValues={false}
-            labelKey="label"
-            matchPos="any"
-            matchProp="any"
-            menuBuffer={0}
-            menuRenderer={[Function]}
-            multi={false}
             name="projects-qualifier"
-            noResultsText="No results found"
-            onBlurResetsInput={true}
             onChange={[Function]}
-            onCloseResetsInput={true}
-            onSelectResetsInput={true}
-            openOnClick={true}
-            optionComponent={[Function]}
             optionRenderer={[Function]}
             options={
               Array [
@@ -105,16 +75,8 @@ exports[`render qualifiers filter 1`] = `
                 },
               ]
             }
-            pageSize={5}
-            placeholder="Select..."
-            required={false}
-            scrollMenuIntoView={true}
             searchable={false}
-            simpleValue={false}
-            tabSelectsValue={true}
             value="TRK"
-            valueComponent={[Function]}
-            valueKey="value"
             valueRenderer={[Function]}
           />
         </td>
index eaf8d1ac436bebcdf3dcb25b27ec907313e9c25b..866af392525523e5621bafab436335317ef2c6a7 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import Select from 'react-select';
 import { sortBy } from 'lodash';
+import Select from '../../../components/controls/Select';
 import { translate, getLocalizedMetricName, getLocalizedMetricDomain } from '../../../helpers/l10n';
 
 export default function AddConditionForm({ metrics, onSelect }) {
index 6f865126100b214f2debbfac0e912895c206a118..07afcdc77d10916f3a829f3c71b2e32de1853658 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React, { Component } from 'react';
-import Select from 'react-select';
 import ThresholdInput from './ThresholdInput';
 import DeleteConditionView from '../views/gate-conditions-delete-view';
 import Checkbox from '../../../components/controls/Checkbox';
 import { createCondition, updateCondition } from '../../../api/quality-gates';
+import Select from '../../../components/controls/Select';
 import { translate, getLocalizedMetricName } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 
index e1c136264953de78360cc2a391d9578784681284..b00a7e8419f39d202eb439e405dff39d6f31a3ee 100644 (file)
@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
+import Select from '../../../components/controls/Select';
 
 export default class ThresholdInput extends React.PureComponent {
   static propTypes = {
index 738b63fc2b7e0967fe2985e8a816a70460033519..68c4f084c177e7aa0ac9e57ebb852c91ac3850e2 100644 (file)
@@ -19,8 +19,8 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import Select from 'react-select';
 import ThresholdInput from '../ThresholdInput';
+import Select from '../../../../components/controls/Select';
 import { change } from '../../../../helpers/testUtils';
 
 describe('on strings', () => {
index 384c0cf35257dcefc4639aca3419c12d6e241ee1..731fdc87468e6c70a0a82a76629d8d9d604e05ef 100644 (file)
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
index 963b09cd24e242943bcdb18a170af5b7d8d2a3c9..ec44e14658acc5c2dc0a45939aa6e1c1f2f12325 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { copyProfile } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
@@ -86,12 +86,7 @@ export default class CopyProfileForm extends React.PureComponent<Props, State> {
       this.state.loading || !this.state.name || this.state.name === profile.name;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="copy-profile-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index 99b85e7aad9974998028097501a286b9602ba6be..4df2aabe693e4c029e6512136c5364e558251d31 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { deleteProfile } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
@@ -68,12 +68,7 @@ export default class DeleteProfileForm extends React.PureComponent<Props, State>
     const header = translate('quality_profiles.delete_confirm_title');
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="delete-profile-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index 33cc3e4c9f821dff826803fd62757dd2bb417416..94ecba55a5e931727f2caa47e2e714b19300f646 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { renameProfile } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
@@ -86,12 +86,7 @@ export default class RenameProfileForm extends React.PureComponent<Props, State>
       this.state.loading || !this.state.name || this.state.name === profile.name;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="rename-profile-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index 204d6ff03485e07737d856276b28927c06e3f744..0451db4505e52b2d82c43066ed7239a099b34958 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
-import Select from 'react-select';
 import { sortBy } from 'lodash';
 import { changeProfileParent } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { Profile } from '../types';
 
@@ -100,10 +100,7 @@ export default class ChangeParentForm extends React.PureComponent<Props, State>
 
     return (
       <Modal
-        isOpen={true}
         contentLabel={translate('quality_profiles.change_parent')}
-        className="modal"
-        overlayClassName="modal-overlay"
         onRequestClose={this.props.onClose}>
         <form id="change-profile-parent-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
index 6e1095c4eac97c8eb097f780f49bd912cdd9c871..411108979d388d95d5950c5db8c9189fbb628363 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import * as escapeHtml from 'escape-html';
+import Modal from '../../../components/controls/Modal';
 import SelectList from '../../../components/SelectList';
 import { translate } from '../../../helpers/l10n';
 import { Profile } from '../types';
@@ -74,11 +74,8 @@ export default class ChangeProjectsForm extends React.PureComponent<Props> {
 
     return (
       <Modal
-        isOpen={true}
         contentLabel={header}
-        className="modal"
         onAfterOpen={this.renderSelectList}
-        overlayClassName="modal-overlay"
         onRequestClose={this.props.onClose}>
         <div className="modal-head">
           <h2>{header}</h2>
index 2431856c53c6479fb54bf8c5cdfae83558bc6209..0732a1f0783ab9be5e15342cc72a7673a4210f84 100644 (file)
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import ProfilePermissionsFormSelect from './ProfilePermissionsFormSelect';
 import {
   searchUsers,
@@ -27,6 +26,7 @@ import {
   addGroup,
   SearchUsersGroupsParameters
 } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 import { User, Group } from './ProfilePermissions';
 
@@ -116,12 +116,7 @@ export default class ProfilePermissionsForm extends React.PureComponent<Props, S
     const header = translate('quality_profiles.grant_permissions_to_user_or_group');
     const submitDisabled = !this.state.selected || this.state.submitting;
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index fcf87c6cbe7dcaafed714be0bc801500009d285a..a81d09cdd96b50272bfdf85ecce1d092efe05c2d 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select from 'react-select';
 import { debounce, identity } from 'lodash';
 import { User, Group } from './ProfilePermissions';
+import Select from '../../../components/controls/Select';
 import Avatar from '../../../components/ui/Avatar';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import GroupIcon from '../../../components/icons-components/GroupIcon';
index 7acbdb7e0057fb5f2fd55b1c691c1bc06f23b2ff..dcce712ae8a373aa90702cfa99dcf4738dd14d7a 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`adds group 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -64,19 +53,8 @@ exports[`adds group 1`] = `
 
 exports[`adds group 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -131,19 +109,8 @@ exports[`adds group 2`] = `
 
 exports[`adds group 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -201,19 +168,8 @@ exports[`adds group 3`] = `
 
 exports[`adds user 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -263,19 +219,8 @@ exports[`adds user 1`] = `
 
 exports[`adds user 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
@@ -330,19 +275,8 @@ exports[`adds user 2`] = `
 
 exports[`adds user 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="quality_profiles.grant_permissions_to_user_or_group"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <header
     className="modal-head"
index 818fc5af3421cd74bc884928c30f2894e63ddc83..a2760e7071086f9e5b4f3ffdb4fa35eb37751ec6 100644 (file)
@@ -2,54 +2,19 @@
 
 exports[`renders 1`] = `
 <Select
-  addLabelText="Add \\"{label}\\"?"
-  arrowRenderer={[Function]}
   autofocus={true}
-  autosize={true}
-  backspaceRemoves={true}
-  backspaceToRemoveMessage="Press backspace to remove {label}"
   className="Select-big"
-  clearAllText="Clear all"
-  clearRenderer={[Function]}
-  clearValueText="Clear value"
   clearable={false}
-  closeOnSelect={true}
-  deleteRemoves={true}
-  delimiter=","
-  disabled={false}
-  escapeClearsValue={true}
   filterOptions={[Function]}
-  ignoreAccents={true}
-  ignoreCase={true}
-  inputProps={Object {}}
   isLoading={false}
-  joinValues={false}
-  labelKey="label"
-  matchPos="any"
-  matchProp="any"
-  menuBuffer={0}
-  menuRenderer={[Function]}
-  multi={false}
   noResultsText="no_results"
-  onBlurResetsInput={true}
   onChange={[Function]}
-  onCloseResetsInput={true}
   onInputChange={[Function]}
-  onSelectResetsInput={true}
-  openOnClick={true}
-  optionComponent={[Function]}
   optionRenderer={[Function]}
   options={Array []}
-  pageSize={5}
   placeholder=""
-  required={false}
-  scrollMenuIntoView={true}
   searchable={true}
-  simpleValue={false}
-  tabSelectsValue={true}
   value="group:lambda"
-  valueComponent={[Function]}
-  valueKey="value"
   valueRenderer={[Function]}
 />
 `;
index a58a721f00ef625a7a560081d69dc2744c5078e8..9ebaa56feab8f1609847a8a10dd4a3bac52686bf 100644 (file)
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
-import Select from 'react-select';
 import { sortBy } from 'lodash';
 import { getImporters, createQualityProfile } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -108,12 +108,7 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
     );
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="create-profile-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index b63924e5a28c66444213851c74aad68fe90db2a9..50a87cbb9d40eda4f8c818ca425f6f979672ab8c 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { restoreQualityProfile } from '../../../api/quality-profiles';
+import Modal from '../../../components/controls/Modal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 interface Props {
@@ -90,12 +90,7 @@ export default class RestoreProfileForm extends React.PureComponent<Props, State
     const { loading, profile, ruleFailures, ruleSuccesses } = this.state;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="restore-profile-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index 563b0dc59a13d75f7369ccfe92456ba21810c83b..058957ce8067f7faa5002d5c97706fbd0f2b017d 100644 (file)
@@ -19,8 +19,8 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
 import { getSettingValue, isEmptyValue, getDefaultValue } from '../utils';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -57,12 +57,7 @@ export default class DefinitionDefaults extends React.PureComponent {
   renderModal() {
     const header = translate('settings.reset_confirm.title');
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.handleClose}>
+      <Modal contentLabel={header} onRequestClose={this.handleClose}>
         <header className="modal-head">
           <h2>{header}</h2>
         </header>
index 0b5d5bf25ec32cb30f2123323361f836ee3f2051..ea571c18707dc79d2e47e3c59700bfe62d6b3562 100644 (file)
@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
+import Select from '../../../../components/controls/Select';
 import { defaultInputPropTypes } from '../../propTypes';
 
 export default class InputForSingleSelectList extends React.PureComponent {
index e51293ea746833c05ed0ad6cb08fbf02d3d69ad5..db056125f928d3d79a58bacb493a960bcf75ace8 100644 (file)
@@ -19,7 +19,6 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import Select from 'react-select';
 import InputForSingleSelectList from '../InputForSingleSelectList';
 
 it('should render Select', () => {
@@ -32,7 +31,7 @@ it('should render Select', () => {
       isDefault={false}
       onChange={onChange}
     />
-  ).find(Select);
+  ).find('Select');
   expect(select.length).toBe(1);
   expect(select.prop('name')).toBe('foo');
   expect(select.prop('value')).toBe('bar');
@@ -54,7 +53,7 @@ it('should call onChange', () => {
       isDefault={false}
       onChange={onChange}
     />
-  ).find(Select);
+  ).find('Select');
   expect(select.length).toBe(1);
   expect(select.prop('onChange')).toBeTruthy();
 
index 932f008b324ea13356406e9c5d5e0da94a69c773..2ed5a1a19809d275b337d6e8585105fdb92eec7f 100644 (file)
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import { setLogLevel } from '../../../api/system';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 import { LOGS_LEVELS } from '../utils';
 
@@ -65,12 +65,7 @@ export default class ChangeLogLevelForm extends React.PureComponent<Props, State
     const { updating, newLevel } = this.state;
     const header = translate('system.set_log_level');
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="set-log-level-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
index a3cd26a208b23c8e395f5e77e7f1852fc4b69996..0c857453ed933c64832677e63458913f43975177 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`should display some warning messages for non INFO levels 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="system.set_log_level"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="set-log-level-form"
@@ -124,19 +113,8 @@ exports[`should display some warning messages for non INFO levels 1`] = `
 
 exports[`should render correctly 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="system.set_log_level"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <form
     id="set-log-level-form"
index d69ff53c19bcce3f9df90f65002f4328f20782c5..b635073480b6bd66e55f76c6877c3765b08420d2 100644 (file)
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
 import SystemUpgradeItem from './SystemUpgradeItem';
 import { SystemUpgrade } from '../../../../api/system';
+import Modal from '../../../../components/controls/Modal';
 import { translate } from '../../../../helpers/l10n';
 
 interface Props {
@@ -46,12 +46,7 @@ export default class SystemUpgradeForm extends React.PureComponent<Props, State>
     const { systemUpgrades } = this.props;
     const header = translate('system.system_upgrade');
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <div className="modal-head">
           <h2>{header}</h2>
         </div>
index 86dfdda674a84a2b9fbe847af9e740764e34d190..2530d3b3b8d15efd58000ba345b131e733b0c1ad 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`should display correctly 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel="system.system_upgrade"
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div
     className="modal-head"
index de339bd70cb37f1ddbea44b51001ae31a322d679..4e238e03944c1ff8d7212f116b20726c2832dd08 100644 (file)
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import Modal from 'react-modal';
+import Modal from '../../../components/controls/Modal';
 import { translate } from '../../../helpers/l10n';
 
 /*::
@@ -58,11 +58,7 @@ export default class OnboardingModal extends React.PureComponent {
     const { OnboardingContainer } = this.state;
 
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={translate('tutorials.onboarding')}
-        className="modal modal-large"
-        overlayClassName="modal-overlay">
+      <Modal contentLabel={translate('tutorials.onboarding')} large={true}>
         {OnboardingContainer != null && <OnboardingContainer onFinish={this.props.onFinish} />}
       </Modal>
     );
index c890c3d9b380b16f17ae9cfffad3ff87ce738587..e5b5c49ed82c4aff7b79a6b75e8742ac60511875 100644 (file)
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import Step from './Step';
 import NewOrganizationForm from './NewOrganizationForm';
 import { getMyOrganizations } from '../../../api/organizations';
+import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 
 /*::
index 1ab750da304bc2cc85f094d0eb8a94339ceb462a..5dadb7c0c949d59c22a7159c9096f0cd3797087b 100644 (file)
@@ -63,7 +63,11 @@ it('works with existing organization', () => {
   );
   return doAsync(() => {
     click(wrapper.find('.js-existing'));
-    wrapper.find('Select').prop('onChange')({ value: 'another' });
+    expect(wrapper).toMatchSnapshot();
+    wrapper
+      .find('Select')
+      .first()
+      .prop('onChange')({ value: 'another' });
     click(wrapper.find('.js-continue'));
     expect(onContinue).toBeCalledWith('another');
   });
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationStep-test.js.snap
new file mode 100644 (file)
index 0000000..48a5505
--- /dev/null
@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`works with existing organization 1`] = `
+<OrganizationStep
+  currentUser={
+    Object {
+      "isLoggedIn": true,
+      "login": "user",
+    }
+  }
+  finished={false}
+  onContinue={[Function]}
+  onOpen={[Function]}
+  open={true}
+  stepNumber={1}
+>
+  <Step
+    finished={false}
+    onOpen={[Function]}
+    open={true}
+    renderForm={[Function]}
+    renderResult={[Function]}
+    stepNumber={1}
+    stepTitle="onboarding.organization.header"
+  >
+    <div
+      className="boxed-group onboarding-step is-open"
+    >
+      <div
+        className="onboarding-step-number"
+      >
+        1
+      </div>
+      <div
+        className="boxed-group-header"
+      >
+        <h2>
+          onboarding.organization.header
+        </h2>
+      </div>
+      <div
+        className="boxed-group-inner"
+      >
+        <div
+          className="big-spacer-bottom width-50"
+        >
+          onboarding.organization.text
+        </div>
+        <div>
+          <div
+            className="big-spacer-top"
+          >
+            <a
+              className="js-existing link-base-color link-no-underline"
+              href="#"
+              onClick={[Function]}
+            >
+              <i
+                className="icon-radio spacer-right is-checked"
+              />
+              onboarding.organization.exising_organization
+            </a>
+            <div
+              className="big-spacer-top"
+            >
+              <Select
+                className="input-super-large"
+                clearable={false}
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "label": "another",
+                      "value": "another",
+                    },
+                    Object {
+                      "label": "user",
+                      "value": "user",
+                    },
+                  ]
+                }
+              >
+                <Select
+                  addLabelText="Add \\"{label}\\"?"
+                  arrowRenderer={[Function]}
+                  autosize={true}
+                  backspaceRemoves={true}
+                  backspaceToRemoveMessage="Press backspace to remove {label}"
+                  className="input-super-large"
+                  clearAllText="Clear all"
+                  clearRenderer={[Function]}
+                  clearValueText="Clear value"
+                  clearable={false}
+                  closeOnSelect={true}
+                  deleteRemoves={true}
+                  delimiter=","
+                  disabled={false}
+                  escapeClearsValue={true}
+                  filterOptions={[Function]}
+                  ignoreAccents={true}
+                  ignoreCase={true}
+                  inputProps={Object {}}
+                  isLoading={false}
+                  joinValues={false}
+                  labelKey="label"
+                  matchPos="any"
+                  matchProp="any"
+                  menuBuffer={0}
+                  menuRenderer={[Function]}
+                  multi={false}
+                  noResultsText="No results found"
+                  onBlurResetsInput={true}
+                  onChange={[Function]}
+                  onCloseResetsInput={true}
+                  onSelectResetsInput={true}
+                  openOnClick={true}
+                  optionComponent={[Function]}
+                  options={
+                    Array [
+                      Object {
+                        "label": "another",
+                        "value": "another",
+                      },
+                      Object {
+                        "label": "user",
+                        "value": "user",
+                      },
+                    ]
+                  }
+                  pageSize={5}
+                  placeholder="Select..."
+                  required={false}
+                  scrollMenuIntoView={true}
+                  searchable={true}
+                  simpleValue={false}
+                  tabSelectsValue={true}
+                  valueComponent={[Function]}
+                  valueKey="value"
+                >
+                  <div
+                    className="Select input-super-large Select--single is-searchable"
+                  >
+                    <div
+                      className="Select-control"
+                      onKeyDown={[Function]}
+                      onMouseDown={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                    >
+                      <span
+                        className="Select-multi-value-wrapper"
+                        id="react-select-2--value"
+                      >
+                        <div
+                          className="Select-placeholder"
+                        >
+                          Select...
+                        </div>
+                        <AutosizeInput
+                          aria-activedescendant="react-select-2--value"
+                          aria-expanded="false"
+                          aria-haspopup="false"
+                          aria-owns=""
+                          className="Select-input"
+                          minWidth="5"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          role="combobox"
+                          value=""
+                        >
+                          <div
+                            className="Select-input"
+                            style={
+                              Object {
+                                "display": "inline-block",
+                              }
+                            }
+                          >
+                            <style
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "input#undefined::-ms-clear {display: none;}",
+                                }
+                              }
+                            />
+                            <input
+                              aria-activedescendant="react-select-2--value"
+                              aria-expanded="false"
+                              aria-haspopup="false"
+                              aria-owns=""
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              required={false}
+                              role="combobox"
+                              style={
+                                Object {
+                                  "boxSizing": "content-box",
+                                  "width": "5px",
+                                }
+                              }
+                              value=""
+                            />
+                            <div
+                              style={
+                                Object {
+                                  "height": 0,
+                                  "left": 0,
+                                  "overflow": "scroll",
+                                  "position": "absolute",
+                                  "top": 0,
+                                  "visibility": "hidden",
+                                  "whiteSpace": "pre",
+                                }
+                              }
+                            />
+                          </div>
+                        </AutosizeInput>
+                      </span>
+                      <span
+                        className="Select-arrow-zone"
+                        onMouseDown={[Function]}
+                      >
+                        <span
+                          className="Select-arrow"
+                          onMouseDown={[Function]}
+                        />
+                      </span>
+                    </div>
+                  </div>
+                </Select>
+              </Select>
+            </div>
+          </div>
+          <div
+            className="big-spacer-top"
+          >
+            <a
+              className="js-new link-base-color link-no-underline"
+              href="#"
+              onClick={[Function]}
+            >
+              <i
+                className="icon-radio spacer-right"
+              />
+              onboarding.organization.create_another_organization
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Step>
+</OrganizationStep>
+`;
index de77c5ed23b1a9f2a949b322311ec6215fbd1f2f..b22877a618e71ba3321c04654e7e8ddc81c88993 100644 (file)
@@ -19,8 +19,8 @@
  */
 //@flow
 import React from 'react';
-import Select from 'react-select';
 import { debounce } from 'lodash';
+import Select from '../../../components/controls/Select';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import UsersSelectSearchOption from './UsersSelectSearchOption';
 import UsersSelectSearchValue from './UsersSelectSearchValue';
index 900354c4376084a1749d3351dee186fe5a952226..49fe6648294409982fb0fd9892021f33794ca223 100644 (file)
@@ -2,49 +2,17 @@
 
 exports[`should render correctly 1`] = `
 <Select
-  addLabelText="Add \\"{label}\\"?"
-  arrowRenderer={[Function]}
-  autosize={true}
-  backspaceRemoves={true}
-  backspaceToRemoveMessage="Press backspace to remove {label}"
   className="Select-big"
-  clearAllText="Clear all"
-  clearRenderer={[Function]}
-  clearValueText="Clear value"
   clearable={false}
-  closeOnSelect={true}
-  deleteRemoves={true}
-  delimiter=","
-  disabled={false}
-  escapeClearsValue={true}
-  filterOptions={[Function]}
-  ignoreAccents={true}
-  ignoreCase={true}
-  inputProps={Object {}}
   isLoading={false}
-  joinValues={false}
   labelKey="name"
-  matchPos="any"
-  matchProp="any"
-  menuBuffer={0}
-  menuRenderer={[Function]}
-  multi={false}
   noResultsText="no_results"
-  onBlurResetsInput={true}
   onChange={[Function]}
-  onCloseResetsInput={true}
   onInputChange={[Function]}
-  onSelectResetsInput={true}
-  openOnClick={true}
   optionComponent={[Function]}
   options={Array []}
-  pageSize={5}
   placeholder=""
-  required={false}
-  scrollMenuIntoView={true}
   searchable={true}
-  simpleValue={false}
-  tabSelectsValue={true}
   value={
     Object {
       "avatar": "7daf6c79d4802916d83f6266e24850af",
@@ -74,40 +42,13 @@ Array [
 
 exports[`should render correctly 3`] = `
 <Select
-  addLabelText="Add \\"{label}\\"?"
-  arrowRenderer={[Function]}
-  autosize={true}
-  backspaceRemoves={true}
-  backspaceToRemoveMessage="Press backspace to remove {label}"
   className="Select-big"
-  clearAllText="Clear all"
-  clearRenderer={[Function]}
-  clearValueText="Clear value"
   clearable={false}
-  closeOnSelect={true}
-  deleteRemoves={true}
-  delimiter=","
-  disabled={false}
-  escapeClearsValue={true}
-  filterOptions={[Function]}
-  ignoreAccents={true}
-  ignoreCase={true}
-  inputProps={Object {}}
   isLoading={false}
-  joinValues={false}
   labelKey="name"
-  matchPos="any"
-  matchProp="any"
-  menuBuffer={0}
-  menuRenderer={[Function]}
-  multi={false}
   noResultsText="no_results"
-  onBlurResetsInput={true}
   onChange={[Function]}
-  onCloseResetsInput={true}
   onInputChange={[Function]}
-  onSelectResetsInput={true}
-  openOnClick={true}
   optionComponent={[Function]}
   options={
     Array [
@@ -123,13 +64,8 @@ exports[`should render correctly 3`] = `
       },
     ]
   }
-  pageSize={5}
   placeholder=""
-  required={false}
-  scrollMenuIntoView={true}
   searchable={true}
-  simpleValue={false}
-  tabSelectsValue={true}
   value={
     Object {
       "avatar": "7daf6c79d4802916d83f6266e24850af",
index ea72ec344780e4e2e9930b21e34a269522090d3a..ccccc430fa6d6a85bfb603085ca56cff25e8d32e 100644 (file)
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import * as classNames from 'classnames';
-import * as Modal from 'react-modal';
 import { restartAndWait } from '../../api/system';
+import Modal from '../../components/controls/Modal';
 import { translate } from '../../helpers/l10n';
 
 interface Props {
@@ -54,12 +54,7 @@ export default class RestartForm extends React.PureComponent<Props, State> {
     const { restarting } = this.state;
     const header = translate('system.restart_server');
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={restarting ? undefined : this.props.onClose}>
+      <Modal contentLabel={header} onRequestClose={restarting ? undefined : this.props.onClose}>
         <form id="restart-form" onSubmit={this.handleFormSubmit}>
           <div className="modal-head">
             <h2>{header}</h2>
diff --git a/server/sonar-web/src/main/js/components/controls/Modal.tsx b/server/sonar-web/src/main/js/components/controls/Modal.tsx
new file mode 100644 (file)
index 0000000..5629086
--- /dev/null
@@ -0,0 +1,42 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import * as ReactModal from 'react-modal';
+import * as classNames from 'classnames';
+
+interface OwnProps {
+  medium?: boolean;
+  large?: boolean;
+}
+
+type MandatoryProps = Pick<ReactModal.Props, 'contentLabel'>;
+
+type Props = Partial<ReactModal.Props> & MandatoryProps & OwnProps;
+
+export default function Modal(props: Props) {
+  return (
+    <ReactModal
+      className={classNames('modal', { 'modal-medium': props.medium, 'modal-large': props.large })}
+      isOpen={true}
+      overlayClassName="modal-overlay"
+      {...props}
+    />
+  );
+}
index 496f039ca82a49af0c1dea183823ef9f6508000b..0fbe8ff9f58774c2269ad9fa8cff08f88b4f5b20 100644 (file)
@@ -19,8 +19,8 @@
  */
 // @flow
 import React from 'react';
-import Select from 'react-select';
 import { debounce } from 'lodash';
+import Select from '../../components/controls/Select';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 
 /*::
diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
new file mode 100644 (file)
index 0000000..406c81f
--- /dev/null
@@ -0,0 +1,42 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import ReactSelect, {
+  Creatable as ReactCreatable,
+  Async,
+  ReactSelectProps,
+  ReactCreatableSelectProps,
+  ReactAsyncSelectProps
+} from 'react-select';
+import './react-select.css';
+
+export default function Select(props: ReactSelectProps) {
+  // TODO try to define good defaults, if any
+  return <ReactSelect {...props} />;
+}
+
+export function Creatable(props: ReactCreatableSelectProps) {
+  return <ReactCreatable {...props} />;
+}
+
+// TODO figure out why `ref` prop is incompatible
+export function AsyncSelect(props: ReactAsyncSelectProps & { ref: any }) {
+  return <Async {...props} />;
+}
index 057fdf5b323c1b194c5881a6e3ee5c71fc96464f..6e46446de6d08987f506466493c1c2f810a6b2e9 100644 (file)
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import * as Modal from 'react-modal';
+import Modal from '../../components/controls/Modal';
 
 export interface ChildrenProps {
   onCloseClick: (event: React.SyntheticEvent<HTMLElement>) => void;
@@ -73,12 +73,7 @@ export default class SimpleModal extends React.PureComponent<Props, State> {
 
   render() {
     return (
-      <Modal
-        isOpen={true}
-        contentLabel={this.props.header}
-        className="modal"
-        overlayClassName="modal-overlay"
-        onRequestClose={this.props.onClose}>
+      <Modal contentLabel={this.props.header} onRequestClose={this.props.onClose}>
         {this.props.children({
           onCloseClick: this.handleCloseClick,
           onSubmitClick: this.handleSubmitClick,
index 7013269949a8355d7f7553188bdc99feae753684..0aae3eb746673c3f30c4704fae042ff79009500a 100644 (file)
@@ -2,54 +2,18 @@
 
 exports[`should render Select 1`] = `
 <Select
-  addLabelText="Add \\"{label}\\"?"
-  arrowRenderer={[Function]}
   autofocus={true}
-  autosize={true}
-  backspaceRemoves={true}
-  backspaceToRemoveMessage="Press backspace to remove {label}"
   cache={false}
   className="input-super-large"
-  clearAllText="Clear all"
-  clearRenderer={[Function]}
-  clearValueText="Clear value"
   clearable={false}
-  closeOnSelect={true}
-  deleteRemoves={true}
-  delimiter=","
-  disabled={false}
-  escapeClearsValue={true}
   filterOption={[Function]}
-  filterOptions={[Function]}
-  ignoreAccents={true}
-  ignoreCase={true}
-  inputProps={Object {}}
   isLoading={false}
-  joinValues={false}
-  labelKey="label"
-  matchPos="any"
-  matchProp="any"
-  menuBuffer={0}
-  menuRenderer={[Function]}
-  multi={false}
   noResultsText="select2.tooShort.2"
   onBlur={[Function]}
-  onBlurResetsInput={true}
   onChange={[Function]}
-  onCloseResetsInput={true}
   onInputChange={[Function]}
-  onSelectResetsInput={true}
-  openOnClick={true}
-  optionComponent={[Function]}
   options={Array []}
-  pageSize={5}
   placeholder="search_verb"
-  required={false}
-  scrollMenuIntoView={true}
   searchable={true}
-  simpleValue={false}
-  tabSelectsValue={true}
-  valueComponent={[Function]}
-  valueKey="value"
 />
 `;
index ea433bf1532e53e82144f1a461fec37571d22189..07abfb6a57367395eb4413997eb9191e45dc6fdc 100644 (file)
@@ -2,19 +2,8 @@
 
 exports[`renders 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel=""
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <div />
 </Modal>
@@ -22,19 +11,8 @@ exports[`renders 1`] = `
 
 exports[`submits 1`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel=""
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <button
     disabled={false}
@@ -47,19 +25,8 @@ exports[`submits 1`] = `
 
 exports[`submits 2`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel=""
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <button
     disabled={true}
@@ -72,19 +39,8 @@ exports[`submits 2`] = `
 
 exports[`submits 3`] = `
 <Modal
-  ariaHideApp={true}
-  bodyOpenClassName="ReactModal__Body--open"
-  className="modal"
-  closeTimeoutMS={0}
   contentLabel=""
-  isOpen={true}
   onRequestClose={[Function]}
-  overlayClassName="modal-overlay"
-  parentSelector={[Function]}
-  portalClassName="ReactModalPortal"
-  shouldCloseOnEsc={true}
-  shouldCloseOnOverlayClick={true}
-  shouldFocusAfterRender={true}
 >
   <button
     disabled={false}
diff --git a/server/sonar-web/src/main/js/components/controls/react-select.css b/server/sonar-web/src/main/js/components/controls/react-select.css
new file mode 100644 (file)
index 0000000..3d3816e
--- /dev/null
@@ -0,0 +1,459 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.Select {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--smallFontSize);
+  text-align: left;
+}
+
+.Select,
+.Select div,
+.Select input,
+.Select span {
+  box-sizing: border-box;
+}
+
+.Select.is-disabled > .Select-control {
+  background-color: #f9f9f9;
+}
+
+.Select.is-disabled > .Select-control:hover {
+  box-shadow: none;
+}
+
+.Select.is-disabled .Select-arrow-zone {
+  cursor: default;
+  pointer-events: none;
+}
+
+.Select-control {
+  position: relative;
+  display: table;
+  width: 100%;
+  height: var(--controlHeight);
+  border: 1px solid var(--gray80);
+  border-collapse: separate;
+  border-radius: 2px;
+  background-color: #fff;
+  color: var(--baseFontColor);
+  cursor: default;
+  outline: none;
+  overflow: hidden;
+}
+
+.is-searchable.is-open > .Select-control {
+  cursor: text;
+}
+
+.is-open > .Select-control {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background: #fff;
+}
+
+.is-open > .Select-control > .Select-arrow {
+  border-color: transparent transparent #999;
+  border-width: 0 5px 5px;
+}
+
+.is-searchable.is-focused:not(.is-open) > .Select-control {
+  cursor: text;
+}
+
+.is-focused:not(.is-open) > .Select-control {
+  border-color: var(--blue);
+}
+
+.Select-placeholder,
+:not(.Select--multi) > .Select-control .Select-value {
+  bottom: 0;
+  left: 0;
+  line-height: 23px;
+  padding-left: 8px;
+  padding-right: 24px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.Select-value svg,
+.Select-value [class^='icon-'] {
+  padding-top: 5px;
+}
+
+.Select-value img {
+  padding-top: 3px;
+}
+
+.Select-option svg,
+.Select-option img,
+.Select-option [class^='icon-'] {
+  padding-top: 2px;
+}
+
+.has-value:not(.Select--multi) > .Select-control > .Select-value .Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi)
+  > .Select-control
+  > .Select-value
+  .Select-value-label {
+  color: var(--baseFontColor);
+}
+
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
+.has-value.is-pseudo-focused:not(.Select--multi)
+  > .Select-control
+  > .Select-value
+  a.Select-value-label {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:hover,
+.has-value.is-pseudo-focused:not(.Select--multi)
+  > .Select-control
+  > .Select-value
+  a.Select-value-label:hover,
+.has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label:focus,
+.has-value.is-pseudo-focused:not(.Select--multi)
+  > .Select-control
+  > .Select-value
+  a.Select-value-label:focus {
+  color: #007eff;
+  outline: none;
+  text-decoration: underline;
+}
+
+.Select-input {
+  vertical-align: top;
+  height: 22px;
+  padding-left: 8px;
+  padding-right: 8px;
+  outline: none;
+}
+
+.Select-input > input {
+  background: none transparent;
+  border: 0 none;
+  cursor: default;
+  display: inline-block;
+  font-family: inherit;
+  font-size: var(--smallFontSize);
+  height: 22px;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  -webkit-appearance: none;
+}
+
+.is-focused .Select-input > input {
+  cursor: text;
+}
+
+.has-value.is-pseudo-focused .Select-input {
+  opacity: 0;
+}
+
+.Select-control:not(.is-searchable) > .Select-input {
+  outline: none;
+}
+
+.Select-loading-zone {
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: 16px;
+}
+
+.Select-loading {
+  -webkit-animation: Select-animation-spin 400ms infinite linear;
+  -o-animation: Select-animation-spin 400ms infinite linear;
+  animation: Select-animation-spin 400ms infinite linear;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  border-right-color: var(--baseFontColor);
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.Select-clear-zone {
+  -webkit-animation: Select-animation-fadeIn 200ms;
+  -o-animation: Select-animation-fadeIn 200ms;
+  animation: Select-animation-fadeIn 200ms;
+  color: #999;
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: 9px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.Select-clear-zone:hover .Select-clear {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDIzMSwyMCw1Nik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgIDwvZz48L3N2Zz4=);
+}
+
+.Select-clear {
+  display: block;
+  width: 9px;
+  height: 9px;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC4wMjM0Mzc1LDAsMCwwLjAyMzQzNzUsLTUuMDE1NjIsLTUuMDE1NjIpIj4gICAgICAgIDxwYXRoIGQ9Ik04MTAsMjc0TDU3Miw1MTJMODEwLDc1MEw3NTAsODEwTDUxMiw1NzJMMjc0LDgxMEwyMTQsNzUwTDQ1Miw1MTJMMjE0LDI3NEwyNzQsMjE0TDUxMiw0NTJMNzUwLDIxNEw4MTAsMjc0WiIgc3R5bGU9ImZpbGw6cmdiKDE1MywxNTMsMTUzKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4gICAgPC9nPjwvc3ZnPg==);
+  background-size: 9px 9px;
+  text-indent: -9999px;
+}
+
+.Select--multi .Select-clear-zone {
+  width: 17px;
+}
+
+.Select-arrow-zone {
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: 20px;
+  padding-right: 5px;
+}
+
+.Select-arrow {
+  border-color: #999 transparent transparent;
+  border-style: solid;
+  border-width: 4px 4px 2px;
+  display: inline-block;
+  height: 0;
+  width: 0;
+}
+
+.is-open .Select-arrow,
+.Select-arrow-zone:hover > .Select-arrow {
+  border-top-color: #666;
+}
+
+@-webkit-keyframes Select-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes Select-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.Select-menu-outer {
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-top-color: var(--barBorderColor);
+  box-sizing: border-box;
+  margin-top: -1px;
+  max-height: 200px;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: var(--dropdownMenuZIndex);
+  -webkit-overflow-scrolling: touch;
+  box-shadow: var(--defaultShadow);
+}
+
+.Select-menu {
+  max-height: 198px;
+  padding: 5px 0;
+  overflow-y: auto;
+}
+
+.Select-option {
+  display: block;
+  line-height: 20px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  color: var(--baseFontColor);
+  font-size: var(--smallFontSize);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Select-option:last-child {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.Select-option.is-focused {
+  background-color: var(--barBackgroundColor);
+}
+
+.Select-option.is-disabled {
+  font-weight: 600;
+  cursor: default;
+}
+
+.Select-noresults {
+  box-sizing: border-box;
+  color: #999;
+  cursor: default;
+  display: block;
+  padding: 8px 10px;
+}
+
+.Select--multi .Select-value {
+  background-color: rgba(0, 126, 255, 0.08);
+  border-radius: 2px;
+  border: 1px solid rgba(0, 126, 255, 0.24);
+  color: var(--baseFontColor);
+  display: inline-block;
+  font-size: var(--smallFontSize);
+  line-height: 14px;
+  margin: 1px 4px 1px 1px;
+  vertical-align: top;
+}
+
+.Select-value-label {
+  font-size: var(--smallFontSize);
+}
+
+.is-searchable.is-open .Select-value-label {
+  opacity: 0.5;
+}
+
+.Select-big .Select-control {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.Select-big .Select-placeholder {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.Select-big .Select-value-label {
+  display: inline-block;
+  margin-top: 7px;
+  line-height: 16px;
+}
+
+.Select-big .Select-option {
+  padding: 7px 8px;
+  line-height: 16px;
+}
+
+.Select-big img,
+.Select-big svg {
+  padding-top: 0;
+}
+
+.Select--multi .Select-value-icon,
+.Select--multi .Select-value-label {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.Select--multi .Select-value-label {
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  cursor: default;
+  padding: 2px 5px;
+}
+
+.Select--multi a.Select-value-label {
+  color: #007eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.Select--multi a.Select-value-label:hover {
+  text-decoration: underline;
+}
+
+.Select--multi .Select-value-icon {
+  cursor: pointer;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  border-right: 1px solid rgba(0, 126, 255, 0.24);
+  padding: 1px 5px 3px;
+}
+
+.Select--multi .Select-value-icon:hover,
+.Select--multi .Select-value-icon:focus {
+  background-color: rgba(0, 113, 230, 0.08);
+  color: #0071e6;
+}
+
+.Select--multi .Select-value-icon:active {
+  background-color: rgba(0, 126, 255, 0.24);
+}
+
+.Select--multi.is-disabled .Select-value {
+  background-color: #fcfcfc;
+  border: 1px solid #e3e3e3;
+  color: var(--baseFontColor);
+}
+
+.Select--multi.is-disabled .Select-value-icon {
+  cursor: not-allowed;
+  border-right: 1px solid #e3e3e3;
+}
+
+.Select--multi.is-disabled .Select-value-icon:hover,
+.Select--multi.is-disabled .Select-value-icon:focus,
+.Select--multi.is-disabled .Select-value-icon:active {
+  background-color: #fcfcfc;
+}
+
+.Select-aria-only {
+  display: none;
+}
+
+@keyframes Select-animation-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@-webkit-keyframes Select-animation-spin {
+  to {
+    -webkit-transform: rotate(1turn);
+  }
+}