.setRequired(true)
.setMaximumLength(100)
.setDescription("Setting key")
- .setPossibleValues("notifications.optOut", UserUpdater.NOTIFICATIONS_READ_DATE, "organizations.members.dismissSyncNotif");
+ .setPossibleValues("notifications.optOut", UserUpdater.NOTIFICATIONS_READ_DATE);
action.createParam(PARAM_VALUE)
.setRequired(true)
.setParam("value", "true")
.execute();
- ws.newRequest()
- .setParam("key", "organizations.members.dismissSyncNotif")
- .setParam("value", "org1,org2")
- .execute();
-
assertThat(db.getDbClient().userPropertiesDao().selectByUser(db.getSession(), user))
.extracting(UserPropertyDto::getKey, UserPropertyDto::getValue)
.containsExactlyInAnyOrder(
tuple("notifications.readDate", "1234"),
- tuple("notifications.optOut", "true"),
- tuple("organizations.members.dismissSyncNotif", "org1,org2"));
+ tuple("notifications.optOut", "true"));
}
@Test
assertThat(definition.param("key").possibleValues()).containsExactlyInAnyOrder(
"notifications.optOut",
- "notifications.readDate",
- "organizations.members.dismissSyncNotif");
+ "notifications.readDate");
}
}
<OnboardingModal
onClose={this.closeOnboarding}
onOpenProjectOnboarding={this.openProjectOnboarding}
- skipOnboarding={this.props.skipOnboarding}
/>
)}
</OnboardingContext.Provider>
background-color: #fff;
opacity: 0;
transition: all 0.2s ease;
-}
-
-.modal.sonarcloud {
border-radius: 3px;
}
opacity: 1;
}
+.modal-small {
+ width: 450px;
+ margin-left: -225px;
+}
+
.modal-medium {
width: 830px;
margin-left: -415px;
margin-right: var(--sbw);
}
-.modal-container {
- max-height: 60vh;
- padding: 10px;
- box-sizing: border-box;
- overflow: auto;
-}
-
-.modal.sonarcloud .modal-container {
- border-top: 1px solid var(--barBorderColor);
- margin-top: var(--pagePadding);
-}
-
-.modal.sonarcloud .modal-container > :last-child {
- margin-bottom: var(--pagePadding);
-}
-
.modal-head {
- padding: 0 10px;
- background-color: var(--gray94);
- border-bottom: 1px solid var(--disableGrayBorder);
-}
-
-.modal.sonarcloud .modal-head {
- background-color: transparent;
- border-bottom: none;
- padding: var(--pagePadding) calc(2 * var(--pagePadding)) 0;
+ padding: calc(4 * var(--gridSize));
+ padding-bottom: 0;
}
.modal-head h1,
.modal-head h2 {
- line-height: 30px;
- min-height: 30px;
-}
-
-.modal.sonarcloud .modal-head h1,
-.modal.sonarcloud .modal-head h2 {
- margin-top: var(--gridSize);
+ margin: 0;
font-size: var(--bigFontSize);
font-weight: bold;
- line-height: 30px;
+ line-height: normal;
}
.modal-body {
- padding: 10px;
+ padding: var(--pagePadding) calc(4 * var(--gridSize));
}
-.modal.sonarcloud .modal-body {
- padding: var(--pagePadding) calc(2 * var(--pagePadding));
+.modal-container {
+ max-height: 60vh;
+ box-sizing: border-box;
+ overflow-y: scroll;
+ border-top: 1px solid var(--barBorderColor);
+ margin-top: var(--pagePadding);
+ padding-right: calc(4 * var(--gridSize) - var(--sbw));
+}
+
+.modal-container > :last-child {
+ margin-bottom: var(--pagePadding);
}
.modal-field,
-.modal-large-field,
.modal-validation-field {
clear: both;
display: block;
- padding: 5px 0 5px 130px;
-}
-
-.modal-large-field {
- padding: 20px 40px;
-}
-
-.modal-validation-field {
- padding: 3px 0 3px 130px;
+ padding: 0;
+ margin-bottom: calc(var(--gridSize) * 2);
}
.modal-field label,
.modal-validation-field label {
- position: relative;
- left: -140px;
display: block;
- float: left;
- width: 120px;
- margin-right: -130px;
- padding-top: 5px;
- padding-bottom: 2px;
- padding-left: 10px;
- line-height: 1;
- text-align: right;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.modal-large-field label {
- display: inline-block;
- padding-bottom: 15px;
font-weight: bold;
-}
-
-.modal-field .note {
- line-height: var(--controlHeight);
-}
-
-.readonly-field {
- padding-top: 5px;
- margin-left: -5px;
- line-height: 1;
+ padding-bottom: calc(var(--gridSize) / 2);
}
.modal-field a.icon-checkbox,
.modal-field input,
-.modal-large-field input,
.modal-field select,
-.modal-large-field select,
.modal-field textarea,
-.modal-large-field textarea,
-.modal-field .Select,
-.modal-large-field .Select {
+.modal-field .Select {
margin-right: 5px;
- margin-bottom: 10px;
}
.modal-field a.icon-checkbox {
}
.modal-field input[type='radio'],
-.modal-large-field input[type='radio'],
-.modal-field input[type='checkbox'],
-.modal-large-field input[type='checkbox'] {
+.modal-field input[type='checkbox'] {
margin-top: 5px;
margin-bottom: 4px;
}
-.modal-field > .icon-checkbox,
-.modal-large-field > .icon-checkbox {
+.modal-field > .icon-checkbox {
padding-top: 6px;
padding-right: 8px;
}
.modal-field textarea,
.modal-field select,
.modal-field .Select {
- width: 250px;
-}
-
-.modal-field textarea {
- max-width: 250px;
- min-width: 250px;
- max-height: 50vh;
- min-height: var(--controlHeight);
-}
-
-.modal-large-field input[type='text'],
-.modal-large-field input[type='email'],
-.modal-large-field input[type='password'],
-.modal-large-field textarea,
-.modal-large-field select,
-.modal-large-field .Select {
width: 100%;
}
-.modal-large-field textarea {
- max-width: 100%;
- min-width: 100%;
- max-height: 50vh;
- min-height: var(--controlHeight);
-}
-
.modal-validation-field input,
.modal-validation-field textarea,
.modal-validation-field .Select {
- margin-right: 5px;
+ margin-right: var(--gridSize);
margin-bottom: 2px;
- width: 250px;
+ width: calc(100% - 3 * var(--gridSize));
}
+.modal-field textarea,
.modal-validation-field textarea {
- max-width: 250px;
- min-width: 250px;
+ max-width: 100%;
+ min-width: 100%;
max-height: 50vh;
min-height: var(--controlHeight);
}
-
.modal-validation-field input:not(.is-invalid),
.modal-validation-field .Select:not(.is-invalid) {
- margin-bottom: 18px;
+ margin-bottom: calc(var(--tinyControlHeight) + 2px);
}
.modal-field-description {
- padding-bottom: 4px;
line-height: 1.4;
color: var(--secondFontColor);
font-size: var(--smallFontSize);
overflow: hidden;
text-overflow: ellipsis;
-}
-
-.modal-validation-field .modal-field-description {
margin-top: 2px;
}
.modal-foot {
- padding: 10px;
- border-top: 1px solid var(--disableGrayBorder);
- background-color: var(--gray94);
- text-align: right;
-}
-
-.modal.sonarcloud .modal-foot {
- padding: var(--pagePadding);
+ padding: var(--pagePadding) calc(4 * var(--gridSize));
border-top: 1px solid var(--barBorderColor);
background-color: var(--barBackgroundColor);
border-radius: 3px;
+ text-align: right;
}
.modal-foot button,
font-family: inherit;
}
+textarea {
+ min-height: 40px;
+}
+
/*Remove button padding in FF*/
select::-moz-focus-inner,
input::-moz-focus-inner,
}
.input-super-large {
- width: 100%;
+ width: 100% !important;
max-width: 300px;
min-width: 200px;
}
-textarea.input-super-large {
- max-width: 600px;
- min-width: 300px;
-}
-
.input-ghost {
padding: 0 !important;
border: none !important;
.form-field {
clear: both;
display: block;
- padding-top: var(--gridSize);
padding-bottom: calc(2 * var(--gridSize));
}
.form-field label {
display: block;
- padding-bottom: var(--gridSize);
+ font-weight: bold;
+ padding-bottom: calc(var(--gridSize) / 2);
+}
+
+.form-field-description {
+ line-height: 1.4;
+ color: var(--secondFontColor);
+ font-size: var(--smallFontSize);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 2px;
+}
+
+.form-field input[type='text'],
+.form-field input[type='email'],
+.form-field input[type='password'],
+.form-field textarea,
+.form-field select,
+.form-field .Select {
+ width: 250px;
}
.radio-toggle {
font-size: var(--smallFontSize);
}
+.medium {
+ font-size: var(--mediumFontSize);
+}
+
.big {
font-size: var(--bigFontSize);
}
}
.text-normal {
- font-weight: normal;
+ font-weight: normal !important;
}
.text-muted {
value: string;
}
- type CurrentUserSettingNames =
- | 'notifications.optOut'
- | 'notifications.readDate'
- | 'organizations.members.dismissSyncNotif';
+ type CurrentUserSettingNames = 'notifications.optOut' | 'notifications.readDate';
export interface CustomMeasure {
createdAt?: string;
</Alert>
))}
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="old_password">
{translate('my_profile.password.old')}
<em className="mandatory">*</em>
type="password"
/>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="password">
{translate('my_profile.password.new')}
<em className="mandatory">*</em>
type="password"
/>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="password_confirmation">
{translate('my_profile.password.confirm')}
<em className="mandatory">*</em>
type="password"
/>
</div>
- <div className="modal-field">
+ <div className="form-field">
<SubmitButton id="change-password">
{translate('my_profile.password.submit')}
</SubmitButton>
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Password from '../Password';
+import { mockCurrentUser } from '../../../../helpers/testMocks';
+
+it('renders correctly', () => {
+ expect(shallow(<Password user={mockCurrentUser()} />)).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+ className="boxed-group"
+>
+ <h2
+ className="spacer-bottom"
+ >
+ my_profile.password.title
+ </h2>
+ <form
+ className="boxed-group-inner"
+ onSubmit={[Function]}
+ >
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="old_password"
+ >
+ my_profile.password.old
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ autoComplete="off"
+ id="old_password"
+ name="old_password"
+ required={true}
+ type="password"
+ />
+ </div>
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="password"
+ >
+ my_profile.password.new
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ autoComplete="off"
+ id="password"
+ name="password"
+ required={true}
+ type="password"
+ />
+ </div>
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="password_confirmation"
+ >
+ my_profile.password.confirm
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ autoComplete="off"
+ id="password_confirmation"
+ name="password_confirmation"
+ required={true}
+ type="password"
+ />
+ </div>
+ <div
+ className="form-field"
+ >
+ <SubmitButton
+ id="change-password"
+ >
+ my_profile.password.submit
+ </SubmitButton>
+ </div>
+ </form>
+</section>
+`;
const { scannerContext } = this.state;
return (
- <Modal contentLabel="scanner context" large={true} onRequestClose={this.props.onClose}>
+ <Modal contentLabel="scanner context" onRequestClose={this.props.onClose} size={'large'}>
<div className="modal-head">
<h2>
{translate('background_tasks.scanner_context')}
const { loading, stacktrace } = this.state;
return (
- <Modal contentLabel="stacktrace" large={true} onRequestClose={this.props.onClose}>
+ <Modal contentLabel="stacktrace" onRequestClose={this.props.onClose} size={'large'}>
<div className="modal-head">
<h2>
{translate('background_tasks.error_stacktrace')}
exports[`renders 1`] = `
<Modal
contentLabel="scanner context"
- large={true}
onRequestClose={[MockFunction]}
+ size="large"
>
<div
className="modal-head"
exports[`renders 1`] = `
<Modal
contentLabel="stacktrace"
- large={true}
onRequestClose={[MockFunction]}
+ size="large"
>
<div
className="modal-head"
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
import SeverityHelper from '../../../components/shared/SeverityHelper';
-import { activateRule, Profile as BaseProfile } from '../../../api/quality-profiles';
+import { activateRule, Profile } from '../../../api/quality-profiles';
import { SEVERITIES } from '../../../helpers/constants';
import { translate } from '../../../helpers/l10n';
import { sortProfiles } from '../../quality-profiles/utils';
onClose: () => void;
onDone: (severity: string) => Promise<void>;
organization: string | undefined;
- profiles: BaseProfile[];
+ profiles: Profile[];
rule: T.Rule | T.RuleDetails;
}
const isUpdateMode = !!activation;
return (
- <Modal contentLabel={this.props.modalHeader} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={this.props.modalHeader} onRequestClose={this.props.onClose} size="small">
<form onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{this.props.modalHeader}</h2>
<label title={param.key}>{param.key}</label>
{param.type === 'TEXT' ? (
<textarea
- className="width100"
disabled={submitting}
name={param.key}
onChange={this.handleParameterChange}
/>
) : (
<input
- className="input-super-large"
disabled={submitting}
name={param.key}
onChange={this.handleParameterChange}
*/
import * as React from 'react';
import { Query, serializeQuery } from '../query';
-import { Profile, bulkActivateRules, bulkDeactivateRules } from '../../../api/quality-profiles';
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
+import { Alert } from '../../../components/ui/Alert';
+import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { Profile, bulkActivateRules, bulkDeactivateRules } from '../../../api/quality-profiles';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { formatMeasure } from '../../../helpers/measures';
-import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
-import { Alert } from '../../../components/ui/Alert';
interface Props {
action: string;
: `${translate('coding_rules.deactivate_in_quality_profile')} (${formatMeasure(total, 'INT')} ${translate('coding_rules._rules')})`;
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form onSubmit={this.handleFormSubmit}>
<header className="modal-head">
<h2>{header}</h2>
</label>
</h3>
{profile ? (
- <h3 className="readonly-field">
+ <span>
{profile.name}
{' — '}
{translate('are_you_sure')}
- </h3>
+ </span>
) : (
this.renderProfileSelect()
)}
};
renderNameField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>
- {translate('name')} <em className="mandatory">*</em>
- </h3>
- </th>
- <td>
+ <div className="modal-field">
+ <label htmlFor="coding-rules-custom-rule-creation-name">
+ {translate('name')} <em className="mandatory">*</em>
+ </label>
+ <input
+ autoFocus={true}
+ disabled={this.state.submitting}
+ id="coding-rules-custom-rule-creation-name"
+ onChange={this.handleNameChange}
+ required={true}
+ type="text"
+ value={this.state.name}
+ />
+ </div>
+ );
+
+ renderKeyField = () => (
+ <div className="modal-field">
+ <label htmlFor="coding-rules-custom-rule-creation-key">
+ {translate('key')} {!this.props.customRule && <em className="mandatory">*</em>}
+ </label>
+
+ {this.props.customRule ? (
+ <span className="coding-rules-detail-custom-rule-key" title={this.props.customRule.key}>
+ {this.props.customRule.key}
+ </span>
+ ) : (
<input
- autoFocus={true}
- className="coding-rules-name-key"
disabled={this.state.submitting}
- id="coding-rules-custom-rule-creation-name"
- onChange={this.handleNameChange}
+ id="coding-rules-custom-rule-creation-key"
+ onChange={this.handleKeyChange}
required={true}
type="text"
- value={this.state.name}
+ value={this.state.key}
/>
- </td>
- </tr>
- );
-
- renderKeyField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>
- {translate('key')} {!this.props.customRule && <em className="mandatory">*</em>}
- </h3>
- </th>
- <td>
- {this.props.customRule ? (
- <span className="coding-rules-detail-custom-rule-key" title={this.props.customRule.key}>
- {this.props.customRule.key}
- </span>
- ) : (
- <input
- className="coding-rules-name-key"
- disabled={this.state.submitting}
- id="coding-rules-custom-rule-creation-key"
- onChange={this.handleKeyChange}
- required={true}
- type="text"
- value={this.state.key}
- />
- )}
- </td>
- </tr>
+ )}
+ </div>
);
renderDescriptionField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>
- {translate('description')} <em className="mandatory">*</em>
- </h3>
- </th>
- <td>
- <textarea
- className="coding-rules-markdown-description"
- disabled={this.state.submitting}
- id="coding-rules-custom-rule-creation-html-description"
- onChange={this.handleDescriptionChange}
- required={true}
- rows={5}
- value={this.state.description}
- />
- <span className="text-right">
- <MarkdownTips />
- </span>
- </td>
- </tr>
+ <div className="modal-field">
+ <label htmlFor="coding-rules-custom-rule-creation-html-description">
+ {translate('description')} <em className="mandatory">*</em>
+ </label>
+ <textarea
+ disabled={this.state.submitting}
+ id="coding-rules-custom-rule-creation-html-description"
+ onChange={this.handleDescriptionChange}
+ required={true}
+ rows={5}
+ value={this.state.description}
+ />
+ <MarkdownTips className="modal-field-descriptor text-right" />
+ </div>
);
renderTypeOption = ({ value }: { value: T.RuleType }) => {
};
renderTypeField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>{translate('type')}</h3>
- </th>
- <td>
- <Select
- className="input-medium"
- clearable={false}
- disabled={this.state.submitting}
- onChange={this.handleTypeChange}
- optionRenderer={this.renderTypeOption}
- options={RULE_TYPES.map(type => ({
- label: translate('issue.type', type),
- value: type
- }))}
- searchable={false}
- value={this.state.type}
- valueRenderer={this.renderTypeOption}
- />
- </td>
- </tr>
+ <div className="modal-field flex-1 spacer-right">
+ <label htmlFor="coding-rules-custom-rule-type">{translate('type')}</label>
+ <Select
+ clearable={false}
+ disabled={this.state.submitting}
+ id="coding-rules-custom-rule-type"
+ onChange={this.handleTypeChange}
+ optionRenderer={this.renderTypeOption}
+ options={RULE_TYPES.map(type => ({
+ label: translate('issue.type', type),
+ value: type
+ }))}
+ searchable={false}
+ value={this.state.type}
+ valueRenderer={this.renderTypeOption}
+ />
+ </div>
);
renderSeverityOption = ({ value }: { value: string }) => <SeverityHelper severity={value} />;
renderSeverityField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>{translate('severity')}</h3>
- </th>
- <td>
- <Select
- className="input-medium"
- clearable={false}
- disabled={this.state.submitting}
- onChange={this.handleSeverityChange}
- optionRenderer={this.renderSeverityOption}
- options={SEVERITIES.map(severity => ({
- label: translate('severity', severity),
- value: severity
- }))}
- searchable={false}
- value={this.state.severity}
- valueRenderer={this.renderSeverityOption}
- />
- </td>
- </tr>
+ <div className="modal-field flex-1 spacer-right">
+ <label htmlFor="coding-rules-custom-rule-severity">{translate('severity')}</label>
+ <Select
+ clearable={false}
+ disabled={this.state.submitting}
+ id="coding-rules-custom-rule-severity"
+ onChange={this.handleSeverityChange}
+ optionRenderer={this.renderSeverityOption}
+ options={SEVERITIES.map(severity => ({
+ label: translate('severity', severity),
+ value: severity
+ }))}
+ searchable={false}
+ value={this.state.severity}
+ valueRenderer={this.renderSeverityOption}
+ />
+ </div>
);
renderStatusField = () => (
- <tr className="property">
- <th className="nowrap">
- <h3>{translate('coding_rules.filters.status')}</h3>
- </th>
- <td>
- <Select
- className="input-medium"
- clearable={false}
- disabled={this.state.submitting}
- onChange={this.handleStatusChange}
- options={RULE_STATUSES.map(status => ({
- label: translate('rules.status', status),
- value: status
- }))}
- searchable={false}
- value={this.state.status}
- />
- </td>
- </tr>
+ <div className="modal-field flex-1">
+ <label htmlFor="coding-rules-custom-rule-status">
+ {translate('coding_rules.filters.status')}
+ </label>
+ <Select
+ clearable={false}
+ disabled={this.state.submitting}
+ id="coding-rules-custom-rule-status"
+ onChange={this.handleStatusChange}
+ options={RULE_STATUSES.map(status => ({
+ label: translate('rules.status', status),
+ value: status
+ }))}
+ searchable={false}
+ value={this.state.status}
+ />
+ </div>
);
renderParameterField = (param: T.RuleParameter) => (
- <tr className="property" key={param.key}>
- <th className="nowrap">
- <h3>{param.key}</h3>
- </th>
- <td>
- {param.type === 'TEXT' ? (
- <textarea
- className="width100"
- disabled={this.state.submitting}
- name={param.key}
- onChange={this.handleParameterChange}
- placeholder={param.defaultValue}
- rows={3}
- value={this.state.params[param.key] || ''}
- />
- ) : (
- <input
- className="input-super-large"
- disabled={this.state.submitting}
- name={param.key}
- onChange={this.handleParameterChange}
- placeholder={param.defaultValue}
- type="text"
- value={this.state.params[param.key] || ''}
- />
- )}
- <div className="note" dangerouslySetInnerHTML={{ __html: param.htmlDesc || '' }} />
- </td>
- </tr>
+ <div className="modal-field" key={param.key}>
+ <label className="capitalize" htmlFor={param.key}>
+ {param.key}
+ </label>
+
+ {param.type === 'TEXT' ? (
+ <textarea
+ disabled={this.state.submitting}
+ id={param.key}
+ name={param.key}
+ onChange={this.handleParameterChange}
+ placeholder={param.defaultValue}
+ rows={3}
+ value={this.state.params[param.key] || ''}
+ />
+ ) : (
+ <input
+ disabled={this.state.submitting}
+ id={param.key}
+ name={param.key}
+ onChange={this.handleParameterChange}
+ placeholder={param.defaultValue}
+ type="text"
+ value={this.state.params[param.key] || ''}
+ />
+ )}
+ <div
+ className="modal-field-description"
+ dangerouslySetInnerHTML={{ __html: param.htmlDesc || '' }}
+ />
+ </div>
);
renderSubmitButton = () => {
{reactivating && (
<Alert variant="warning">{translate('coding_rules.reactivate.help')}</Alert>
)}
- <table>
- <tbody>
- {this.renderNameField()}
- {this.renderKeyField()}
- {this.renderDescriptionField()}
- {/* do not allow to change the type of existing rule */}
- {!customRule && this.renderTypeField()}
- {this.renderSeverityField()}
- {this.renderStatusField()}
- {params.map(this.renderParameterField)}
- </tbody>
- </table>
+
+ {this.renderNameField()}
+ {this.renderKeyField()}
+ <div className="display-flex-space-between">
+ {/* do not allow to change the type of existing rule */}
+ {!customRule && this.renderTypeField()}
+ {this.renderSeverityField()}
+ {this.renderStatusField()}
+ </div>
+ {this.renderDescriptionField()}
+ {params.map(this.renderParameterField)}
</div>
<div className="modal-foot">
</td>
<td className="coding-rules-detail-list-severity">
- <SeverityHelper severity={rule.severity} />
+ <SeverityHelper className="display-flex-center" severity={rule.severity} />
</td>
<td className="coding-rules-detail-list-parameters">
</CustomRuleButton>
)}
- <DeferredSpinner loading={loading}>
+ <DeferredSpinner className="spacer-left" loading={loading}>
{rules.length > 0 && (
<table className="coding-rules-detail-list" id="coding-rules-detail-custom-rules">
<tbody>{sortBy(rules, rule => rule.name).map(this.renderRule)}</tbody>
renderForm = () => (
<div className="coding-rules-detail-extend-description-form">
- <table className="width100">
+ <table className="width-100">
<tbody>
<tr>
- <td className="width100" colSpan={2}>
+ <td colSpan={2}>
<textarea
autoFocus={true}
+ className="width-100 little-spacer-bottom"
id="coding-rules-detail-extend-description-text"
onChange={this.handleDescriptionChange}
rows={4}
- style={{ width: '100%', marginBottom: 4 }}
value={this.state.description}
/>
</td>
{activations.length > 0 && (
<table
- className="coding-rules-detail-quality-profiles width100"
+ className="coding-rules-detail-quality-profiles width-100"
id="coding-rules-detail-quality-profiles">
<tbody>{activations.map(this.renderActivation)}</tbody>
</table>
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ActivationFormModal from '../ActivationFormModal';
+import { mockQualityProfile, mockRule } from '../../../../helpers/testMocks';
+
+it('render correctly', () => {
+ expect(
+ shallow(
+ <ActivationFormModal
+ modalHeader="title"
+ onClose={jest.fn()}
+ onDone={jest.fn()}
+ organization="foo"
+ profiles={[mockQualityProfile()]}
+ rule={mockRule()}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import BulkChangeModal from '../BulkChangeModal';
+import { mockQualityProfile } from '../../../../helpers/testMocks';
+import { Query } from '../../query';
+
+it('render correctly', () => {
+ expect(
+ shallow(
+ <BulkChangeModal
+ action="activate"
+ languages={{ js: { key: 'js', name: 'JavaScript' } }}
+ onClose={jest.fn()}
+ organization="foo"
+ profile={mockQualityProfile()}
+ query={{ languages: ['js'] } as Query}
+ referencedProfiles={{ foo: mockQualityProfile() }}
+ total={42}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import CustomRuleFormModal from '../CustomRuleFormModal';
+import { mockRule } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<CustomRuleFormModal['props']> = {}) {
+ return shallow(
+ <CustomRuleFormModal
+ onClose={jest.fn()}
+ onDone={jest.fn()}
+ organization={undefined}
+ templateRule={{ ...mockRule(), createdAt: 'date', repo: 'squid' }}
+ {...props}
+ />
+ );
+}
import * as React from 'react';
import { shallow } from 'enzyme';
import RuleListItem from '../RuleListItem';
-import { mockEvent } from '../../../../helpers/testMocks';
-
-const rule: T.Rule = {
- key: 'foo',
- lang: 'js',
- langName: 'JavaScript',
- name: 'Use foo',
- severity: 'MAJOR',
- status: 'READY',
- sysTags: ['a', 'b'],
- tags: ['x'],
- type: 'CODE_SMELL'
-};
+import { mockEvent, mockRule } from '../../../../helpers/testMocks';
it('should render', () => {
expect(shallowRender()).toMatchSnapshot();
const onOpen = jest.fn();
const wrapper = shallowRender({ onOpen });
wrapper.find('Link').prop<Function>('onClick')(mockEvent({ button: 0 }));
- expect(onOpen).toBeCalledWith('foo');
+ expect(onOpen).toBeCalledWith('javascript:S1067');
});
function shallowRender(props?: Partial<RuleListItem['props']>) {
onFilterChange={jest.fn()}
onOpen={jest.fn()}
organization="org"
- rule={rule}
+ rule={mockRule()}
selected={false}
{...props}
/>
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render correctly 1`] = `
+<Modal
+ contentLabel="title"
+ onRequestClose={[MockFunction]}
+ size="small"
+>
+ <form
+ onSubmit={[Function]}
+ >
+ <div
+ className="modal-head"
+ >
+ <h2>
+ title
+ </h2>
+ </div>
+ <div
+ className="modal-body"
+ >
+ <Alert
+ variant="info"
+ >
+ coding_rules.active_in_all_profiles
+ </Alert>
+ <div
+ className="modal-field"
+ >
+ <label>
+ coding_rules.quality_profile
+ </label>
+ <Select
+ className="js-profile"
+ clearable={false}
+ disabled={false}
+ onChange={[Function]}
+ options={Array []}
+ value=""
+ />
+ </div>
+ <div
+ className="modal-field"
+ >
+ <label>
+ severity
+ </label>
+ <Select
+ className="js-severity"
+ clearable={false}
+ disabled={false}
+ onChange={[Function]}
+ optionRenderer={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "severity.BLOCKER",
+ "value": "BLOCKER",
+ },
+ Object {
+ "label": "severity.CRITICAL",
+ "value": "CRITICAL",
+ },
+ Object {
+ "label": "severity.MAJOR",
+ "value": "MAJOR",
+ },
+ Object {
+ "label": "severity.MINOR",
+ "value": "MINOR",
+ },
+ Object {
+ "label": "severity.INFO",
+ "value": "INFO",
+ },
+ ]
+ }
+ searchable={false}
+ value="MAJOR"
+ valueRenderer={[Function]}
+ />
+ </div>
+ </div>
+ <footer
+ className="modal-foot"
+ >
+ <SubmitButton
+ disabled={true}
+ >
+ coding_rules.activate
+ </SubmitButton>
+ <ResetButtonLink
+ disabled={false}
+ onClick={[MockFunction]}
+ >
+ cancel
+ </ResetButtonLink>
+ </footer>
+ </form>
+</Modal>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render correctly 1`] = `
+<Modal
+ contentLabel="coding_rules.activate_in_quality_profile (42 coding_rules._rules)"
+ onRequestClose={[MockFunction]}
+ size="small"
+>
+ <form
+ onSubmit={[Function]}
+ >
+ <header
+ className="modal-head"
+ >
+ <h2>
+ coding_rules.activate_in_quality_profile (42 coding_rules._rules)
+ </h2>
+ </header>
+ <div
+ className="modal-body"
+ >
+ <div
+ className="modal-field"
+ >
+ <h3>
+ <label
+ htmlFor="coding-rules-bulk-change-profile"
+ >
+ coding_rules.activate_in
+ </label>
+ </h3>
+ <span>
+ name
+ —
+ are_you_sure
+ </span>
+ </div>
+ </div>
+ <footer
+ className="modal-foot"
+ >
+ <SubmitButton
+ disabled={false}
+ id="coding-rules-submit-bulk-change"
+ >
+ apply
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[MockFunction]}
+ >
+ cancel
+ </ResetButtonLink>
+ </footer>
+ </form>
+</Modal>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Modal
+ contentLabel="coding_rules.create_custom_rule"
+ onRequestClose={[MockFunction]}
+>
+ <form
+ onSubmit={[Function]}
+ >
+ <div
+ className="modal-head"
+ >
+ <h2>
+ coding_rules.create_custom_rule
+ </h2>
+ </div>
+ <div
+ className="modal-body modal-container"
+ >
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-creation-name"
+ >
+ name
+
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ autoFocus={true}
+ disabled={false}
+ id="coding-rules-custom-rule-creation-name"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
+ </div>
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-creation-key"
+ >
+ key
+
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ disabled={false}
+ id="coding-rules-custom-rule-creation-key"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
+ </div>
+ <div
+ className="display-flex-space-between"
+ >
+ <div
+ className="modal-field flex-1 spacer-right"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-type"
+ >
+ type
+ </label>
+ <Select
+ clearable={false}
+ disabled={false}
+ id="coding-rules-custom-rule-type"
+ onChange={[Function]}
+ optionRenderer={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "issue.type.BUG",
+ "value": "BUG",
+ },
+ Object {
+ "label": "issue.type.VULNERABILITY",
+ "value": "VULNERABILITY",
+ },
+ Object {
+ "label": "issue.type.CODE_SMELL",
+ "value": "CODE_SMELL",
+ },
+ Object {
+ "label": "issue.type.SECURITY_HOTSPOT",
+ "value": "SECURITY_HOTSPOT",
+ },
+ Object {
+ "label": "issue.type.UNKNOWN",
+ "value": "UNKNOWN",
+ },
+ ]
+ }
+ searchable={false}
+ value="CODE_SMELL"
+ valueRenderer={[Function]}
+ />
+ </div>
+ <div
+ className="modal-field flex-1 spacer-right"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-severity"
+ >
+ severity
+ </label>
+ <Select
+ clearable={false}
+ disabled={false}
+ id="coding-rules-custom-rule-severity"
+ onChange={[Function]}
+ optionRenderer={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "severity.BLOCKER",
+ "value": "BLOCKER",
+ },
+ Object {
+ "label": "severity.CRITICAL",
+ "value": "CRITICAL",
+ },
+ Object {
+ "label": "severity.MAJOR",
+ "value": "MAJOR",
+ },
+ Object {
+ "label": "severity.MINOR",
+ "value": "MINOR",
+ },
+ Object {
+ "label": "severity.INFO",
+ "value": "INFO",
+ },
+ ]
+ }
+ searchable={false}
+ value="MAJOR"
+ valueRenderer={[Function]}
+ />
+ </div>
+ <div
+ className="modal-field flex-1"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-status"
+ >
+ coding_rules.filters.status
+ </label>
+ <Select
+ clearable={false}
+ disabled={false}
+ id="coding-rules-custom-rule-status"
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "rules.status.READY",
+ "value": "READY",
+ },
+ Object {
+ "label": "rules.status.BETA",
+ "value": "BETA",
+ },
+ Object {
+ "label": "rules.status.DEPRECATED",
+ "value": "DEPRECATED",
+ },
+ ]
+ }
+ searchable={false}
+ value="READY"
+ />
+ </div>
+ </div>
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="coding-rules-custom-rule-creation-html-description"
+ >
+ description
+
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <textarea
+ disabled={false}
+ id="coding-rules-custom-rule-creation-html-description"
+ onChange={[Function]}
+ required={true}
+ rows={5}
+ value=""
+ />
+ <MarkdownTips
+ className="modal-field-descriptor text-right"
+ />
+ </div>
+ </div>
+ <div
+ className="modal-foot"
+ >
+ <SubmitButton
+ disabled={false}
+ id="coding-rules-custom-rule-creation-create"
+ >
+ create
+ </SubmitButton>
+ <ResetButtonLink
+ disabled={false}
+ id="coding-rules-custom-rule-creation-cancel"
+ onClick={[MockFunction]}
+ >
+ cancel
+ </ResetButtonLink>
+ </div>
+ </form>
+</Modal>
+`;
exports[`should render 1`] = `
<div
className="coding-rule"
- data-rule="foo"
+ data-rule="javascript:S1067"
>
<table
className="coding-rule-table"
Object {
"pathname": "/organizations/org/rules",
"query": Object {
- "open": "foo",
- "rule_key": "foo",
+ "open": "javascript:S1067",
+ "rule_key": "javascript:S1067",
},
}
}
onFilterChange={[MockFunction]}
rule={
Object {
- "key": "foo",
+ "key": "javascript:S1067",
"lang": "js",
"langName": "JavaScript",
"name": "Use foo",
margin-left: 10px;
}
-input.coding-rules-name-key {
- width: 100%;
-}
-
-textarea.coding-rules-markdown-description {
- width: 100%;
- margin-bottom: 4px;
-}
-
.coding-rules-most-violated-projects td {
border-top-color: transparent;
}
return (
<Modal
contentLabel={header}
- medium={true}
noBackdrop={this.props.insideModal}
onRequestClose={this.props.onClose}
- shouldCloseOnOverlayClick={false}>
+ shouldCloseOnOverlayClick={false}
+ size={'medium'}>
<div className="modal-head">
<h2>{header}</h2>
</div>
exports[`should render correctly 1`] = `
<Modal
contentLabel="billing.upgrade_box.upgrade_to_paid_plan"
- medium={true}
onRequestClose={[MockFunction]}
shouldCloseOnOverlayClick={false}
+ size="medium"
>
<div
className="modal-head"
};
handleCreateOrganization = () => {
- const { organization } = this.props;
+ const { almApplication, almOrganization, organization } = this.props;
if (!organization) {
return Promise.reject();
}
return this.props.createOrganization({
...organization,
+ alm: {
+ key: almApplication.key,
+ membersSync: true,
+ url: almOrganization.almUrl
+ },
installationId: this.props.almInstallId
});
};
)}
</p>
<a
- href={getAlmMembersUrl(almOrganization.key, almOrganization.almUrl)}
+ href={getAlmMembersUrl(almApplication.key, almOrganization.almUrl)}
rel="noopener noreferrer"
target="_blank">
- {translate('onboarding.import_organization.see_who_has_access')}
+ {translateWithParameters(
+ 'organization.members.see_all_members_on_x',
+ translate(almKey)
+ )}
</a>
</Alert>
}
</div>
<form className="big-spacer-top big-spacer-bottom" onSubmit={this.handleSubmit}>
<div className="form-field abs-width-400">
- <label htmlFor="select-unbound-installation">
+ <label className="text-normal" htmlFor="select-unbound-installation">
{translateWithParameters(
'onboarding.import_organization.choose_unbound_installation_x',
translate(sanitizeAlmId(almApplication.key))
import AutoOrganizationCreate from '../AutoOrganizationCreate';
import { Step } from '../utils';
import { bindAlmOrganization } from '../../../../api/alm-integration';
-import { mockAlmOrganization } from '../../../../helpers/testMocks';
+import { mockAlmOrganization, mockAlmApplication } from '../../../../helpers/testMocks';
import { waitAndUpdate, click } from '../../../../helpers/testUtils';
jest.mock('../../../../api/alm-integration', () => ({
it('should render prefilled and create org', async () => {
const createOrganization = jest.fn().mockResolvedValue({ key: 'foo' });
const handleOrgDetailsFinish = jest.fn();
- const wrapper = shallowRender({ createOrganization, handleOrgDetailsFinish });
+ const almApplication = mockAlmApplication({ key: 'github' });
+ const almOrganization = mockAlmOrganization({ almUrl: 'http://github.com/thing' });
+ const wrapper = shallowRender({
+ almApplication,
+ almOrganization,
+ createOrganization,
+ handleOrgDetailsFinish
+ });
expect(wrapper).toMatchSnapshot();
wrapper.setProps({ organization });
wrapper.find('PlanStep').prop<Function>('createOrganization')();
- expect(createOrganization).toBeCalledWith({ ...organization, installationId: 'id-foo' });
+
+ const alm = {
+ key: 'github',
+ membersSync: true,
+ url: 'http://github.com/thing'
+ };
+ expect(createOrganization).toBeCalledWith({ ...organization, alm, installationId: 'id-foo' });
});
it('should allow to cancel org import', () => {
function shallowRender(props: Partial<AutoOrganizationCreate['props']> = {}) {
return shallow(
<AutoOrganizationCreate
- almApplication={{
- backgroundColor: '#0052CC',
- iconPath: '"/static/authbitbucket/bitbucket.svg"',
- installationUrl: 'https://bitbucket.org/install/app',
- key: 'bitbucket',
- name: 'BitBucket'
- }}
+ almApplication={mockAlmApplication()}
almInstallId="id-foo"
almOrganization={{ ...organization, personal: false }}
createOrganization={jest.fn()}
"avatar": <img
alt="BitBucket"
className="little-spacer-left"
- src="/images/sonarcloud/bitbucket.svg"
+ src="/images/sonarcloud/github.svg"
width={16}
/>,
"name": <strong>
variant="info"
>
<p>
- onboarding.import_organization.members_sync_info_x.organization.bitbucket.foo.bitbucket
+ onboarding.import_organization.members_sync_info_x.organization.github.foo.github
</p>
<a
- href="https://github.com/foo/profile/members"
+ href="http://github.com/orgs/thing/people"
rel="noopener noreferrer"
target="_blank"
>
- onboarding.import_organization.see_who_has_access
+ organization.members.see_all_members_on_x.github
</a>
</Alert>
}
onContinue={[MockFunction]}
organization={
Object {
- "almUrl": "https://github.com/foo",
+ "almUrl": "http://github.com/thing",
"avatar": "http://example.com/avatar",
"description": "description-foo",
"key": "foo",
"backgroundColor": "#0052CC",
"iconPath": "\\"/static/authbitbucket/bitbucket.svg\\"",
"installationUrl": "https://bitbucket.org/install/app",
- "key": "bitbucket",
+ "key": "github",
"name": "BitBucket",
}
}
almOrganization={
Object {
- "almUrl": "https://github.com/foo",
+ "almUrl": "http://github.com/thing",
"avatar": "http://example.com/avatar",
"description": "description-foo",
"key": "foo",
className="form-field abs-width-400"
>
<label
+ className="text-normal"
htmlFor="select-unbound-installation"
>
onboarding.import_organization.choose_unbound_installation_x.github
});
it('should create and sync members', async () => {
- const org = mockOrganizationWithAlm({}, { membersSync: true });
+ const { alm, ...org } = mockOrganizationWithAlm(
+ {},
+ { key: 'github', membersSync: true, url: 'https://github.com/foo' }
+ );
+
(createOrganization as jest.Mock).mockResolvedValueOnce(org);
- const promise = actions.createOrganization(org)(dispatch);
+ const promise = actions.createOrganization({ alm, ...org })(dispatch);
expect(createOrganization).toHaveBeenCalledWith(org);
await promise;
import { bindAlmOrganization } from '../../../api/alm-integration';
import * as api from '../../../api/organizations';
import * as actions from '../../../store/organizations';
+import { isGithub } from '../../../helpers/almIntegrations';
-export function createOrganization(organization: T.Organization & { installationId?: string }) {
+export function createOrganization({
+ alm,
+ ...organization
+}: T.Organization & { installationId?: string }) {
return (dispatch: Dispatch) => {
return api
.createOrganization({ ...organization, name: organization.name || organization.key })
- .then((organization: T.Organization) => {
- dispatch(actions.createOrganization(organization));
- if (organization.alm && organization.alm.membersSync) {
- api.syncMembers(organization.key);
+ .then((newOrganization: T.Organization) => {
+ dispatch(actions.createOrganization({ ...newOrganization, alm }));
+ if (alm && alm.membersSync && isGithub(alm.key)) {
+ api.syncMembers(newOrganization.key);
}
- return organization.key;
+ return newOrganization.key;
});
};
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { getAllMetrics } from '../../../api/metrics';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import Select from '../../../components/controls/Select';
import SimpleModal from '../../../components/controls/SimpleModal';
+import { Alert } from '../../../components/ui/Alert';
import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { getAllMetrics } from '../../../api/metrics';
import { translate } from '../../../helpers/l10n';
-import { Alert } from '../../../components/ui/Alert';
interface Props {
confirmButtonText: string;
<SimpleModal
header={this.props.header}
onClose={this.props.onClose}
- onSubmit={this.handleSubmit}>
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form onSubmit={onFormSubmit}>
<header className="modal-head">
<Modal
contentLabel="header"
onRequestClose={[MockFunction]}
+ size="small"
>
<form
onSubmit={[Function]}
<Modal
contentLabel="header"
onRequestClose={[MockFunction]}
+ size="small"
>
<form
onSubmit={[Function]}
import * as React from 'react';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import SimpleModal from '../../../components/controls/SimpleModal';
-import { translate } from '../../../helpers/l10n';
import Select, { Creatable } from '../../../components/controls/Select';
import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
export interface MetricProps {
description: string;
<SimpleModal
header={this.props.header}
onClose={this.props.onClose}
- onSubmit={this.handleSubmit}>
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form onSubmit={onFormSubmit}>
<header className="modal-head">
<Modal
contentLabel="header"
onRequestClose={[MockFunction]}
+ size="small"
>
<form
onSubmit={[Function]}
<SimpleModal
header={this.props.header}
onClose={this.props.onClose}
- onSubmit={this.handleSubmit}>
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form onSubmit={onFormSubmit}>
<header className="modal-head">
<Modal
contentLabel="header"
onRequestClose={[MockFunction]}
+ size="small"
>
<form
onSubmit={[Function]}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import * as classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { pickBy, sortBy } from 'lodash';
import { searchAssignees } from '../utils';
-import { searchIssueTags, bulkChangeIssues } from '../../../api/issues';
-import throwGlobalError from '../../../app/utils/throwGlobalError';
-import MarkdownTips from '../../../components/common/MarkdownTips';
-import SearchSelect from '../../../components/controls/SearchSelect';
+import Avatar from '../../../components/ui/Avatar';
import Checkbox from '../../../components/controls/Checkbox';
+import HelpTooltip from '../../../components/controls/HelpTooltip';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
+import MarkdownTips from '../../../components/common/MarkdownTips';
import Modal from '../../../components/controls/Modal';
+import Radio from '../../../components/controls/Radio';
+import SearchSelect from '../../../components/controls/SearchSelect';
import Select from '../../../components/controls/Select';
-import HelpTooltip from '../../../components/controls/HelpTooltip';
import SeverityHelper from '../../../components/shared/SeverityHelper';
-import Avatar from '../../../components/ui/Avatar';
+import throwGlobalError from '../../../app/utils/throwGlobalError';
+import { Alert } from '../../../components/ui/Alert';
+import { searchIssueTags, bulkChangeIssues } from '../../../api/issues';
import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
-import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { Alert } from '../../../components/ui/Alert';
import { isLoggedIn } from '../../../helpers/users';
interface AssigneeOption {
}
};
- handleFieldChange = (field: 'comment' | 'transition') => (
- event: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>
- ) => {
- this.setState<keyof FormFields>({ [field]: event.currentTarget.value });
+ handleRadioTransitionChange = (transition: string) => {
+ this.setState({ transition });
+ };
+
+ handleCommentChange = (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
+ this.setState({ comment: event.currentTarget.value });
};
handleSelectFieldChange = (field: 'severity' | 'type') => (data: { value: string } | null) => {
</div>
);
- renderCheckbox = (field: keyof FormFields, id?: string) => (
- <Checkbox
- checked={this.state[field] !== undefined}
- id={id}
- onCheck={this.handleFieldCheck(field)}
- />
- );
-
renderAffected = (affected: number) => (
<div className="pull-right note">
({translateWithParameters('issue_bulk_change.x_issues', affected)})
const input = (
<AssigneeSelect
+ className="input-super-large"
clearable={true}
defaultOptions={this.getDefaultAssignee()}
onSearch={this.handleAssigneeSearch}
const input = (
<Select
+ className="input-super-large"
clearable={true}
onChange={this.handleSelectFieldChange('type')}
optionRenderer={optionRenderer}
const input = (
<Select
+ className="input-super-large"
clearable={true}
onChange={this.handleSelectFieldChange('severity')}
optionRenderer={(option: { value: string }) => <SeverityHelper severity={option.value} />}
const input = (
<TagSelect
canCreate={allowCreate}
+ className="input-super-large"
clearable={true}
defaultOptions={this.state.initialTags}
minimumQueryLength={0}
<div className="modal-field">
<label>{translate('issue.transition')}</label>
{transitions.map(transition => (
- <span className="clearfix" key={transition.transition}>
- <input
+ <span
+ className="bulk-change-radio-button display-flex-center display-flex-space-between"
+ key={transition.transition}>
+ <Radio
checked={this.state.transition === transition.transition}
- id={`transition-${transition.transition}`}
- name="do_transition.transition"
- onChange={this.handleFieldChange('transition')}
- type="radio"
- value={transition.transition}
- />
- <label
- htmlFor={`transition-${transition.transition}`}
- style={{ float: 'none', display: 'inline', left: 0, cursor: 'pointer' }}>
+ onCheck={this.handleRadioTransitionChange}
+ value={transition.transition}>
{translate('issue.transition', transition.transition)}
- </label>
+ </Radio>
{this.renderAffected(transition.count)}
- <br />
</span>
))}
</div>
overlay={translate('issue_bulk_change.comment.help')}
/>
</label>
- <div>
- <textarea
- id="comment"
- onChange={this.handleFieldChange('comment')}
- rows={4}
- style={{ width: '100%' }}
- value={this.state.comment || ''}
- />
- </div>
- <div className="pull-right">
- <MarkdownTips />
- </div>
+ <textarea
+ id="comment"
+ onChange={this.handleCommentChange}
+ rows={4}
+ value={this.state.comment || ''}
+ />
+ <MarkdownTips className="modal-field-descriptor text-right" />
</div>
);
};
renderNotificationsField = () => (
- <div className="modal-field">
- <label htmlFor="send-notifications">{translate('issue.send_notifications')}</label>
- {this.renderCheckbox('notifications', 'send-notifications')}
- </div>
+ <Checkbox
+ checked={this.state.notifications !== undefined}
+ className="display-inline-block spacer-top"
+ id="send-notifications"
+ onCheck={this.handleFieldCheck('notifications')}
+ right={true}>
+ <strong className="little-spacer-right">{translate('issue.send_notifications')}</strong>
+ </Checkbox>
);
renderForm = () => {
<h2>{translateWithParameters('issue_bulk_change.form.title', issues.length)}</h2>
</div>
- <div className="modal-body">
+ <div className={classNames('modal-body', { 'modal-container': limitReached })}>
{limitReached && (
<Alert variant="warning">
<FormattedMessage
render() {
return (
- <Modal contentLabel="modal" onRequestClose={this.props.onClose}>
+ <Modal contentLabel="modal" onRequestClose={this.props.onClose} size={'small'}>
{this.state.loading ? this.renderLoading() : this.renderForm()}
</Modal>
);
<Modal
contentLabel="modal"
onRequestClose={[Function]}
+ size="small"
>
<form
id="bulk-change-form"
<Modal
contentLabel="modal"
onRequestClose={[Function]}
+ size="small"
>
<form
id="bulk-change-form"
<div
className="modal-body"
>
- <div
- className="modal-field"
+ <Checkbox
+ checked={false}
+ className="display-inline-block spacer-top"
+ id="send-notifications"
+ onCheck={[Function]}
+ right={true}
+ thirdState={false}
>
- <label
- htmlFor="send-notifications"
+ <strong
+ className="little-spacer-right"
>
issue.send_notifications
- </label>
- <Checkbox
- checked={false}
- id="send-notifications"
- onCheck={[Function]}
- thirdState={false}
- />
- </div>
+ </strong>
+ </Checkbox>
</div>
<div
className="modal-foot"
width: auto;
margin-right: 4px;
}
+
+.bulk-change-radio-button {
+ margin: 0 calc(- var(--gridSize) / 2);
+ padding: 0 calc(var(--gridSize) / 2);
+}
+
+.bulk-change-radio-button:hover {
+ background-color: var(--barBackgroundColor);
+}
</header>
<form onSubmit={this.handleSubmit}>
<div className="modal-body">
- <div className="modal-large-field">
+ <div className="modal-field">
<label>{translate('users.search_description')}</label>
<UsersSelectSearch
autoFocus={true}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { keyBy, pickBy } from 'lodash';
-import { getUserGroups, UserGroup } from '../../api/users';
-import Modal from '../../components/controls/Modal';
-import { translate, translateWithParameters } from '../../helpers/l10n';
+import { keyBy, pickBy, some } from 'lodash';
import OrganizationGroupCheckbox from '../organizations/components/OrganizationGroupCheckbox';
+import SimpleModal from '../../components/controls/SimpleModal';
import { SubmitButton, ResetButtonLink } from '../../components/ui/buttons';
+import { getUserGroups, UserGroup } from '../../api/users';
+import { translate, translateWithParameters } from '../../helpers/l10n';
+import DeferredSpinner from '../../components/common/DeferredSpinner';
interface Props {
onClose: () => void;
member: T.OrganizationMember;
organization: T.Organization;
organizationGroups: T.Group[];
- updateMemberGroups: (member: T.OrganizationMember, add: string[], remove: string[]) => void;
+ updateMemberGroups: (
+ member: T.OrganizationMember,
+ add: string[],
+ remove: string[]
+ ) => Promise<void>;
}
interface State {
onCheck = (groupName: string, checked: boolean) => {
this.setState((prevState: State) => {
- const userGroups = prevState.userGroups || {};
+ const { userGroups = {} } = prevState;
const group = userGroups[groupName] || {};
let status = '';
if (group.selected && !checked) {
});
};
- handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
- event.preventDefault();
- this.props.updateMemberGroups(
- this.props.member,
- Object.keys(pickBy(this.state.userGroups, group => group.status === 'add')),
- Object.keys(pickBy(this.state.userGroups, group => group.status === 'remove'))
- );
- this.props.onClose();
+ handleSubmit = () => {
+ return this.props
+ .updateMemberGroups(
+ this.props.member,
+ Object.keys(pickBy(this.state.userGroups, group => group.status === 'add')),
+ Object.keys(pickBy(this.state.userGroups, group => group.status === 'remove'))
+ )
+ .then(this.props.onClose);
};
render() {
+ const { loading, userGroups = {} } = this.state;
const header = translate('organization.members.manage_groups');
+ const hasChanges = some(userGroups, group => group.status !== undefined);
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
- <header className="modal-head">
- <h2>{header}</h2>
- </header>
- <form onSubmit={this.handleSubmit}>
- <div className="modal-body modal-container">
- <strong>
- {translateWithParameters(
- 'organization.members.members_groups',
- this.props.member.name
+ <SimpleModal header={header} onClose={this.props.onClose} onSubmit={this.handleSubmit}>
+ {({ onCloseClick, onFormSubmit, submitting }) => (
+ <form onSubmit={onFormSubmit}>
+ <header className="modal-head">
+ <h2>{header}</h2>
+ </header>
+ <div className="modal-body modal-container">
+ <p>
+ <strong>
+ {translateWithParameters(
+ 'organization.members.members_groups',
+ this.props.member.name
+ )}
+ </strong>
+ </p>
+ {loading ? (
+ <DeferredSpinner className="spacer-top" />
+ ) : (
+ <ul className="list-spaced">
+ {this.props.organizationGroups.map(group => (
+ <OrganizationGroupCheckbox
+ checked={this.isGroupSelected(group.name)}
+ group={group}
+ key={group.id}
+ onCheck={this.onCheck}
+ />
+ ))}
+ </ul>
)}
- </strong>{' '}
- {this.state.loading && <i className="spinner" />}
- {!this.state.loading && (
- <ul className="list-spaced">
- {this.props.organizationGroups.map(group => (
- <OrganizationGroupCheckbox
- checked={this.isGroupSelected(group.name)}
- group={group}
- key={group.id}
- onCheck={this.onCheck}
- />
- ))}
- </ul>
- )}
- </div>
- <footer className="modal-foot">
- <div>
- <SubmitButton>{translate('save')}</SubmitButton>
- <ResetButtonLink onClick={this.props.onClose}>{translate('cancel')}</ResetButtonLink>
</div>
- </footer>
- </form>
- </Modal>
+
+ <footer className="modal-foot">
+ <DeferredSpinner className="spacer-right" loading={submitting} />
+ <SubmitButton disabled={submitting || !hasChanges}>{translate('save')}</SubmitButton>
+ <ResetButtonLink disabled={submitting} onClick={onCloseClick}>
+ {translate('cancel')}
+ </ResetButtonLink>
+ </footer>
+ </form>
+ )}
+ </SimpleModal>
);
}
}
import { translate } from '../../helpers/l10n';
interface Props {
+ currentUser: T.LoggedInUser;
members: T.OrganizationMember[];
organizationGroups: T.Group[];
organization: T.Organization;
- removeMember: (member: T.OrganizationMember) => void;
+ removeMember?: (member: T.OrganizationMember) => void;
updateMemberGroups: (
member: T.OrganizationMember,
add: Array<string>,
remove: Array<string>
- ) => void;
+ ) => Promise<void>;
}
export default class MembersList extends React.PureComponent<Props> {
render() {
- const { members } = this.props;
+ const { currentUser, members } = this.props;
if (!members.length) {
return <div className="note">{translate('no_results')}</div>;
member={member}
organization={this.props.organization}
organizationGroups={this.props.organizationGroups}
- removeMember={this.props.removeMember}
+ removeMember={
+ currentUser.login !== member.login ? this.props.removeMember : undefined
+ }
updateMemberGroups={this.props.updateMemberGroups}
/>
))}
<HelpTooltip
className="spacer-left"
overlay={
- <div className="abs-width-300 markdown cut-margins">
+ <div className="abs-width-300 markdown cut-margins">
<p>
{translate(
'organization.members.auto_sync_total_help',
member: T.OrganizationMember;
organization: T.Organization;
organizationGroups: T.Group[];
- removeMember: (member: T.OrganizationMember) => void;
- updateMemberGroups: (member: T.OrganizationMember, add: string[], remove: string[]) => void;
+ removeMember?: (member: T.OrganizationMember) => void;
+ updateMemberGroups: (
+ member: T.OrganizationMember,
+ add: string[],
+ remove: string[]
+ ) => Promise<void>;
}
interface State {
};
render() {
- const { member, organization } = this.props;
+ const { member, organization, removeMember } = this.props;
const { actions = {} } = organization;
return (
<tr>
</td>
)}
{actions.admin && (
- <React.Fragment>
+ <>
<td className="nowrap text-middle text-right">
<ActionsDropdown>
<ActionsDropdownItem onClick={this.handleManageGroupsClick}>
{translate('organization.members.manage_groups')}
</ActionsDropdownItem>
- <ActionsDropdownDivider />
- <ActionsDropdownItem destructive={true} onClick={this.handleRemoveMemberClick}>
- {translate('organization.members.remove')}
- </ActionsDropdownItem>
+ {removeMember && (
+ <>
+ <ActionsDropdownDivider />
+ <ActionsDropdownItem destructive={true} onClick={this.handleRemoveMemberClick}>
+ {translate('organization.members.remove')}
+ </ActionsDropdownItem>
+ </>
+ )}
</ActionsDropdown>
</td>
/>
)}
- {this.state.removeMemberForm && (
- <RemoveMemberForm
- member={this.props.member}
- onClose={this.closeRemoveMemberForm}
- organization={this.props.organization}
- removeMember={this.props.removeMember}
- />
- )}
- </React.Fragment>
+ {removeMember &&
+ this.state.removeMemberForm && (
+ <RemoveMemberForm
+ member={this.props.member}
+ onClose={this.closeRemoveMemberForm}
+ organization={this.props.organization}
+ removeMember={removeMember}
+ />
+ )}
+ </>
)}
</tr>
);
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
import AddMemberForm from './AddMemberForm';
import SyncMemberForm from './SyncMemberForm';
import DeferredSpinner from '../../components/common/DeferredSpinner';
import DocTooltip from '../../components/docs/DocTooltip';
-import NewInfoBox from '../../components/ui/NewInfoBox';
import { sanitizeAlmId } from '../../helpers/almIntegrations';
import { translate, translateWithParameters } from '../../helpers/l10n';
-import { getCurrentUserSetting, Store } from '../../store/rootReducer';
-import { setCurrentUserSetting } from '../../store/users';
+import { Alert } from '../../components/ui/Alert';
-interface Props {
- dismissSyncNotifOrg: string[];
+export interface Props {
handleAddMember: (member: T.OrganizationMember) => void;
loading: boolean;
members?: T.OrganizationMember[];
organization: T.Organization;
refreshMembers: () => Promise<void>;
- setCurrentUserSetting: (setting: T.CurrentUserSetting) => void;
}
-export class MembersPageHeader extends React.PureComponent<Props> {
- handleDismissSyncNotif = () => {
- const { dismissSyncNotifOrg, organization } = this.props;
- this.props.setCurrentUserSetting({
- key: 'organizations.members.dismissSyncNotif',
- value: [...dismissSyncNotifOrg, organization.key].join(',')
- });
- };
+export default function MembersPageHeader(props: Props) {
+ const { members, organization, refreshMembers } = props;
+ const memberLogins = members ? members.map(member => member.login) : [];
+ const isAdmin = organization.actions && organization.actions.admin;
+ const almKey = organization.alm && sanitizeAlmId(organization.alm.key);
+ const hasMemberSync = organization.alm && organization.alm.membersSync;
+ const showSyncNotif = isAdmin && organization.alm && !hasMemberSync;
- render() {
- const { dismissSyncNotifOrg, members, organization, refreshMembers } = this.props;
- const memberLogins = members ? members.map(member => member.login) : [];
- const isAdmin = organization.actions && organization.actions.admin;
- const almKey = organization.alm && sanitizeAlmId(organization.alm.key);
- const hasMemberSync = organization.alm && organization.alm.membersSync;
- const showSyncNotif =
- isAdmin &&
- organization.alm &&
- !hasMemberSync &&
- !dismissSyncNotifOrg.some(orgKey => orgKey === organization.key);
-
- return (
- <header className="page-header">
- <h1 className="page-title">{translate('organization.members.page')}</h1>
- <DeferredSpinner loading={this.props.loading} />
- {isAdmin && (
- <div className="page-actions text-right">
- {almKey &&
- !showSyncNotif && (
- <SyncMemberForm organization={organization} refreshMembers={refreshMembers} />
- )}
- {!hasMemberSync && (
- <div className="display-inline-block spacer-left spacer-bottom">
- <AddMemberForm
- addMember={this.props.handleAddMember}
- memberLogins={memberLogins}
- organization={organization}
- />
- <DocTooltip
- className="spacer-left"
- doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/organizations/add-organization-member.md')}
- />
- </div>
+ return (
+ <header className="page-header">
+ <h1 className="page-title">{translate('organization.members.page')}</h1>
+ <DeferredSpinner loading={props.loading} />
+ {isAdmin && (
+ <div className="page-actions text-right">
+ {almKey &&
+ !showSyncNotif && (
+ <SyncMemberForm organization={organization} refreshMembers={refreshMembers} />
)}
- {almKey &&
- showSyncNotif && (
- <NewInfoBox
- description={translateWithParameters(
- 'organization.members.auto_sync_members_from_org_x',
- translate(almKey)
- )}
- onClose={this.handleDismissSyncNotif}
- title={translateWithParameters(
- 'organization.members.auto_sync_with_x',
- translate(almKey)
- )}>
- <SyncMemberForm
- dismissSyncNotif={this.handleDismissSyncNotif}
- organization={organization}
- refreshMembers={refreshMembers}
- />
- </NewInfoBox>
- )}
- </div>
- )}
- <div className="page-description">
- <FormattedMessage
- defaultMessage={translate('organization.members.page.description')}
- id="organization.members.page.description"
- values={{
- link: (
- <Link to="/documentation/organizations/manage-team/">
- {translate('organization.members.manage_a_team')}
- </Link>
- )
- }}
- />
+ {!hasMemberSync && (
+ <div className="display-inline-block spacer-left spacer-bottom">
+ <AddMemberForm
+ addMember={props.handleAddMember}
+ memberLogins={memberLogins}
+ organization={organization}
+ />
+ <DocTooltip
+ className="spacer-left"
+ doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/organizations/add-organization-member.md')}
+ />
+ </div>
+ )}
</div>
- </header>
- );
- }
+ )}
+ <div className="page-description">
+ <FormattedMessage
+ defaultMessage={translate('organization.members.page.description')}
+ id="organization.members.page.description"
+ values={{
+ link: (
+ <Link target="_blank" to="/documentation/organizations/manage-team/">
+ {translate('organization.members.manage_a_team')}
+ </Link>
+ )
+ }}
+ />
+ {almKey &&
+ showSyncNotif && (
+ <Alert className="spacer-top" display="inline" variant="info">
+ {translateWithParameters(
+ 'organization.members.auto_sync_members_from_org_x',
+ translate('organization', almKey)
+ )}
+ <span className="spacer-left">
+ <SyncMemberForm organization={organization} refreshMembers={refreshMembers} />
+ </span>
+ </Alert>
+ )}
+ </div>
+ </header>
+ );
}
-
-const mapStateToProps = (state: Store) => ({
- dismissSyncNotifOrg: (
- getCurrentUserSetting(state, 'organizations.members.dismissSyncNotif') || ''
- ).split(',')
-});
-
-const mapDispatchToProps = { setCurrentUserSetting };
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(MembersPageHeader);
removeUserFromGroup({ name, login, organization: this.props.organization.key })
)
];
- Promise.all(promises).then(
- () => {
- if (this.mounted) {
- this.updateGroup(login, member => ({
- ...member,
- groupCount: (member.groupCount || 0) + add.length - remove.length
- }));
- }
- },
- () => {}
- );
+ return Promise.all(promises).then(() => {
+ if (this.mounted) {
+ this.updateGroup(login, member => ({
+ ...member,
+ groupCount: (member.groupCount || 0) + add.length - remove.length
+ }));
+ }
+ });
};
render() {
- const { organization } = this.props;
+ const { currentUser, organization } = this.props;
const { groups, loading, members, paging } = this.state;
+ const hasMemberSync = organization.alm && organization.alm.membersSync;
return (
<div className="page page-limited">
<Helmet title={translate('organization.members.page')} />
paging !== undefined && (
<>
<MembersListHeader
- currentUser={this.props.currentUser}
+ currentUser={currentUser}
handleSearch={this.handleSearchMembers}
organization={organization}
total={paging.total}
/>
<MembersList
+ currentUser={currentUser}
members={members}
organization={organization}
organizationGroups={groups}
- removeMember={this.handleRemoveMember}
+ removeMember={hasMemberSync ? undefined : this.handleRemoveMember}
updateMemberGroups={this.updateMemberGroups}
/>
{paging.total !== 0 && (
import { fetchOrganization } from '../../store/rootActions';
interface Props {
- dismissSyncNotif?: () => void;
fetchOrganization: (key: string) => void;
organization: T.Organization;
refreshMembers: () => Promise<void>;
}
handleConfirm = () => {
- const { dismissSyncNotif, organization } = this.props;
+ const { organization } = this.props;
const { membersSync } = this.state;
- if (dismissSyncNotif) {
- dismissSyncNotif();
- }
-
return setOrganizationMemberSync({
organization: organization.key,
enabled: membersSync
const { organization } = this.props;
const almKey = organization.alm && sanitizeAlmId(organization.alm.key);
return (
- <>
- <div className="display-flex-stretch big-spacer-top">
- <RadioCard
- onClick={this.handleManualClick}
- selected={!membersSync}
- title={translate('organization.members.management.manual')}>
- <div className="spacer-left">
- <ul className="big-spacer-left note">
- <li className="spacer-bottom">
- {translate('organization.members.management.manual.add_members_manually')}
- </li>
- <li>
- {translate('organization.members.management.manual.choose_members_permissions')}
- </li>
- </ul>
- </div>
- </RadioCard>
- <RadioCard
- onClick={this.handleAutoClick}
- selected={membersSync}
- title={translateWithParameters(
- 'organization.members.management.automatic',
- translate(almKey || '')
- )}>
- <div className="spacer-left">
- <ul className="big-spacer-left note">
- {almKey && (
- <>
- <li className="spacer-bottom">
- {translateWithParameters(
- 'organization.members.management.automatic.synchronized_from_x',
- translate(almKey)
- )}
- </li>
- <li className="spacer-bottom">
- {translate(
- 'organization.members.management.automatic.members_changes_reflected',
- almKey
- )}
- </li>
- </>
- )}
- <li>
- {translate(
- 'organization.members.management.automatic.still_choose_members_permissions'
- )}
- </li>
- </ul>
- </div>
- {(!organization.alm || !organization.alm.membersSync) && (
- <Alert className="big-spacer-top" variant="warning">
- {translate('organization.members.management.automatic.warning')}
- </Alert>
- )}
- </RadioCard>
- </div>
- </>
+ <div className="display-flex-stretch big-spacer-top">
+ <RadioCard
+ onClick={this.handleManualClick}
+ selected={!membersSync}
+ title={translate('organization.members.management.manual')}>
+ <div className="spacer-left">
+ <ul className="big-spacer-left note">
+ <li className="spacer-bottom">
+ {translate('organization.members.management.manual.add_members_manually')}
+ </li>
+ <li>{translate('organization.members.management.choose_members_permissions')}</li>
+ </ul>
+ </div>
+ </RadioCard>
+ <RadioCard
+ onClick={this.handleAutoClick}
+ selected={membersSync}
+ title={translateWithParameters(
+ 'organization.members.management.automatic',
+ translate(almKey || '')
+ )}>
+ <div className="spacer-left">
+ <ul className="big-spacer-left note">
+ {almKey && (
+ <>
+ <li className="spacer-bottom">
+ {translateWithParameters(
+ 'organization.members.management.automatic.synchronized_from_x',
+ translate('organization', almKey)
+ )}
+ </li>
+ <li className="spacer-bottom">
+ {translate(
+ 'organization.members.management.automatic.members_changes_reflected',
+ almKey
+ )}
+ </li>
+ </>
+ )}
+ <li>{translate('organization.members.management.choose_members_permissions')}</li>
+ </ul>
+ </div>
+ {(!organization.alm || !organization.alm.membersSync) && (
+ <Alert className="big-spacer-top" variant="warning">
+ {translate('organization.members.management.automatic.warning')}
+ </Alert>
+ )}
+ </RadioCard>
+ </div>
);
};
cancelButtonText={translate('close')}
confirmButtonText={translate('save')}
confirmDisable={this.state.membersSync === orgMemberSync}
- medium={true}
modalBody={this.renderModalBody()}
modalHeader={translate('organization.members.management.title')}
modalHeaderDescription={this.renderModalDescription()}
- onConfirm={this.handleConfirm}>
- {({ onClick }) => (
- <Button onClick={onClick}>{translate('organization.members.config_synchro')}</Button>
- )}
+ onConfirm={this.handleConfirm}
+ size={'medium'}>
+ {({ onClick }) => <Button onClick={onClick}>{translate('configure')}</Button>}
</ConfirmButton>
);
}
import * as React from 'react';
import { shallow } from 'enzyme';
import ManageMemberGroupsForm from '../ManageMemberGroupsForm';
-import { mockEvent } from '../../../helpers/testMocks';
const member = { login: 'admin', name: 'Admin Istrator', avatar: '', groupCount: 3 };
const organization = { name: 'MyOrg', key: 'myorg' };
}
];
const userGroups = {
- 11: { id: 11, name: 'pull-request-analysers', description: 'Technical accounts', selected: true }
+ '11': {
+ default: false,
+ id: 11,
+ name: 'pull-request-analysers',
+ description: 'Technical accounts',
+ selected: true
+ }
};
-function getMountedForm(updateFunc = jest.fn()) {
- const wrapper = shallow(
+function getMountedForm(updateFunc = jest.fn().mockResolvedValue({})) {
+ const wrapper = shallow<ManageMemberGroupsForm>(
<ManageMemberGroupsForm
member={member}
onClose={jest.fn()}
/>
);
expect(wrapper).toMatchSnapshot();
+ expect(wrapper.dive()).toMatchSnapshot();
});
it('should correctly select the groups', () => {
const form = getMountedForm();
- const instance = form.instance as ManageMemberGroupsForm;
- expect(instance.isGroupSelected('11')).toBeTruthy();
- expect(instance.isGroupSelected('7')).toBeFalsy();
- instance.onCheck('11', false);
- instance.onCheck('7', true);
+ expect(form.instance.isGroupSelected('11')).toBeTruthy();
+ expect(form.instance.isGroupSelected('7')).toBeFalsy();
+ form.instance.onCheck('11', false);
+ form.instance.onCheck('7', true);
expect(form.wrapper.state('userGroups')).toMatchSnapshot();
- expect(instance.isGroupSelected('11')).toBeFalsy();
- expect(instance.isGroupSelected('7')).toBeTruthy();
+ expect(form.instance.isGroupSelected('11')).toBeFalsy();
+ expect(form.instance.isGroupSelected('7')).toBeTruthy();
});
it('should correctly handle the submit event and close the modal', () => {
- const updateMemberGroups = jest.fn();
+ const updateMemberGroups = jest.fn().mockResolvedValue({});
const form = getMountedForm(updateMemberGroups);
- const instance = form.instance as ManageMemberGroupsForm;
- instance.onCheck('11', false);
- instance.onCheck('7', true);
- instance.handleSubmit(mockEvent());
+ form.instance.onCheck('11', false);
+ form.instance.onCheck('7', true);
+ form.instance.handleSubmit();
expect(updateMemberGroups.mock.calls).toMatchSnapshot();
expect(form.wrapper.state()).toMatchSnapshot();
});
import * as React from 'react';
import { shallow } from 'enzyme';
import MembersList from '../MembersList';
+import { mockOrganization, mockCurrentUser } from '../../../helpers/testMocks';
-const organization = { key: 'foo', name: 'Foo' };
const members = [
{ login: 'admin', name: 'Admin Istrator', avatar: '', groupCount: 3 },
{ login: 'john', name: 'John Doe', avatar: '7daf6c79d4802916d83f6266e24850af', groupCount: 1 }
];
it('should render a list of members of an organization', () => {
- const wrapper = shallow(
- <MembersList
- members={members}
- organization={organization}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
- expect(wrapper).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
it('should render "no results"', () => {
- const wrapper = shallow(
+ expect(shallowRender({ members: [] })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<MembersList['props']> = {}) {
+ return shallow(
<MembersList
- members={[]}
- organization={organization}
+ currentUser={mockCurrentUser({ login: 'admin' })}
+ members={members}
+ organization={mockOrganization()}
organizationGroups={[]}
removeMember={jest.fn()}
updateMemberGroups={jest.fn()}
+ {...props}
/>
);
- expect(wrapper).toMatchSnapshot();
-});
+}
import { shallow } from 'enzyme';
import MembersListItem from '../MembersListItem';
import { click } from '../../../helpers/testUtils';
-
-const organization = { key: 'foo', name: 'Foo' };
-const admin = { login: 'admin', name: 'Admin Istrator', avatar: '', groupCount: 3 };
-const john = { login: 'john', name: 'John Doe', avatar: '7daf6c79d4802916d83f6266e24850af' };
+import { mockOrganizationWithAdminActions, mockOrganization } from '../../../helpers/testMocks';
it('should not render actions and groups for non admin', () => {
- const wrapper = shallow(
- <MembersListItem
- member={admin}
- organization={organization}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
- expect(wrapper).toMatchSnapshot();
+ expect(shallowRender({ organization: mockOrganization() })).toMatchSnapshot();
});
it('should render actions and groups for admin', () => {
- const wrapper = shallow(
- <MembersListItem
- member={admin}
- organization={{ ...organization, actions: { admin: true } }}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
- expect(wrapper).toMatchSnapshot();
+ expect(shallowRender()).toMatchSnapshot();
});
-it('should groups at 0 if the groupCount field is not defined (just added user)', () => {
- const wrapper = shallow(
- <MembersListItem
- member={john}
- organization={{ ...organization, actions: { admin: true } }}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
- expect(wrapper).toMatchSnapshot();
+it('should show groups at 0 if the groupCount field is not defined (just added user)', () => {
+ expect(
+ shallowRender({
+ member: { login: 'john', name: 'John Doe', avatar: '7daf6c79d4802916d83f6266e24850af' }
+ })
+ ).toMatchSnapshot();
+});
+
+it('should not display the remove member action', () => {
+ expect(shallowRender({ removeMember: undefined }).find('ActionsDropdown')).toMatchSnapshot();
});
it('should open groups form', () => {
- const wrapper = shallow(
- <MembersListItem
- member={admin}
- organization={{ ...organization, actions: { admin: true } }}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
+ const wrapper = shallowRender();
click(wrapper.find('ActionsDropdownItem').first());
expect(wrapper.find('ManageMemberGroupsForm').exists()).toBe(true);
});
it('should open remove member form', () => {
- const wrapper = shallow(
- <MembersListItem
- member={admin}
- organization={{ ...organization, actions: { admin: true } }}
- organizationGroups={[]}
- removeMember={jest.fn()}
- updateMemberGroups={jest.fn()}
- />
- );
+ const wrapper = shallowRender();
click(wrapper.find('ActionsDropdownItem').last());
expect(wrapper.find('RemoveMemberForm').exists()).toBe(true);
wrapper.update();
expect(wrapper.find('RemoveMemberForm').exists()).toBe(false);
});
+
+function shallowRender(props: Partial<MembersListItem['props']> = {}) {
+ return shallow(
+ <MembersListItem
+ member={{ login: 'admin', name: 'Admin Istrator', avatar: '', groupCount: 3 }}
+ organization={mockOrganizationWithAdminActions()}
+ organizationGroups={[]}
+ removeMember={jest.fn()}
+ updateMemberGroups={jest.fn()}
+ {...props}
+ />
+ );
+}
*/
import * as React from 'react';
import { shallow } from 'enzyme';
-import { MembersPageHeader } from '../MembersPageHeader';
+import MembersPageHeader, { Props } from '../MembersPageHeader';
import {
mockOrganization,
mockOrganizationWithAlm,
it('should render for bound organization without sync', () => {
const organization = mockOrganizationWithAlm(mockOrganizationWithAdminActions());
expect(shallowRender({ organization })).toMatchSnapshot();
-
- const wrapper = shallowRender({ organization, dismissSyncNotifOrg: [organization.key] });
- expect(wrapper.find('Connect(SyncMemberForm)').exists()).toBe(true);
- expect(wrapper.find('NewInfoBox').exists()).toBe(false);
});
it('should render for bound organization with sync', () => {
const wrapper = shallowRender({ organization });
expect(wrapper.find('Connect(SyncMemberForm)').exists()).toBe(true);
expect(wrapper.find('AddMemberForm').exists()).toBe(false);
- expect(wrapper.find('NewInfoBox').exists()).toBe(false);
+ expect(wrapper.find('Alert').exists()).toBe(false);
});
-function shallowRender(props: Partial<MembersPageHeader['props']> = {}) {
+function shallowRender(props: Partial<Props> = {}) {
return shallow(
<MembersPageHeader
- dismissSyncNotifOrg={[]}
handleAddMember={jest.fn()}
loading={false}
members={[]}
organization={mockOrganization()}
refreshMembers={jest.fn()}
- setCurrentUserSetting={jest.fn()}
{...props}
/>
);
import {
mockOrganization,
mockCurrentUser,
- mockOrganizationWithAdminActions
+ mockOrganizationWithAdminActions,
+ mockOrganizationWithAlm
} from '../../../helpers/testMocks';
import { waitAndUpdate } from '../../../helpers/testUtils';
it('should add new member', async () => {
const wrapper = shallowRender();
await waitAndUpdate(wrapper);
- wrapper.find('Connect(MembersPageHeader)').prop<Function>('handleAddMember')({ login: 'bar' });
+ wrapper.find('MembersPageHeader').prop<Function>('handleAddMember')({ login: 'bar' });
await waitAndUpdate(wrapper);
expect(
wrapper
expect(removeUserFromGroup).toBeCalledWith({ login: 'john', name: 'birds', organization: 'foo' });
});
+it('should not allow to remove members when in sync mode', async () => {
+ const wrapper = shallowRender({
+ organization: mockOrganizationWithAlm(mockOrganizationWithAdminActions(), { membersSync: true })
+ });
+ await waitAndUpdate(wrapper);
+ expect(wrapper.find('MembersList').prop('removeMember')).toBeUndefined();
+});
+
function shallowRender(props: Partial<OrganizationMembers['props']> = {}) {
return shallow<OrganizationMembers>(
<OrganizationMembers
}));
beforeEach(() => {
- (setOrganizationMemberSync as jest.Mock).mockClear();
- (syncMembers as jest.Mock).mockClear();
+ jest.clearAllMocks();
});
it('should allow to switch to automatic mode with github', async () => {
- const dismissSyncNotif = jest.fn();
const fetchOrganization = jest.fn();
const refreshMembers = jest.fn().mockResolvedValue({});
- const wrapper = shallowRender({ dismissSyncNotif, fetchOrganization, refreshMembers });
+ const wrapper = shallowRender({ fetchOrganization, refreshMembers });
expect(wrapper).toMatchSnapshot();
wrapper.setState({ membersSync: true });
await waitAndUpdate(wrapper);
expect(fetchOrganization).toHaveBeenCalledWith('foo');
expect(syncMembers).toHaveBeenCalledWith('foo');
- expect(refreshMembers).toBeCalledTimes(1);
- expect(dismissSyncNotif).toBeCalledTimes(1);
+ expect(refreshMembers).toBeCalled();
});
it('should allow to switch to automatic mode with bitbucket', async () => {
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
users.search_description
"loading": false,
"userGroups": Object {
"11": Object {
+ "default": false,
"description": "Technical accounts",
"id": 11,
"name": "pull-request-analysers",
exports[`should correctly select the groups 1`] = `
Object {
"11": Object {
+ "default": false,
"description": "Technical accounts",
"id": 11,
"name": "pull-request-analysers",
`;
exports[`should render 1`] = `
+<SimpleModal
+ header="organization.members.manage_groups"
+ onClose={[MockFunction]}
+ onSubmit={[Function]}
+>
+ <Component />
+</SimpleModal>
+`;
+
+exports[`should render 2`] = `
<Modal
contentLabel="organization.members.manage_groups"
onRequestClose={[MockFunction]}
>
- <header
- className="modal-head"
- >
- <h2>
- organization.members.manage_groups
- </h2>
- </header>
<form
onSubmit={[Function]}
>
+ <header
+ className="modal-head"
+ >
+ <h2>
+ organization.members.manage_groups
+ </h2>
+ </header>
<div
className="modal-body modal-container"
>
- <strong>
- organization.members.members_groups.Admin Istrator
- </strong>
-
- <i
- className="spinner"
+ <p>
+ <strong>
+ organization.members.members_groups.Admin Istrator
+ </strong>
+ </p>
+ <DeferredSpinner
+ className="spacer-top"
+ timeout={100}
/>
</div>
<footer
className="modal-foot"
>
- <div>
- <SubmitButton>
- save
- </SubmitButton>
- <ResetButtonLink
- onClick={[MockFunction]}
- >
- cancel
- </ResetButtonLink>
- </div>
+ <DeferredSpinner
+ className="spacer-right"
+ loading={false}
+ timeout={100}
+ />
+ <SubmitButton
+ disabled={true}
+ >
+ save
+ </SubmitButton>
+ <ResetButtonLink
+ disabled={false}
+ onClick={[Function]}
+ >
+ cancel
+ </ResetButtonLink>
</footer>
</form>
</Modal>
}
}
organizationGroups={Array []}
- removeMember={[MockFunction]}
updateMemberGroups={[MockFunction]}
/>
<MembersListItem
className="spacer-left"
overlay={
<div
- className="abs-width-300 markdown cut-margins"
+ className="abs-width-300 markdown cut-margins"
>
<p>
organization.members.auto_sync_total_help.github
className="spacer-left"
overlay={
<div
- className="abs-width-300 markdown cut-margins"
+ className="abs-width-300 markdown cut-margins"
>
<p>
organization.members.auto_sync_total_help.github
className="spacer-left"
overlay={
<div
- className="abs-width-300 markdown cut-margins"
+ className="abs-width-300 markdown cut-margins"
>
<p>
organization.members.auto_sync_total_help.bitbucket
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should groups at 0 if the groupCount field is not defined (just added user) 1`] = `
+exports[`should not display the remove member action 1`] = `
+<ActionsDropdown>
+ <ActionsDropdownItem
+ onClick={[Function]}
+ >
+ organization.members.manage_groups
+ </ActionsDropdownItem>
+</ActionsDropdown>
+`;
+
+exports[`should not render actions and groups for non admin 1`] = `
<tr>
<td
className="thin nowrap"
>
<Connect(Avatar)
- hash="7daf6c79d4802916d83f6266e24850af"
- name="John Doe"
+ hash=""
+ name="Admin Istrator"
size={36}
/>
</td>
className="nowrap text-middle"
>
<strong>
- John Doe
+ Admin Istrator
</strong>
<span
className="note little-spacer-left"
>
- john
+ admin
</span>
</td>
- <td
- className="text-right text-middle"
- >
- organization.members.x_groups.0
- </td>
- <td
- className="nowrap text-middle text-right"
- >
- <ActionsDropdown>
- <ActionsDropdownItem
- onClick={[Function]}
- >
- organization.members.manage_groups
- </ActionsDropdownItem>
- <ActionsDropdownDivider />
- <ActionsDropdownItem
- destructive={true}
- onClick={[Function]}
- >
- organization.members.remove
- </ActionsDropdownItem>
- </ActionsDropdown>
- </td>
</tr>
`;
-exports[`should not render actions and groups for non admin 1`] = `
+exports[`should render actions and groups for admin 1`] = `
<tr>
<td
className="thin nowrap"
admin
</span>
</td>
+ <td
+ className="text-right text-middle"
+ >
+ organization.members.x_groups.3
+ </td>
+ <td
+ className="nowrap text-middle text-right"
+ >
+ <ActionsDropdown>
+ <ActionsDropdownItem
+ onClick={[Function]}
+ >
+ organization.members.manage_groups
+ </ActionsDropdownItem>
+ <ActionsDropdownDivider />
+ <ActionsDropdownItem
+ destructive={true}
+ onClick={[Function]}
+ >
+ organization.members.remove
+ </ActionsDropdownItem>
+ </ActionsDropdown>
+ </td>
</tr>
`;
-exports[`should render actions and groups for admin 1`] = `
+exports[`should show groups at 0 if the groupCount field is not defined (just added user) 1`] = `
<tr>
<td
className="thin nowrap"
>
<Connect(Avatar)
- hash=""
- name="Admin Istrator"
+ hash="7daf6c79d4802916d83f6266e24850af"
+ name="John Doe"
size={36}
/>
</td>
className="nowrap text-middle"
>
<strong>
- Admin Istrator
+ John Doe
</strong>
<span
className="note little-spacer-left"
>
- admin
+ john
</span>
</td>
<td
className="text-right text-middle"
>
- organization.members.x_groups.3
+ organization.members.x_groups.0
</td>
<td
className="nowrap text-middle text-right"
"link": <Link
onlyActiveOnIndex={false}
style={Object {}}
+ target="_blank"
to="/documentation/organizations/manage-team/"
>
organization.members.manage_a_team
"link": <Link
onlyActiveOnIndex={false}
style={Object {}}
+ target="_blank"
to="/documentation/organizations/manage-team/"
>
organization.members.manage_a_team
doc={Promise {}}
/>
</div>
- <NewInfoBox
- description="organization.members.auto_sync_members_from_org_x.github"
- onClose={[Function]}
- title="organization.members.auto_sync_with_x.github"
- >
- <Connect(SyncMemberForm)
- dismissSyncNotif={[Function]}
- organization={
- Object {
- "actions": Object {
- "admin": true,
- },
- "alm": Object {
- "key": "github",
- "membersSync": false,
- "url": "https://github.com/foo",
- },
- "key": "foo",
- "name": "Foo",
- }
- }
- refreshMembers={[MockFunction]}
- />
- </NewInfoBox>
</div>
<div
className="page-description"
"link": <Link
onlyActiveOnIndex={false}
style={Object {}}
+ target="_blank"
to="/documentation/organizations/manage-team/"
>
organization.members.manage_a_team
}
}
/>
+ <Alert
+ className="spacer-top"
+ display="inline"
+ variant="info"
+ >
+ organization.members.auto_sync_members_from_org_x.organization.github
+ <span
+ className="spacer-left"
+ >
+ <Connect(SyncMemberForm)
+ organization={
+ Object {
+ "actions": Object {
+ "admin": true,
+ },
+ "alm": Object {
+ "key": "github",
+ "membersSync": false,
+ "url": "https://github.com/foo",
+ },
+ "key": "foo",
+ "name": "Foo",
+ }
+ }
+ refreshMembers={[MockFunction]}
+ />
+ </span>
+ </Alert>
</div>
</header>
`;
<Suggestions
suggestions="organization_members"
/>
- <Connect(MembersPageHeader)
+ <MembersPageHeader
handleAddMember={[Function]}
loading={true}
organization={
<Suggestions
suggestions="organization_members"
/>
- <Connect(MembersPageHeader)
+ <MembersPageHeader
handleAddMember={[Function]}
loading={false}
members={
total={3}
/>
<MembersList
+ currentUser={
+ Object {
+ "groups": Array [],
+ "isLoggedIn": true,
+ "login": "luke",
+ "name": "Skywalker",
+ "scmAccounts": Array [],
+ }
+ }
members={
Array [
Object {
cancelButtonText="close"
confirmButtonText="save"
confirmDisable={true}
- medium={true}
modalBody={
- <React.Fragment>
- <div
- className="display-flex-stretch big-spacer-top"
+ <div
+ className="display-flex-stretch big-spacer-top"
+ >
+ <RadioCard
+ onClick={[Function]}
+ selected={true}
+ title="organization.members.management.manual"
>
- <RadioCard
- onClick={[Function]}
- selected={true}
- title="organization.members.management.manual"
+ <div
+ className="spacer-left"
>
- <div
- className="spacer-left"
+ <ul
+ className="big-spacer-left note"
>
- <ul
- className="big-spacer-left note"
+ <li
+ className="spacer-bottom"
>
+ organization.members.management.manual.add_members_manually
+ </li>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ </RadioCard>
+ <RadioCard
+ onClick={[Function]}
+ selected={false}
+ title="organization.members.management.automatic.bitbucket"
+ >
+ <div
+ className="spacer-left"
+ >
+ <ul
+ className="big-spacer-left note"
+ >
+ <React.Fragment>
<li
className="spacer-bottom"
>
- organization.members.management.manual.add_members_manually
+ organization.members.management.automatic.synchronized_from_x.organization.bitbucket
</li>
- <li>
- organization.members.management.manual.choose_members_permissions
+ <li
+ className="spacer-bottom"
+ >
+ organization.members.management.automatic.members_changes_reflected.bitbucket
</li>
- </ul>
- </div>
- </RadioCard>
- <RadioCard
- onClick={[Function]}
- selected={false}
- title="organization.members.management.automatic.bitbucket"
+ </React.Fragment>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ <Alert
+ className="big-spacer-top"
+ variant="warning"
>
- <div
- className="spacer-left"
- >
- <ul
- className="big-spacer-left note"
- >
- <React.Fragment>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.synchronized_from_x.bitbucket
- </li>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.members_changes_reflected.bitbucket
- </li>
- </React.Fragment>
- <li>
- organization.members.management.automatic.still_choose_members_permissions
- </li>
- </ul>
- </div>
- <Alert
- className="big-spacer-top"
- variant="warning"
- >
- organization.members.management.automatic.warning
- </Alert>
- </RadioCard>
- </div>
- </React.Fragment>
+ organization.members.management.automatic.warning
+ </Alert>
+ </RadioCard>
+ </div>
}
modalHeader="organization.members.management.title"
modalHeaderDescription={
</p>
}
onConfirm={[Function]}
+ size="medium"
>
<Component />
</ConfirmButton>
cancelButtonText="close"
confirmButtonText="save"
confirmDisable={true}
- medium={true}
modalBody={
- <React.Fragment>
- <div
- className="display-flex-stretch big-spacer-top"
+ <div
+ className="display-flex-stretch big-spacer-top"
+ >
+ <RadioCard
+ onClick={[Function]}
+ selected={true}
+ title="organization.members.management.manual"
>
- <RadioCard
- onClick={[Function]}
- selected={true}
- title="organization.members.management.manual"
+ <div
+ className="spacer-left"
>
- <div
- className="spacer-left"
+ <ul
+ className="big-spacer-left note"
>
- <ul
- className="big-spacer-left note"
+ <li
+ className="spacer-bottom"
>
+ organization.members.management.manual.add_members_manually
+ </li>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ </RadioCard>
+ <RadioCard
+ onClick={[Function]}
+ selected={false}
+ title="organization.members.management.automatic.github"
+ >
+ <div
+ className="spacer-left"
+ >
+ <ul
+ className="big-spacer-left note"
+ >
+ <React.Fragment>
<li
className="spacer-bottom"
>
- organization.members.management.manual.add_members_manually
+ organization.members.management.automatic.synchronized_from_x.organization.github
</li>
- <li>
- organization.members.management.manual.choose_members_permissions
+ <li
+ className="spacer-bottom"
+ >
+ organization.members.management.automatic.members_changes_reflected.github
</li>
- </ul>
- </div>
- </RadioCard>
- <RadioCard
- onClick={[Function]}
- selected={false}
- title="organization.members.management.automatic.github"
+ </React.Fragment>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ <Alert
+ className="big-spacer-top"
+ variant="warning"
>
- <div
- className="spacer-left"
- >
- <ul
- className="big-spacer-left note"
- >
- <React.Fragment>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.synchronized_from_x.github
- </li>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.members_changes_reflected.github
- </li>
- </React.Fragment>
- <li>
- organization.members.management.automatic.still_choose_members_permissions
- </li>
- </ul>
- </div>
- <Alert
- className="big-spacer-top"
- variant="warning"
- >
- organization.members.management.automatic.warning
- </Alert>
- </RadioCard>
- </div>
- </React.Fragment>
+ organization.members.management.automatic.warning
+ </Alert>
+ </RadioCard>
+ </div>
}
modalHeader="organization.members.management.title"
modalHeaderDescription={
</p>
}
onConfirm={[Function]}
+ size="medium"
>
<Component />
</ConfirmButton>
cancelButtonText="close"
confirmButtonText="save"
confirmDisable={true}
- medium={true}
modalBody={
- <React.Fragment>
- <div
- className="display-flex-stretch big-spacer-top"
+ <div
+ className="display-flex-stretch big-spacer-top"
+ >
+ <RadioCard
+ onClick={[Function]}
+ selected={false}
+ title="organization.members.management.manual"
>
- <RadioCard
- onClick={[Function]}
- selected={false}
- title="organization.members.management.manual"
+ <div
+ className="spacer-left"
>
- <div
- className="spacer-left"
+ <ul
+ className="big-spacer-left note"
>
- <ul
- className="big-spacer-left note"
+ <li
+ className="spacer-bottom"
>
+ organization.members.management.manual.add_members_manually
+ </li>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ </RadioCard>
+ <RadioCard
+ onClick={[Function]}
+ selected={true}
+ title="organization.members.management.automatic.github"
+ >
+ <div
+ className="spacer-left"
+ >
+ <ul
+ className="big-spacer-left note"
+ >
+ <React.Fragment>
<li
className="spacer-bottom"
>
- organization.members.management.manual.add_members_manually
- </li>
- <li>
- organization.members.management.manual.choose_members_permissions
+ organization.members.management.automatic.synchronized_from_x.organization.github
</li>
- </ul>
- </div>
- </RadioCard>
- <RadioCard
- onClick={[Function]}
- selected={true}
- title="organization.members.management.automatic.github"
- >
- <div
- className="spacer-left"
- >
- <ul
- className="big-spacer-left note"
- >
- <React.Fragment>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.synchronized_from_x.github
- </li>
- <li
- className="spacer-bottom"
- >
- organization.members.management.automatic.members_changes_reflected.github
- </li>
- </React.Fragment>
- <li>
- organization.members.management.automatic.still_choose_members_permissions
+ <li
+ className="spacer-bottom"
+ >
+ organization.members.management.automatic.members_changes_reflected.github
</li>
- </ul>
- </div>
- </RadioCard>
- </div>
- </React.Fragment>
+ </React.Fragment>
+ <li>
+ organization.members.management.choose_members_permissions
+ </li>
+ </ul>
+ </div>
+ </RadioCard>
+ </div>
}
modalHeader="organization.members.management.title"
modalHeaderDescription={
</p>
}
onConfirm={[Function]}
+ size="medium"
>
<Component />
</ConfirmButton>
<div className="boxed-group boxed-group-inner">
<form onSubmit={this.handleSubmit}>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="organization-name">
{translate('organization.name')}
<em className="mandatory">*</em>
</label>
<input
+ className="input-super-large"
disabled={this.state.loading}
id="organization-name"
maxLength={255}
type="text"
value={this.state.name}
/>
- <div className="modal-field-description">
+ <div className="form-field-description">
{translate('organization.name.description')}
</div>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="organization-avatar">{translate('organization.avatar')}</label>
<input
+ className="input-super-large"
disabled={this.state.loading}
id="organization-avatar"
maxLength={256}
type="text"
value={this.state.avatar}
/>
- <div className="modal-field-description">
+ <div className="form-field-description">
{translate('organization.avatar.description')}
</div>
{(this.state.avatarImage || this.state.name) && (
- <div className="spacer-top spacer-bottom">
+ <div className="spacer-top">
<div className="little-spacer-bottom">
{translate('organization.avatar.preview')}
{':'}
</div>
)}
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="organization-description">{translate('description')}</label>
<textarea
+ className="input-super-large"
disabled={this.state.loading}
id="organization-description"
maxLength={256}
rows={3}
value={this.state.description}
/>
- <div className="modal-field-description">
+ <div className="form-field-description">
{translate('organization.description.description')}
</div>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="organization-url">{translate('organization.url')}</label>
<input
+ className="input-super-large"
disabled={this.state.loading}
id="organization-url"
maxLength={256}
type="text"
value={this.state.url}
/>
- <div className="modal-field-description">
+ <div className="form-field-description">
{translate('organization.url.description')}
</div>
</div>
- <div className="modal-field">
- <SubmitButton disabled={this.state.loading}>{translate('save')}</SubmitButton>
- {this.state.loading && <i className="spinner spacer-left" />}
- </div>
+ <SubmitButton disabled={this.state.loading}>{translate('save')}</SubmitButton>
+ {this.state.loading && <i className="spinner spacer-left" />}
</form>
</div>
</div>
*/
.organization-empty {
margin: 100px auto 0;
- width: 800px;
+ width: 472px;
}
return (
<div className="organization-empty">
<h3 className="text-center">{translate('onboarding.create_organization.ready')}</h3>
- <div className="onboarding-choices">
- <Button className="onboarding-choice" onClick={this.handleNewProjectClick}>
+ <div className="display-flex-space-around huge-spacer-top">
+ <Button className="button-huge" onClick={this.handleNewProjectClick}>
<OnboardingProjectIcon className="big-spacer-bottom" />
- <h6 className="onboarding-choice-name">
- {translate('provisioning.analyze_new_project')}
- </h6>
+ <p className="medium spacer-top">{translate('provisioning.analyze_new_project')}</p>
</Button>
{!memberSyncActivated && (
- <Button className="onboarding-choice" onClick={this.handleAddMembersClick}>
+ <Button className="button-huge" onClick={this.handleAddMembersClick}>
<OnboardingAddMembersIcon />
- <h6 className="onboarding-choice-name">
- {translate('organization.members.add.multiple')}
- </h6>
+ <p className="medium spacer-top">{translate('organization.members.add.multiple')}</p>
</Button>
)}
</div>
onSubmit={[Function]}
>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-name"
</em>
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-name"
maxLength={255}
value="Foo"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.name.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-avatar"
organization.avatar
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-avatar"
maxLength={256}
value=""
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.avatar.description
</div>
<div
- className="spacer-top spacer-bottom"
+ className="spacer-top"
>
<div
className="little-spacer-bottom"
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-description"
description
</label>
<textarea
+ className="input-super-large"
disabled={false}
id="organization-description"
maxLength={256}
value=""
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.description.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-url"
organization.url
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-url"
maxLength={256}
value=""
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.url.description
</div>
</div>
- <div
- className="modal-field"
+ <SubmitButton
+ disabled={false}
>
- <SubmitButton
- disabled={false}
- >
- save
- </SubmitButton>
- </div>
+ save
+ </SubmitButton>
</form>
</div>
</div>
onSubmit={[Function]}
>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-name"
</em>
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-name"
maxLength={255}
value="New Foo"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.name.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-avatar"
organization.avatar
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-avatar"
maxLength={256}
value="foo-avatar"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.avatar.description
</div>
<div
- className="spacer-top spacer-bottom"
+ className="spacer-top"
>
<div
className="little-spacer-bottom"
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-description"
description
</label>
<textarea
+ className="input-super-large"
disabled={false}
id="organization-description"
maxLength={256}
value="foo-description"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.description.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-url"
organization.url
</label>
<input
+ className="input-super-large"
disabled={false}
id="organization-url"
maxLength={256}
value="foo-url"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.url.description
</div>
</div>
- <div
- className="modal-field"
+ <SubmitButton
+ disabled={false}
>
- <SubmitButton
- disabled={false}
- >
- save
- </SubmitButton>
- </div>
+ save
+ </SubmitButton>
</form>
</div>
</div>
onSubmit={[Function]}
>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-name"
</em>
</label>
<input
+ className="input-super-large"
disabled={true}
id="organization-name"
maxLength={255}
value="New Foo"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.name.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-avatar"
organization.avatar
</label>
<input
+ className="input-super-large"
disabled={true}
id="organization-avatar"
maxLength={256}
value="foo-avatar"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.avatar.description
</div>
<div
- className="spacer-top spacer-bottom"
+ className="spacer-top"
>
<div
className="little-spacer-bottom"
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-description"
description
</label>
<textarea
+ className="input-super-large"
disabled={true}
id="organization-description"
maxLength={256}
value="foo-description"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.description.description
</div>
</div>
<div
- className="modal-field"
+ className="form-field"
>
<label
htmlFor="organization-url"
organization.url
</label>
<input
+ className="input-super-large"
disabled={true}
id="organization-url"
maxLength={256}
value="foo-url"
/>
<div
- className="modal-field-description"
+ className="form-field-description"
>
organization.url.description
</div>
</div>
- <div
- className="modal-field"
+ <SubmitButton
+ disabled={true}
>
- <SubmitButton
- disabled={true}
- >
- save
- </SubmitButton>
- <i
- className="spinner spacer-left"
- />
- </div>
+ save
+ </SubmitButton>
+ <i
+ className="spinner spacer-left"
+ />
</form>
</div>
</div>
onboarding.create_organization.ready
</h3>
<div
- className="onboarding-choices"
+ className="display-flex-space-around huge-spacer-top"
>
<Button
- className="onboarding-choice"
+ className="button-huge"
onClick={[Function]}
>
<OnboardingProjectIcon
className="big-spacer-bottom"
/>
- <h6
- className="onboarding-choice-name"
+ <p
+ className="medium spacer-top"
>
provisioning.analyze_new_project
- </h6>
+ </p>
</Button>
</div>
</div>
onboarding.create_organization.ready
</h3>
<div
- className="onboarding-choices"
+ className="display-flex-space-around huge-spacer-top"
>
<Button
- className="onboarding-choice"
+ className="button-huge"
onClick={[Function]}
>
<OnboardingProjectIcon
className="big-spacer-bottom"
/>
- <h6
- className="onboarding-choice-name"
+ <p
+ className="medium spacer-top"
>
provisioning.analyze_new_project
- </h6>
+ </p>
</Button>
<Button
- className="onboarding-choice"
+ className="button-huge"
onClick={[Function]}
>
<OnboardingAddMembersIcon />
- <h6
- className="onboarding-choice-name"
+ <p
+ className="medium spacer-top"
>
organization.members.add.multiple
- </h6>
+ </p>
</Button>
</div>
</div>
import * as React from 'react';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import SimpleModal from '../../../components/controls/SimpleModal';
-import { translate } from '../../../helpers/l10n';
import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
+import { translate } from '../../../helpers/l10n';
interface Props {
confirmButtonText: string;
header: string;
- permissionTemplate?: { description?: string; name: string; projectKeyPattern?: string };
onClose: () => void;
onSubmit: (
data: { description: string; name: string; projectKeyPattern: string }
) => Promise<void>;
+ permissionTemplate?: { description?: string; name: string; projectKeyPattern?: string };
}
interface State {
<SimpleModal
header={this.props.header}
onClose={this.props.onClose}
- onSubmit={this.handleSubmit}>
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form id="permission-template-form" onSubmit={onFormSubmit}>
<header className="modal-head">
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Form from '../Form';
+
+it('render correctly', () => {
+ expect(
+ shallow(
+ <Form confirmButtonText="confirm" header="title" onClose={jest.fn()} onSubmit={jest.fn()} />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render correctly 1`] = `
+<SimpleModal
+ header="title"
+ onClose={[MockFunction]}
+ onSubmit={[Function]}
+ size="small"
+>
+ <Component />
+</SimpleModal>
+`;
);
return (
- <SimpleModal header={header} onClose={this.props.onClose} onSubmit={this.handleSubmit}>
+ <SimpleModal
+ header={header}
+ onClose={this.props.onClose}
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form id="project-permissions-apply-template-form" onSubmit={onFormSubmit}>
<header className="modal-head">
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ApplyTemplate from '../ApplyTemplate';
+import { waitAndUpdate } from '../../../../../helpers/testUtils';
+
+jest.mock('../../../../../api/permissions', () => ({
+ getPermissionTemplates: jest.fn().mockResolvedValue({
+ permissionTemplates: [
+ {
+ id: 'tmp1',
+ name: 'SonarSource projects',
+ createdAt: '2015-11-27T15:20:32+0100',
+ permissions: [
+ { key: 'admin', usersCount: 0, groupsCount: 3 },
+ { key: 'codeviewer', usersCount: 0, groupsCount: 6 }
+ ]
+ }
+ ],
+ defaultTemplates: [{ templateId: 'tmp1', qualifier: 'TRK' }],
+ permissions: [
+ { key: 'admin', name: 'Administer', description: 'Administer access' },
+ { key: 'codeviewer', name: 'See Source Code', description: 'View code' }
+ ]
+ })
+}));
+
+it('render correctly', async () => {
+ const wrapper = shallow(
+ <ApplyTemplate onClose={jest.fn()} organization="foo" project={{ key: 'foo', name: 'Foo' }} />
+ );
+ expect(wrapper).toMatchSnapshot();
+ await waitAndUpdate(wrapper);
+ expect(wrapper.dive()).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render correctly 1`] = `
+<SimpleModal
+ header="projects_role.apply_template_to_xxx.Foo"
+ onClose={[MockFunction]}
+ onSubmit={[Function]}
+ size="small"
+>
+ <Component />
+</SimpleModal>
+`;
+
+exports[`render correctly 2`] = `
+<Modal
+ contentLabel="projects_role.apply_template_to_xxx.Foo"
+ onRequestClose={[MockFunction]}
+ size="small"
+>
+ <form
+ id="project-permissions-apply-template-form"
+ onSubmit={[Function]}
+ >
+ <header
+ className="modal-head"
+ >
+ <h2>
+ projects_role.apply_template_to_xxx.Foo
+ </h2>
+ </header>
+ <div
+ className="modal-body"
+ >
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="project-permissions-template"
+ >
+ template
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <Select
+ clearable={false}
+ id="project-permissions-template"
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "SonarSource projects",
+ "value": "tmp1",
+ },
+ ]
+ }
+ />
+ </div>
+ </div>
+ <footer
+ className="modal-foot"
+ >
+ <DeferredSpinner
+ className="spacer-right"
+ loading={false}
+ timeout={100}
+ />
+ <SubmitButton
+ disabled={true}
+ >
+ apply
+ </SubmitButton>
+ <ResetButtonLink
+ onClick={[Function]}
+ >
+ cancel
+ </ResetButtonLink>
+ </footer>
+ </form>
+</Modal>
+`;
confirmDisable={!this.state.name}
header={translate(this.props.addEventButtonText)}
onClose={this.props.onClose}
- onConfirm={this.handleSubmit}>
+ onConfirm={this.handleSubmit}
+ size="small">
<div className="modal-field">
<label>{translate('name')}</label>
<input
interface Props {
changeEvent: (event: string, name: string) => Promise<void>;
- header: string;
event: T.AnalysisEvent;
+ header: string;
onClose: () => void;
}
confirmDisable={!name || name === this.props.event.name}
header={this.props.header}
onClose={this.props.onClose}
- onConfirm={this.handleSubmit}>
+ onConfirm={this.handleSubmit}
+ size="small">
<div className="modal-field">
<label>{translate('name')}</label>
<input autoFocus={true} onChange={this.changeInput} type="text" value={name} />
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import AddEventForm from '../AddEventForm';
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <AddEventForm
+ addEvent={jest.fn()}
+ addEventButtonText="add"
+ analysis={{
+ key: '1',
+ date: new Date('2019-01-14T15:44:51.000Z'),
+ events: [{ key: '2', category: 'VERSION', name: '1.0' }],
+ codePeriodVersion: '1.0',
+ manualNewCodePeriodBaseline: false
+ }}
+ onClose={jest.fn()}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ChangeEventForm from '../ChangeEventForm';
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <ChangeEventForm
+ changeEvent={jest.fn()}
+ event={{ category: 'VERSION', key: '1', name: '1.0' }}
+ header="change"
+ onClose={jest.fn()}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<ConfirmModal
+ confirmButtonText="save"
+ confirmDisable={true}
+ header="add"
+ onClose={[MockFunction]}
+ onConfirm={[Function]}
+ size="small"
+>
+ <div
+ className="modal-field"
+ >
+ <label>
+ name
+ </label>
+ <input
+ autoFocus={true}
+ onChange={[Function]}
+ type="text"
+ value=""
+ />
+ </div>
+</ConfirmModal>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<ConfirmModal
+ confirmButtonText="change_verb"
+ confirmDisable={true}
+ header="change"
+ onClose={[MockFunction]}
+ onConfirm={[Function]}
+ size="small"
+>
+ <div
+ className="modal-field"
+ >
+ <label>
+ name
+ </label>
+ <input
+ autoFocus={true}
+ onChange={[Function]}
+ type="text"
+ value="1.0"
+ />
+ </div>
+</ConfirmModal>
+`;
this.state.loading || !this.state.name || this.state.name === branch.name;
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<header className="modal-head">
<h2>{header}</h2>
</header>
className="big-spacer-bottom markdown"
dangerouslySetInnerHTML={{ __html: translate(`property.${setting.key}.description`) }}
/>
- <div className="big-spacer-bottom">
+ <div className="modal-field">
<input
autoFocus={true}
className="input-super-large"
value={this.state.value}
/>
{setting.inherited && (
- <div className="note spacer-top">{translate('settings._default')}</div>
+ <div className="modal-field-description">{translate('settings._default')}</div>
)}
{!setting.inherited &&
setting.parentValue && (
- <div className="note spacer-top">
+ <div className="modal-field-description">
{translateWithParameters('settings.default_x', setting.parentValue)}
</div>
)}
<Modal
contentLabel="branches.rename"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="branches.rename"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="branches.rename"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
}
/>
<div
- className="big-spacer-bottom"
+ className="modal-field"
>
<input
autoFocus={true}
value="release-.*"
/>
<div
- className="note spacer-top"
+ className="modal-field-description"
>
settings._default
</div>
}
/>
<div
- className="big-spacer-bottom"
+ className="modal-field"
>
<input
autoFocus={true}
value="release-.*"
/>
<div
- className="note spacer-top"
+ className="modal-field-description"
>
settings.default_x.branch-.*
</div>
const header = translate('project_links.create_new_project_link');
return (
- <SimpleModal header={header} onClose={this.props.onClose} onSubmit={this.handleSubmit}>
+ <SimpleModal
+ header={header}
+ onClose={this.props.onClose}
+ onSubmit={this.handleSubmit}
+ size="small">
{({ onCloseClick, onFormSubmit, submitting }) => (
<form onSubmit={onFormSubmit}>
<header className="modal-head">
<Modal
contentLabel="project_links.create_new_project_link"
onRequestClose={[MockFunction]}
+ size="small"
>
<form
onSubmit={[Function]}
const header = translate('permission_templates.bulk_apply_permission_template');
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<header className="modal-head">
<h2>{header}</h2>
</header>
{organization.actions &&
organization.actions.admin &&
!organization.canUpdateProjectsVisibilityToPrivate && (
- <div className="spacer-top display-flex-space-around">
+ <div className="spacer-top">
<UpgradeOrganizationBox
+ className="width-100"
insideModal={true}
onOrganizationUpgrade={this.props.onOrganizationUpgrade}
organization={organization}
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
<Modal
contentLabel="permission_templates.bulk_apply_permission_template"
onRequestClose={[MockFunction]}
+ size="small"
>
<header
className="modal-head"
/>
</div>
<div
- className="spacer-top display-flex-space-around"
+ className="spacer-top"
>
<UpgradeOrganizationBox
+ className="width-100"
insideModal={true}
onOrganizationUpgrade={[MockFunction]}
organization={
/>
</div>
<div
- className="spacer-top display-flex-space-around"
+ className="spacer-top"
>
<UpgradeOrganizationBox
+ className="width-100"
insideModal={true}
onOrganizationUpgrade={[MockFunction]}
organization={
/>
</div>
<div
- className="spacer-top display-flex-space-around"
+ className="spacer-top"
>
<UpgradeOrganizationBox
+ className="width-100"
insideModal={true}
onOrganizationUpgrade={[MockFunction]}
organization={
confirmDisable={metric === undefined}
header={header}
onClose={onClose}
- onConfirm={this.handleFormSubmit}>
+ onConfirm={this.handleFormSubmit}
+ size="small">
{this.state.errorMessage && <Alert variant="error">{this.state.errorMessage}</Alert>}
<div className="modal-field">
<label htmlFor="condition-metric">{translate('quality_gates.conditions.metric')}</label>
</div>
{metric && (
<>
- <div className="modal-field">
+ <div className="modal-field display-inline-block">
<label htmlFor="condition-operator">
{translate('quality_gates.conditions.operator')}
</label>
op={op}
/>
</div>
- <div className="modal-field">
+ <div className="modal-field display-inline-block spacer-left">
<label htmlFor="condition-threshold">
{translate('quality_gates.conditions.error')}
</label>
import { getPossibleOperators } from '../utils';
interface Props {
- op?: string;
metric: T.Metric;
onOperatorChange: (op: string) => void;
+ op?: string;
}
export default class ConditionOperator extends React.PureComponent<Props> {
/>
);
} else {
- return <span className="note">{this.getLabel(operators, this.props.metric)}</span>;
+ return (
+ <span className="display-inline-block note abs-width-150">
+ {this.getLabel(operators, this.props.metric)}
+ </span>
+ );
}
}
}
confirmDisable={confirmDisable}
header={translate('quality_gates.copy')}
onClose={this.props.onClose}
- onConfirm={this.handleCopy}>
+ onConfirm={this.handleCopy}
+ size="small">
<div className="modal-field">
<label htmlFor="quality-gate-form-name">
{translate('name')}
confirmDisable={!name}
header={translate('quality_gates.create')}
onClose={this.props.onClose}
- onConfirm={this.handleCreate}>
+ onConfirm={this.handleCreate}
+ size="small">
<div className="modal-field">
<label htmlFor="quality-gate-form-name">
{translate('name')}
export default class MetricSelect extends React.PureComponent<Props, State> {
state = { value: -1 };
- handleChange = ({ value }: Option) => {
+ handleChange = (option: Option | null) => {
+ const value = option ? option.value : -1;
this.setState({ value });
this.props.onMetricChange(this.props.metrics[value]);
};
return (
<Select
- className="text-middle input-large"
+ className="text-middle"
id="condition-metric"
onChange={this.handleChange}
options={optionsWithDomains}
confirmDisable={confirmDisable}
header={translate('quality_gates.rename')}
onClose={this.props.onClose}
- onConfirm={this.handleRename}>
+ onConfirm={this.handleRename}
+ size="small">
<div className="modal-field">
<label htmlFor="quality-gate-form-name">
{translate('name')}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ConditionModal from '../ConditionModal';
+import { mockQualityGate } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+ const wrapper = shallowRender();
+ expect(wrapper).toMatchSnapshot();
+
+ wrapper.instance().handleMetricChange({ id: '1', key: 'foo', name: 'Foo', type: 'PERCENT' });
+ expect(wrapper).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<ConditionModal['props']> = {}) {
+ return shallow<ConditionModal>(
+ <ConditionModal
+ header="a"
+ onAddCondition={jest.fn()}
+ onClose={jest.fn()}
+ qualityGate={mockQualityGate()}
+ {...props}
+ />
+ );
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ConditionOperator from '../ConditionOperator';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<ConditionOperator['props']> = {}) {
+ return shallow(
+ <ConditionOperator
+ metric={{ id: '1', key: 'foo', name: 'Foo', type: 'PERCENT' }}
+ onOperatorChange={jest.fn()}
+ op="LT"
+ {...props}
+ />
+ );
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import CopyQualityGateForm from '../CopyQualityGateForm';
+import { mockQualityGate } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <CopyQualityGateForm onClose={jest.fn()} onCopy={jest.fn()} qualityGate={mockQualityGate()} />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import CreateQualityGateForm from '../CreateQualityGateForm';
+
+it('should render correctly', () => {
+ expect(
+ shallow(<CreateQualityGateForm onClose={jest.fn()} onCreate={jest.fn()} />)
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import MetricSelect from '../MetricSelect';
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <MetricSelect
+ metrics={[
+ {
+ id: '1',
+ key: '1',
+ name: 'metric 1',
+ type: 'test'
+ }
+ ]}
+ onMetricChange={jest.fn()}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import RenameQualityGateForm from '../RenameQualityGateForm';
+import { mockQualityGate } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <RenameQualityGateForm
+ onClose={jest.fn()}
+ onRename={jest.fn()}
+ qualityGate={mockQualityGate()}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<ConfirmModal
+ confirmButtonText="a"
+ confirmDisable={true}
+ header="a"
+ onClose={[MockFunction]}
+ onConfirm={[Function]}
+ size="small"
+>
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="condition-metric"
+ >
+ quality_gates.conditions.metric
+ </label>
+ </div>
+</ConfirmModal>
+`;
+
+exports[`should render correctly 2`] = `
+<ConfirmModal
+ confirmButtonText="a"
+ confirmDisable={false}
+ header="a"
+ onClose={[MockFunction]}
+ onConfirm={[Function]}
+ size="small"
+>
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="condition-metric"
+ >
+ quality_gates.conditions.metric
+ </label>
+ </div>
+ <div
+ className="modal-field display-inline-block"
+ >
+ <label
+ htmlFor="condition-operator"
+ >
+ quality_gates.conditions.operator
+ </label>
+ <ConditionOperator
+ metric={
+ Object {
+ "id": "1",
+ "key": "foo",
+ "name": "Foo",
+ "type": "PERCENT",
+ }
+ }
+ onOperatorChange={[Function]}
+ />
+ </div>
+ <div
+ className="modal-field display-inline-block spacer-left"
+ >
+ <label
+ htmlFor="condition-threshold"
+ >
+ quality_gates.conditions.error
+ </label>
+ <ThresholdInput
+ metric={
+ Object {
+ "id": "1",
+ "key": "foo",
+ "name": "Foo",
+ "type": "PERCENT",
+ }
+ }
+ name="error"
+ onChange={[Function]}
+ value=""
+ />
+ </div>
+</ConfirmModal>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Select
+ autoFocus={true}
+ className="input-medium"
+ clearable={false}
+ id="condition-operator"
+ name="operator"
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "quality_gates.operator.LT",
+ "value": "LT",
+ },
+ Object {
+ "label": "quality_gates.operator.GT",
+ "value": "GT",
+ },
+ ]
+ }
+ searchable={false}
+ value="LT"
+/>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<CopyQualityGateForm
+ onClose={[MockFunction]}
+ onCopy={[MockFunction]}
+ qualityGate={
+ Object {
+ "id": 1,
+ "name": "qualitygate",
+ }
+ }
+/>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<CreateQualityGateForm
+ onClose={[MockFunction]}
+ onCreate={[MockFunction]}
+/>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Select
+ className="text-middle"
+ id="condition-metric"
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "domain": undefined,
+ "label": "metric 1",
+ "value": 0,
+ },
+ ]
+ }
+ placeholder="search.search_for_metrics"
+ value={-1}
+/>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<ConfirmModal
+ confirmButtonText="rename"
+ confirmDisable={true}
+ header="quality_gates.rename"
+ onClose={[MockFunction]}
+ onConfirm={[Function]}
+ size="small"
+>
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="quality-gate-form-name"
+ >
+ name
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ autoFocus={true}
+ id="quality-gate-form-name"
+ maxLength={100}
+ onChange={[Function]}
+ required={true}
+ size={50}
+ type="text"
+ value="qualitygate"
+ />
+ </div>
+</ConfirmModal>
+`;
this.state.loading || !this.state.name || this.state.name === profile.name;
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form id="copy-profile-form" onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{header}</h2>
);
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form>
<div className="modal-head">
<h2>{header}</h2>
this.state.loading || !this.state.name || this.state.name === profile.name;
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form id="rename-profile-form" onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{header}</h2>
<Modal
contentLabel="quality_profiles.extend_x_title.name.JavaScript"
onRequestClose={[MockFunction]}
+ size="small"
>
<form>
<div
return (
<Modal
contentLabel={translate('quality_profiles.change_parent')}
- onRequestClose={this.props.onClose}>
+ onRequestClose={this.props.onClose}
+ size="small">
<form id="change-profile-parent-form" onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{translate('quality_profiles.change_parent')}</h2>
</header>
<form onSubmit={this.handleFormSubmit}>
<div className="modal-body">
- <div className="modal-large-field">
+ <div className="modal-field">
<label>{translate('quality_profiles.search_description')}</label>
<ProfilePermissionsFormSelect
onChange={this.handleValueChange}
function optionRenderer(option: OptionWithValue) {
return isUser(option) ? (
- <div>
+ <>
<Avatar hash={option.avatar} name={option.name} size={16} />
<strong className="spacer-left">{option.name}</strong>
<span className="note little-spacer-left">{option.login}</span>
- </div>
+ </>
) : (
- <div>
+ <>
<GroupIcon size={16} />
<strong className="spacer-left">{option.name}</strong>
- </div>
+ </>
);
}
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
className="modal-body"
>
<div
- className="modal-large-field"
+ className="modal-field"
>
<label>
quality_profiles.search_description
}
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form id="create-profile-form" onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{header}</h2>
value={this.state.name}
/>
</div>
- <div className="modal-field spacer-bottom">
+ <div className="modal-field">
<label htmlFor="create-profile-language">
{translate('language')}
<em className="mandatory">*</em>
);
};
+ renderAlert(profile: { name: string }, ruleFailures = 0, ruleSuccesses: number): React.ReactNode {
+ return ruleFailures ? (
+ <Alert variant="warning">
+ {translateWithParameters(
+ 'quality_profiles.restore_profile.warning',
+ profile.name,
+ ruleSuccesses,
+ ruleFailures
+ )}
+ </Alert>
+ ) : (
+ <Alert variant="success">
+ {translateWithParameters(
+ 'quality_profiles.restore_profile.success',
+ profile.name,
+ ruleSuccesses
+ )}
+ </Alert>
+ );
+ }
+
render() {
const header = translate('quality_profiles.restore_profile');
const { loading, profile, ruleFailures, ruleSuccesses } = this.state;
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form id="restore-profile-form" onSubmit={this.handleFormSubmit}>
<div className="modal-head">
<h2>{header}</h2>
<div className="modal-body">
{profile != null && ruleSuccesses != null ? (
- ruleFailures ? (
- <Alert variant="warning">
- {translateWithParameters(
- 'quality_profiles.restore_profile.warning',
- profile.name,
- ruleSuccesses,
- ruleFailures
- )}
- </Alert>
- ) : (
- <Alert variant="success">
- {translateWithParameters(
- 'quality_profiles.restore_profile.success',
- profile.name,
- ruleSuccesses
- )}
- </Alert>
- )
+ this.renderAlert(profile, ruleFailures, ruleSuccesses)
) : (
<div className="modal-field">
<label htmlFor="restore-profile-backup">
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import CreateProfileForm from '../CreateProfileForm';
+import { mockQualityProfile } from '../../../../helpers/testMocks';
+
+jest.mock('../../../../api/quality-profiles', () => ({
+ changeProfileParent: jest.fn(),
+ createQualityProfile: jest.fn(),
+ getImporters: jest.fn().mockResolvedValue([])
+}));
+
+it('should render correctly', () => {
+ expect(
+ shallow(
+ <CreateProfileForm
+ languages={[{ key: 'kr', name: 'Hangeul' }]}
+ onClose={jest.fn()}
+ onCreate={jest.fn()}
+ organization="org"
+ profiles={[mockQualityProfile()]}
+ />
+ )
+ ).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import RestoreProfileForm from '../RestoreProfileForm';
+
+it('should render correctly', () => {
+ expect(
+ shallow(<RestoreProfileForm onClose={jest.fn()} onRestore={jest.fn()} organization="org" />)
+ ).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Modal
+ contentLabel="quality_profiles.new_profile"
+ onRequestClose={[MockFunction]}
+ size="small"
+>
+ <form
+ id="create-profile-form"
+ onSubmit={[Function]}
+ >
+ <div
+ className="modal-head"
+ >
+ <h2>
+ quality_profiles.new_profile
+ </h2>
+ </div>
+ <div
+ className="modal-body"
+ >
+ <i
+ className="spinner"
+ />
+ </div>
+ <div
+ className="modal-foot"
+ >
+ <ResetButtonLink
+ id="create-profile-cancel"
+ onClick={[MockFunction]}
+ >
+ cancel
+ </ResetButtonLink>
+ </div>
+ </form>
+</Modal>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Modal
+ contentLabel="quality_profiles.restore_profile"
+ onRequestClose={[MockFunction]}
+ size="small"
+>
+ <form
+ id="restore-profile-form"
+ onSubmit={[Function]}
+ >
+ <div
+ className="modal-head"
+ >
+ <h2>
+ quality_profiles.restore_profile
+ </h2>
+ </div>
+ <div
+ className="modal-body"
+ >
+ <div
+ className="modal-field"
+ >
+ <label
+ htmlFor="restore-profile-backup"
+ >
+ backup
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ id="restore-profile-backup"
+ name="backup"
+ required={true}
+ type="file"
+ />
+ </div>
+ </div>
+ <div
+ className="modal-foot"
+ >
+ <SubmitButton
+ disabled={false}
+ id="restore-profile-submit"
+ >
+ restore
+ </SubmitButton>
+ <ResetButtonLink
+ id="restore-profile-cancel"
+ onClick={[MockFunction]}
+ >
+ cancel
+ </ResetButtonLink>
+ </div>
+ </form>
+</Modal>
+`;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { sendTestEmail } from '../../../api/settings';
-import { parseError } from '../../../helpers/request';
-import { SubmitButton } from '../../../components/ui/buttons';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
import { Alert } from '../../../components/ui/Alert';
+import { SubmitButton } from '../../../components/ui/buttons';
import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
+import { sendTestEmail } from '../../../api/settings';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { parseError } from '../../../helpers/request';
interface Props {
currentUser: T.LoggedInUser;
error?: string;
}
-class EmailForm extends React.PureComponent<Props, State> {
+
export class EmailForm extends React.PureComponent<Props, State> {
mounted = false;
constructor(props: Props) {
render() {
return (
- <div className="huge-spacer-top">
- <h3 className="spacer-bottom">{translate('email_configuration.test.title')}</h3>
-
- <form onSubmit={this.handleFormSubmit} style={{ marginLeft: 201 }}>
+ <div className="settings-definition">
+ <div className="settings-definition-left">
+ <h3 className="settings-definition-name">
+ {translate('email_configuration.test.title')}
+ </h3>
+ </div>
+
+ <form className="settings-definition-right" onSubmit={this.handleFormSubmit}>
{this.state.success && (
- <div className="modal-field">
+ <div className="form-field">
<Alert variant="success">
{translateWithParameters(
'email_configuration.test.email_was_sent_to_x',
)}
{this.state.error != null && (
- <div className="modal-field">
+ <div className="form-field">
<Alert variant="error">{this.state.error}</Alert>
</div>
)}
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="test-email-to">
{translate('email_configuration.test.to_address')}
<em className="mandatory">*</em>
value={this.state.recipient}
/>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="test-email-subject">
{translate('email_configuration.test.subject')}
</label>
value={this.state.subject}
/>
</div>
- <div className="modal-field">
+ <div className="form-field">
<label htmlFor="test-email-message">
{translate('email_configuration.test.message')}
<em className="mandatory">*</em>
/>
</div>
- <div className="modal-field">
- {this.state.loading && <i className="spacer-right spinner" />}
- <SubmitButton disabled={this.state.loading}>
- {translate('email_configuration.test.send')}
- </SubmitButton>
- </div>
+ <SubmitButton disabled={this.state.loading}>
+ {translate('email_configuration.test.send')}
+ </SubmitButton>
+ {this.state.loading && <DeferredSpinner className="spacer-left" />}
</form>
</div>
);
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { EmailForm } from '../EmailForm';
+import { mockCurrentUser } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+ expect(shallow(<EmailForm currentUser={mockCurrentUser()} />)).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+ className="settings-definition"
+>
+ <div
+ className="settings-definition-left"
+ >
+ <h3
+ className="settings-definition-name"
+ >
+ email_configuration.test.title
+ </h3>
+ </div>
+ <form
+ className="settings-definition-right"
+ onSubmit={[Function]}
+ >
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="test-email-to"
+ >
+ email_configuration.test.to_address
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <input
+ className="settings-large-input"
+ disabled={false}
+ id="test-email-to"
+ onChange={[Function]}
+ required={true}
+ type="email"
+ value=""
+ />
+ </div>
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="test-email-subject"
+ >
+ email_configuration.test.subject
+ </label>
+ <input
+ className="settings-large-input"
+ disabled={false}
+ id="test-email-subject"
+ onChange={[Function]}
+ type="text"
+ value="email_configuration.test.subject"
+ />
+ </div>
+ <div
+ className="form-field"
+ >
+ <label
+ htmlFor="test-email-message"
+ >
+ email_configuration.test.message
+ <em
+ className="mandatory"
+ >
+ *
+ </em>
+ </label>
+ <textarea
+ className="settings-large-input"
+ disabled={false}
+ id="test-email-message"
+ onChange={[Function]}
+ required={true}
+ rows={5}
+ value="email_configuration.test.message_text"
+ />
+ </div>
+ <SubmitButton
+ disabled={false}
+ >
+ email_configuration.test.send
+ </SubmitButton>
+ </form>
+</div>
+`;
<form className="big-spacer-bottom" id="encryption-form" onSubmit={this.handleEncrypt}>
<textarea
autoFocus={true}
- className="input-super-large"
+ className="abs-width-600"
id="encryption-form-value"
onChange={this.handleChange}
required={true}
- rows={3}
+ rows={5}
value={this.state.value}
/>
<div className="spacer-top">
currentUser: T.LoggedInUser;
onClose: () => void;
onOpenProjectOnboarding: () => void;
- skipOnboarding: () => void;
userOrganizations: T.Organization[];
}
export function OnboardingModal(props: Props) {
- const {
- currentUser,
- onClose,
- onOpenProjectOnboarding,
- skipOnboarding,
- userOrganizations
- } = props;
+ const { currentUser, onClose, onOpenProjectOnboarding, userOrganizations } = props;
const organizations = userOrganizations.filter(o => o.key !== currentUser.personalOrganization);
return (
<Modal
contentLabel={header}
- medium={true}
onRequestClose={onClose}
- shouldCloseOnOverlayClick={false}>
+ shouldCloseOnOverlayClick={false}
+ size={organizations.length > 0 ? 'medium' : 'small'}>
<div className="modal-head">
<h2>{translate('onboarding.header')}</h2>
<p className="spacer-top">{translate('onboarding.header.description')}</p>
<div className="modal-body text-center display-flex-row huge-spacer-top huge-spacer-bottom">
<div className="flex-1">
<OnboardingProjectIcon className="big-spacer-bottom" />
- <h6 className="onboarding-choice-name big-spacer-bottom">
- {translate('onboarding.analyze_your_code')}
- </h6>
+ <h3 className="big-spacer-bottom">{translate('onboarding.analyze_your_code')}</h3>
<Button onClick={onOpenProjectOnboarding}>
{translate('onboarding.project.create')}
</Button>
</div>
<div className="flex-1">
<OnboardingTeamIcon className="big-spacer-bottom" />
- <h6 className="onboarding-choice-name big-spacer-bottom">
+ <h3 className="big-spacer-bottom">
{translate('onboarding.browse_your_organizations')}
- </h6>
- <OrganizationsShortList
- organizations={organizations}
- skipOnboarding={skipOnboarding}
- />
+ </h3>
+ <OrganizationsShortList onClick={onClose} organizations={organizations} />
</div>
</>
)}
<OnboardingModal
onClose={this.closeOnboarding}
onOpenProjectOnboarding={openProjectOnboarding}
- skipOnboarding={this.props.skipOnboarding}
/>
)}
</OnboardingContext.Consumer>
export interface Props {
organizations: T.Organization[];
- skipOnboarding: () => void;
+ onClick: () => void;
}
-export default function OrganizationsShortList({ organizations, skipOnboarding }: Props) {
+export default function OrganizationsShortList({ onClick, organizations }: Props) {
if (organizations.length === 0) {
return null;
}
return (
<div>
- <ul className="account-projects-list">
+ <ul>
{organizationsShown.map(organization => (
<li key={organization.key}>
- <OrganizationsShortListItem
- organization={organization}
- skipOnboarding={skipOnboarding}
- />
+ <OrganizationsShortListItem onClick={onClick} organization={organization} />
</li>
))}
</ul>
- <div className="big-spacer-top">
- <span className="big-spacer-right">
- {translateWithParameters('x_of_y_shown', organizationsShown.length, organizations.length)}
- </span>
- {organizations.length > 3 && (
- <Link className="small" onClick={skipOnboarding} to="/account/organizations">
+ {organizations.length > 3 && (
+ <div className="big-spacer-top">
+ <span className="big-spacer-right">
+ {translateWithParameters(
+ 'x_of_y_shown',
+ organizationsShown.length,
+ organizations.length
+ )}
+ </span>
+ <Link className="small" onClick={onClick} to="/account/organizations">
{translate('see_all')}
</Link>
- )}
- </div>
+ </div>
+ )}
</div>
);
}
import { getOrganizationUrl } from '../../../helpers/urls';
interface Props {
+ onClick: () => void;
organization: T.Organization;
router: Router;
- skipOnboarding: () => void;
}
export class OrganizationsShortListItem extends React.PureComponent<Props> {
handleClick = () => {
- const { organization, router, skipOnboarding } = this.props;
- skipOnboarding();
+ const { onClick, organization, router } = this.props;
+ onClick();
router.push(getOrganizationUrl(organization.key));
};
currentUser={mockCurrentUser()}
onClose={jest.fn()}
onOpenProjectOnboarding={jest.fn()}
- skipOnboarding={jest.fn()}
userOrganizations={[]}
{...props}
/>
});
function shallowRender(props: Partial<Props> = {}) {
- return shallow(
- <OrganizationsShortList organizations={[]} skipOnboarding={jest.fn()} {...props} />
- );
+ return shallow(<OrganizationsShortList onClick={jest.fn()} organizations={[]} {...props} />);
}
expect(shallowRender()).toMatchSnapshot();
});
-it('calls skiponboarding and redirects to org page', () => {
- const skipOnboarding = jest.fn();
+it('calls onClick and redirects to org page', () => {
+ const onClick = jest.fn();
const push = jest.fn();
- const wrapper = shallowRender({ skipOnboarding, router: mockRouter({ push }) });
+ const wrapper = shallowRender({ onClick, router: mockRouter({ push }) });
click(wrapper);
- expect(skipOnboarding).toHaveBeenCalledTimes(1);
+ expect(onClick).toHaveBeenCalledTimes(1);
expect(push).toHaveBeenCalledWith('/organizations/foo');
});
function shallowRender(props: Partial<OrganizationsShortListItem['props']> = {}) {
return shallow(
<OrganizationsShortListItem
+ onClick={jest.fn()}
organization={mockOrganization()}
router={mockRouter()}
- skipOnboarding={jest.fn()}
{...props}
/>
);
exports[`renders correctly 1`] = `
<Modal
contentLabel="onboarding.header"
- medium={true}
onRequestClose={[MockFunction]}
shouldCloseOnOverlayClick={false}
+ size="small"
>
<div
className="modal-head"
<OnboardingProjectIcon
className="big-spacer-bottom"
/>
- <h6
- className="onboarding-choice-name big-spacer-bottom"
+ <h3
+ className="big-spacer-bottom"
>
onboarding.analyze_your_code
- </h6>
+ </h3>
<Button
onClick={[MockFunction]}
>
exports[`should display organization list if any 1`] = `
<Modal
contentLabel="onboarding.header"
- medium={true}
onRequestClose={[MockFunction]}
shouldCloseOnOverlayClick={false}
+ size="medium"
>
<div
className="modal-head"
<OnboardingProjectIcon
className="big-spacer-bottom"
/>
- <h6
- className="onboarding-choice-name big-spacer-bottom"
+ <h3
+ className="big-spacer-bottom"
>
onboarding.analyze_your_code
- </h6>
+ </h3>
<Button
onClick={[MockFunction]}
>
<OnboardingTeamIcon
className="big-spacer-bottom"
/>
- <h6
- className="onboarding-choice-name big-spacer-bottom"
+ <h3
+ className="big-spacer-bottom"
>
onboarding.browse_your_organizations
- </h6>
+ </h3>
<OrganizationsShortList
+ onClick={[MockFunction]}
organizations={
Array [
Object {
},
]
}
- skipOnboarding={[MockFunction]}
/>
</div>
</div>
exports[`should limit displayed orgs to the first three 1`] = `
<div>
- <ul
- className="account-projects-list"
- >
+ <ul>
<li
key="bar"
>
<withRouter(OrganizationsShortListItem)
+ onClick={[MockFunction]}
organization={
Object {
"key": "bar",
"name": "Bar",
}
}
- skipOnboarding={[MockFunction]}
/>
</li>
<li
key="foo"
>
<withRouter(OrganizationsShortListItem)
+ onClick={[MockFunction]}
organization={
Object {
"key": "foo",
"name": "Foo",
}
}
- skipOnboarding={[MockFunction]}
/>
</li>
<li
key="kor"
>
<withRouter(OrganizationsShortListItem)
+ onClick={[MockFunction]}
organization={
Object {
"key": "kor",
"name": "Kor",
}
}
- skipOnboarding={[MockFunction]}
/>
</li>
</ul>
exports[`should render correctly 1`] = `
<div>
- <ul
- className="account-projects-list"
- >
+ <ul>
<li
key="bar"
>
<withRouter(OrganizationsShortListItem)
+ onClick={[MockFunction]}
organization={
Object {
"key": "bar",
"name": "Bar",
}
}
- skipOnboarding={[MockFunction]}
/>
</li>
<li
key="foo"
>
<withRouter(OrganizationsShortListItem)
+ onClick={[MockFunction]}
organization={
Object {
"key": "foo",
"name": "Foo",
}
}
- skipOnboarding={[MockFunction]}
/>
</li>
</ul>
- <div
- className="big-spacer-top"
- >
- <span
- className="big-spacer-right"
- >
- x_of_y_shown.2.2
- </span>
- </div>
</div>
`;
cursor: pointer;
outline: none;
}
-
-.onboarding-choices {
- display: flex;
- justify-content: space-around;
- padding: 44px 170px;
- background-color: var(--barBackgroundColor);
- margin-top: var(--pagePadding);
-}
-
-.onboarding-choice {
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: calc(2 * var(--gridSize));
- width: 190px;
- height: 190px;
- background-color: #fff;
- border: solid 1px #fff;
- border-radius: 3px;
- transition: all 0.2s ease;
- box-shadow: 0 1px 1px 1px var(--barBorderColor);
-}
-
-.onboarding-choice svg {
- color: var(--gray40);
-}
-
-.onboarding-choice-name {
- color: inherit;
- font-size: var(--mediumFontSize);
-}
-
-.onboarding-choice .note {
- font-weight: 400;
-}
-
-.onboarding-choice:hover,
-.onboarding-choice:focus,
-.onboarding-choice:active {
- background-color: #fff;
- color: var(--darkBlue);
- box-shadow: var(--defaultShadow);
- transform: translateY(-2px);
-}
const header = translate('my_profile.password.title');
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form autoComplete="off" id="user-password-form" onSubmit={this.handleChangePassword}>
<header className="modal-head">
<h2>{header}</h2>
id="generate-token-form"
onSubmit={this.handleGenerateToken}>
<input
- className="spacer-right"
+ className="input-large spacer-right"
maxLength={100}
onChange={this.handleNewTokenChange}
placeholder={translate('users.enter_token_name')}
const header = user ? translate('users.update_user') : translate('users.create_user');
return (
- <Modal contentLabel={header} onRequestClose={this.props.onClose}>
+ <Modal contentLabel={header} onRequestClose={this.props.onClose} size="small">
<form
autoComplete="off"
id="user-form"
render() {
return (
- <div className="js-scm-account">
+ <div className="js-scm-account display-flex-row spacer-bottom">
<input
maxLength={255}
onChange={this.handleChange}
onSubmit={[Function]}
>
<input
- className="spacer-right"
+ className="input-large spacer-right"
maxLength={100}
onChange={[Function]}
placeholder="users.enter_token_name"
onSubmit={[Function]}
>
<input
- className="spacer-right"
+ className="input-large spacer-right"
maxLength={100}
onChange={[Function]}
placeholder="users.enter_token_name"
isInitialValid={isUpdate}
onClose={this.props.onClose}
onSubmit={this.props.onDone}
+ size="small"
validate={this.handleValidate}>
{({
dirty,
isInitialValid={false}
onClose={[MockFunction]}
onSubmit={[MockFunction]}
+ size="small"
validate={[Function]}
>
<Component />
isInitialValid={true}
onClose={[MockFunction]}
onSubmit={[MockFunction]}
+ size="small"
validate={[Function]}
>
<Component />
const { loading } = this.state;
return (
- <Modal contentLabel="" large={true} onRequestClose={this.props.onClose}>
+ <Modal contentLabel="" onRequestClose={this.props.onClose} size={'large'}>
<div className="modal-container source-viewer-measures-modal">
<div className="source-viewer-header-component source-viewer-measures-component">
<div className="source-viewer-header-component-project">
exports[`should render source file 1`] = `
<Modal
contentLabel=""
- large={true}
onRequestClose={[MockFunction]}
+ size="large"
>
<div
className="modal-container source-viewer-measures-modal"
exports[`should render source file 2`] = `
<Modal
contentLabel=""
- large={true}
onRequestClose={[MockFunction]}
+ size="large"
>
<div
className="modal-container source-viewer-measures-modal"
exports[`should render test file 1`] = `
<Modal
contentLabel=""
- large={true}
onRequestClose={[MockFunction]}
+ size="large"
>
<div
className="modal-container source-viewer-measures-modal"
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import * as classNames from 'classnames';
import { getMarkdownHelpUrl } from '../../helpers/urls';
import { translate } from '../../helpers/l10n';
-export default class MarkdownTips extends React.PureComponent {
+interface Props {
+ className?: string;
+}
+
+export default class MarkdownTips extends React.PureComponent<Props> {
handleClick(evt: React.SyntheticEvent<HTMLAnchorElement>) {
evt.preventDefault();
window.open(getMarkdownHelpUrl(), 'Markdown', 'height=300,width=600,scrollbars=1,resizable=1');
render() {
return (
- <div className="markdown-tips">
+ <div className={classNames('markdown-tips', this.props.className)}>
<a className="little-spacer-right" href="#" onClick={this.handleClick}>
{translate('markdown.helplink')}
</a>
id?: string;
loading?: boolean;
onCheck: (checked: boolean, id?: string) => void;
+ right?: boolean;
thirdState?: boolean;
}
};
render() {
+ const { children, disabled, loading, right } = this.props;
const className = classNames('icon-checkbox', {
'icon-checkbox-checked': this.props.checked,
'icon-checkbox-single': this.props.thirdState,
- 'icon-checkbox-disabled': this.props.disabled
+ 'icon-checkbox-disabled': disabled
});
- if (this.props.children) {
+ if (children) {
return (
<a
className={classNames('link-checkbox', this.props.className, {
- note: this.props.disabled,
- disabled: this.props.disabled
+ note: disabled,
+ disabled
})}
href="#"
id={this.props.id}
onClick={this.handleClick}>
- <DeferredSpinner loading={Boolean(this.props.loading)}>
+ {right && children}
+ <DeferredSpinner loading={Boolean(loading)}>
<i className={className} />
</DeferredSpinner>
- {this.props.children}
+ {!right && children}
</a>
);
}
- if (this.props.loading) {
+ if (loading) {
return <DeferredSpinner />;
}
};
render() {
- const { header, onClose, medium, noBackdrop, large } = this.props;
- const modalProps = { header, onClose, medium, noBackdrop, large };
+ const { header, onClose, noBackdrop, size } = this.props;
+ const modalProps = { header, onClose, noBackdrop, size };
return (
<SimpleModal onSubmit={this.handleSubmit} {...modalProps}>
{this.renderModalContent}
import * as React from 'react';
import * as ReactModal from 'react-modal';
import * as classNames from 'classnames';
-import { isSonarCloud } from '../../helpers/system';
ReactModal.setAppElement('#content');
export interface ModalProps {
children: React.ReactNode;
- medium?: boolean;
+ size?: 'small' | 'medium' | 'large';
noBackdrop?: boolean;
- large?: boolean;
}
type MandatoryProps = Pick<ReactModal.Props, 'contentLabel'>;
export default function Modal(props: Props) {
return (
<ReactModal
- className={classNames(
- 'modal',
- {
- sonarcloud: isSonarCloud()
- },
- {
- 'modal-medium': props.medium,
- 'modal-large': props.large
- }
- )}
+ className={classNames('modal', {
+ 'modal-small': props.size === 'small',
+ 'modal-medium': props.size === 'medium',
+ 'modal-large': props.size === 'large'
+ })}
isOpen={true}
overlayClassName={classNames('modal-overlay', { 'modal-no-backdrop': props.noBackdrop })}
{...props}
return (
<a
aria-checked={this.props.checked}
- className={classNames(
- 'display-inline-flex-center link-base-color link-no-underline',
- this.props.className
- )}
+ className={classNames('display-inline-flex-center link-checkbox', this.props.className)}
href="#"
onClick={this.handleClick}
role="radio">
interface Props<T> {
autofocus?: boolean;
canCreate?: boolean;
+ className?: string;
clearable?: boolean;
defaultOptions?: T[];
minimumQueryLength?: number;
return (
<Component
autoFocus={this.autofocus}
- className="input-super-large"
+ className={this.props.className}
clearable={this.props.clearable}
escapeClearsValue={false}
filterOption={this.handleFilterOption}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import Modal from './Modal';
+import Modal, { ModalProps } from './Modal';
import ValidationForm, { ChildrenProps } from './ValidationForm';
import DeferredSpinner from '../common/DeferredSpinner';
import { SubmitButton, ResetButtonLink } from '../ui/buttons';
import { translate } from '../../helpers/l10n';
-interface Props<V> {
+interface Props<V> extends ModalProps {
children: (props: ChildrenProps<V>) => React.ReactNode;
confirmButtonText: string;
header: string;
render() {
return (
- <Modal contentLabel={this.props.header} onRequestClose={this.props.onClose}>
+ <Modal
+ contentLabel={this.props.header}
+ noBackdrop={this.props.noBackdrop}
+ onRequestClose={this.props.onClose}
+ size={this.props.size}>
<ValidationForm
initialValues={this.props.initialValues}
isInitialValid={this.props.isInitialValid}
);
expect(checkbox.is('.customclass')).toBeTruthy();
});
+
+it('should render the checkbox on the right', () => {
+ expect(shallow(<Checkbox checked={true} onCheck={() => true} right={true} />)).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render the checkbox on the right 1`] = `
+<a
+ className="icon-checkbox icon-checkbox-checked"
+ href="#"
+ onClick={[Function]}
+/>
+`;
exports[`should render and check 1`] = `
<a
aria-checked={false}
- className="display-inline-flex-center link-base-color link-no-underline"
+ className="display-inline-flex-center link-checkbox"
href="#"
onClick={[Function]}
role="radio"
exports[`should render and check 2`] = `
<a
aria-checked={true}
- className="display-inline-flex-center link-base-color link-no-underline"
+ className="display-inline-flex-center link-checkbox"
href="#"
onClick={[Function]}
role="radio"
exports[`should render Select 1`] = `
<Select
autoFocus={true}
- className="input-super-large"
escapeClearsValue={false}
filterOption={[Function]}
isLoading={false}
*/
import * as React from 'react';
import Icon, { IconProps } from './Icon';
+import * as theme from '../../app/theme';
export default function OnboardingAddMembersIcon({
className,
- fill = 'currentColor',
+ fill = theme.darkBlue,
size = 64
}: IconProps) {
return (
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2019 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.
- */
-.new-info-box {
- display: flex;
- padding: var(--gridSize);
- background-color: var(--veryLightBlue);
- border: 1px solid var(--alertBorderInfo);
- border-radius: 2px;
-}
-
-.new-info-box-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2019 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.
- */
-import * as React from 'react';
-import * as classNames from 'classnames';
-import { ButtonIcon } from './buttons';
-import ClearIcon from '../icons-components/ClearIcon';
-import { sonarcloudBlack500 } from '../../app/theme';
-import { translate } from '../../helpers/l10n';
-import './NewInfoBox.css';
-
-export interface Props {
- children: React.ReactNode;
- className?: string;
- description: React.ReactNode;
- onClose?: () => void;
- title: string;
-}
-
-export default function NewInfoBox({ className, children, description, onClose, title }: Props) {
- return (
- <div className={classNames('new-info-box', className)} role="alert">
- <div className="new-info-box-inner text-left">
- <div className="new-info-box-header spacer-bottom">
- <span className="display-inline-flex-center">
- <span className="badge badge-new spacer-right">{translate('new')}</span>
- <strong>{title}</strong>
- </span>
- </div>
- <p className="note spacer-bottom">{description}</p>
- {children}
- </div>
- <ButtonIcon className="button-small spacer-left" color={sonarcloudBlack500} onClick={onClose}>
- <ClearIcon size={12} />
- </ButtonIcon>
- </div>
- );
-}
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2019 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.
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
-import NewInfoBox from '../NewInfoBox';
-import { click } from '../../../helpers/testUtils';
-
-it('should render correctly', () => {
- expect(
- shallow(
- <NewInfoBox description="My description" onClose={jest.fn()} title="My title">
- <div />
- </NewInfoBox>
- )
- ).toMatchSnapshot();
-});
-
-it('should allow to opt out', () => {
- const onClose = jest.fn();
- const wrapper = shallow(
- <NewInfoBox description="" onClose={onClose} title="">
- <div />
- </NewInfoBox>
- );
- click(wrapper.find('ButtonIcon'));
- expect(onClose).toHaveBeenCalled();
-});
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
- className="new-info-box"
- role="alert"
->
- <div
- className="new-info-box-inner text-left"
- >
- <div
- className="new-info-box-header spacer-bottom"
- >
- <span
- className="display-inline-flex-center"
- >
- <span
- className="badge badge-new spacer-right"
- >
- new
- </span>
- <strong>
- My title
- </strong>
- </span>
- </div>
- <p
- className="note spacer-bottom"
- >
- My description
- </p>
- <div />
- </div>
- <ButtonIcon
- className="button-small spacer-left"
- color="#8a8c8f"
- onClick={[MockFunction]}
- >
- <ClearIcon
- size={12}
- />
- </ButtonIcon>
-</div>
-`;
font-size: var(--mediumFontSize);
}
+.button-huge {
+ flex-direction: column;
+ padding: calc(2 * var(--gridSize));
+ width: 200px;
+ height: 200px;
+ background-color: #fff;
+ border: solid 1px #fff;
+ border-radius: 3px;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 1px 1px var(--barBorderColor);
+}
+
+.button-huge:hover,
+.button-huge:focus,
+.button-huge:active {
+ background-color: #fff;
+ color: var(--darkBlue);
+ box-shadow: var(--defaultShadow);
+ transform: translateY(-2px);
+}
+
/* #region .button-group */
.button-group {
display: inline-block;
/* #endregion */
.button-list {
+ display: inline-flex;
+ justify-content: space-between;
height: auto;
border: 1px solid var(--barBorderColor);
padding: var(--gridSize);
margin: calc(var(--gridSize) / 2);
- text-align: left;
- justify-content: space-between;
color: var(--secondFontColor);
font-weight: normal;
}
background-color: white;
border-color: var(--blue);
color: var(--darkBlue);
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.175);
}
import * as React from 'react';
import * as classNames from 'classnames';
import * as theme from '../../app/theme';
+import ChevronRightIcon from '../icons-components/ChevronRightcon';
import ClearIcon from '../icons-components/ClearIcon';
import EditIcon from '../icons-components/EditIcon';
import Tooltip from '../controls/Tooltip';
import './buttons.css';
-import ChevronRightIcon from '../icons-components/ChevronRightcon';
type AllowedButtonAttributes = Pick<
React.ButtonHTMLAttributes<HTMLButtonElement>,
import { Location } from 'history';
import { Profile } from '../apps/quality-profiles/types';
+export function mockAlmApplication(overrides: Partial<T.AlmApplication> = {}): T.AlmApplication {
+ return {
+ backgroundColor: '#0052CC',
+ iconPath: '"/static/authbitbucket/bitbucket.svg"',
+ installationUrl: 'https://bitbucket.org/install/app',
+ key: 'bitbucket',
+ name: 'BitBucket',
+ ...overrides
+ };
+}
+
export function mockAlmOrganization(overrides: Partial<T.AlmOrganization> = {}): T.AlmOrganization {
return {
avatar: 'http://example.com/avatar',
} as any;
}
+export function mockIssue(withLocations = false, overrides: Partial<T.Issue> = {}) {
+ const issue: T.Issue = {
+ actions: [],
+ component: 'main.js',
+ componentLongName: 'main.js',
+ componentQualifier: 'FIL',
+ componentUuid: 'foo1234',
+ creationDate: '2017-03-01T09:36:01+0100',
+ flows: [],
+ fromHotspot: false,
+ key: 'AVsae-CQS-9G3txfbFN2',
+ line: 25,
+ message: 'Reduce the number of conditional operators (4) used in the expression',
+ organization: 'myorg',
+ project: 'myproject',
+ projectKey: 'foo',
+ projectName: 'Foo',
+ projectOrganization: 'org',
+ rule: 'javascript:S1067',
+ ruleName: 'foo',
+ secondaryLocations: [],
+ severity: 'MAJOR',
+ status: 'OPEN',
+ textRange: { startLine: 25, endLine: 26, startOffset: 0, endOffset: 15 },
+ transitions: [],
+ type: 'BUG'
+ };
+
+ function loc(): T.FlowLocation {
+ return {
+ component: 'main.js',
+ textRange: { startLine: 1, startOffset: 1, endLine: 2, endOffset: 2 }
+ };
+ }
+
+ if (withLocations) {
+ issue.flows = [[loc(), loc(), loc()], [loc(), loc()]];
+ issue.secondaryLocations = [loc(), loc()];
+ }
+
+ return {
+ ...issue,
+ ...overrides
+ };
+}
+
export function mockLocation(overrides: Partial<Location> = {}): Location {
return {
action: 'PUSH',
});
}
+export function mockQualityGate(overrides: Partial<T.QualityGate> = {}): T.QualityGate {
+ return {
+ id: 1,
+ name: 'qualitygate',
+ ...overrides
+ };
+}
+
export function mockQualityProfile(overrides: Partial<Profile> = {}): Profile {
return {
activeDeprecatedRuleCount: 2,
} as InjectedRouter;
}
-export function mockIssue(withLocations = false, overrides: Partial<T.Issue> = {}) {
- const issue: T.Issue = {
- actions: [],
- component: 'main.js',
- componentLongName: 'main.js',
- componentQualifier: 'FIL',
- componentUuid: 'foo1234',
- creationDate: '2017-03-01T09:36:01+0100',
- flows: [],
- fromHotspot: false,
- key: 'AVsae-CQS-9G3txfbFN2',
- line: 25,
- message: 'Reduce the number of conditional operators (4) used in the expression',
- organization: 'myorg',
- project: 'myproject',
- projectKey: 'foo',
- projectName: 'Foo',
- projectOrganization: 'org',
- rule: 'javascript:S1067',
- ruleName: 'foo',
- secondaryLocations: [],
- severity: 'MAJOR',
- status: 'OPEN',
- textRange: { startLine: 25, endLine: 26, startOffset: 0, endOffset: 15 },
- transitions: [],
- type: 'BUG'
- };
-
- function loc(): T.FlowLocation {
- return {
- component: 'main.js',
- textRange: { startLine: 1, startOffset: 1, endLine: 2, endOffset: 2 }
- };
- }
-
- if (withLocations) {
- issue.flows = [[loc(), loc(), loc()], [loc(), loc()]];
- issue.secondaryLocations = [loc(), loc()];
- }
-
+export function mockRule(overrides: Partial<T.Rule> = {}): T.Rule {
return {
- ...issue,
+ key: 'javascript:S1067',
+ lang: 'js',
+ langName: 'JavaScript',
+ name: 'Use foo',
+ severity: 'MAJOR',
+ status: 'READY',
+ sysTags: ['a', 'b'],
+ tags: ['x'],
+ type: 'CODE_SMELL',
...overrides
- };
+ } as T.Rule;
}
quality_profiles.grant_permissions_to_more_users=Grant permissions to more users
quality_profiles.grant_permissions_to_user_or_group=Grant permissions to a user or a group
quality_profiles.additional_user_groups=Additional users / groups:
-quality_profiles.search_description=Search users by login or name, and groups by name
+quality_profiles.search_description=Search users by login or name, and groups by name:
organization.members.add_to_members=Add to members
organization.members.config_synchro=Configure Synchronization
organization.members.auto_sync_with_x=Automatic sync with {0}
-organization.members.auto_sync_members_from_org_x=Members can be synchronized automatically from your {0}
+organization.members.auto_sync_members_from_org_x=Now your members can be automatically synchronized with your {0}.
organization.members.auto_sync_total_help.bitbucket=You might not see all members from your Bitbucket team yet, as they need to reconnect to SonarCloud to be members of the organization.
organization.members.auto_sync_total_help.github=You might not see all members from your GitHub organization yet, as they need to connect to SonarCloud at least once to appear in this list.
organization.members.see_all_members_on_x=See all members on {0}
organization.members.management.title=Members Management
-organization.members.management.description=Select your management mode for members of this organization
+organization.members.management.description=Select your management mode for members of this organization.
organization.members.management.manual=Manual
-organization.members.management.manual.add_members_manually=Admin add members manually from Sonarcloud existing users
-organization.members.management.manual.choose_members_permissions=Admin chooses each member permissions
+organization.members.management.manual.add_members_manually=Admin add members manually from SonarCloud existing users
organization.members.management.automatic=Automatic sync with {0}
organization.members.management.automatic.synchronized_from_x=Members are synchronized automatically from your {0}
organization.members.management.automatic.members_changes_reflected.bitbucket=Your team members must reconnect to SonarCloud to be automatically added to correct SonarCloud organization
-organization.members.management.automatic.members_changes_reflected.github=If you add or remove a member on GitHub, SonarCloud immediately reflect the changes
-organization.members.management.automatic.still_choose_members_permissions=Admin still manages permissions for each member in SonarCloud
+organization.members.management.automatic.members_changes_reflected.github=If you add or remove a member on GitHub, SonarCloud immediately reflects the changes
organization.members.management.automatic.warning=This will override your current Members and Permissions configuration
+organization.members.management.choose_members_permissions=Admin manages permissions for each member in SonarCloud
organization.paid_plan.badge=Paid plan
organization.default_visibility_of_new_projects=Default visibility of new projects:
organization.change_visibility_form.header=Set Default Visibility of New Projects
onboarding.import_organization.already_bound_x=Your organization {avatar} {name} is already bound to the SonarCloud organization {boundAvatar} {boundName}. Try again and choose a different organization.
onboarding.import_organization.members_sync_info_x=All members from your {0} {1} will be added to your SonarCloud organization. As they connect to SonarCloud with their {2} account, members will automatically have access to your SonarCloud organization and its projects.
onboarding.import_organization.bind_members_not_sync_info_x=We'll keep your members, groups and permissions as they are today on SonarCloud. To sync your members with your {0}, enable members sync in your Members tab.
-onboarding.import_organization.see_who_has_access=See who will have access
onboarding.import_organization_x=Import {avatar} {name} into a SonarCloud organization
onboarding.import_personal_organization_x=Bind {avatar} {name} with your personal SonarCloud organization {personalAvatar} {personalName}
projects / sonarqube.git / commitdiff