<EditButton
className="js-change-visibility spacer-left button-small"
onClick={this.handleChangeVisibilityClick}
+ aria-label={translate('settings.projects.change_visibility_form.label')}
/>
</span>
.project-row-text-cell {
max-width: 20em;
}
+
+.projects-management-search {
+ display: flex;
+ gap: 20px;
+ padding: 8px 10px;
+ flex-wrap: wrap;
+}
+
+.projects-management-search > * {
+ display: flex;
+ white-space: nowrap;
+}
+
+.projects-management-search > *:not(.bulk-actions) {
+ flex-direction: column;
+ justify-content: center;
+}
+
+.projects-management-search > .bulk-actions {
+ justify-content: end;
+}
import Tooltip from '../../components/controls/Tooltip';
import QualifierIcon from '../../components/icons/QualifierIcon';
import DateFormatter from '../../components/intl/DateFormatter';
+import { translateWithParameters } from '../../helpers/l10n';
import { getComponentOverviewUrl } from '../../helpers/urls';
import { LoggedInUser } from '../../types/users';
import './ProjectRow.css';
return (
<tr data-project-key={project.key}>
<td className="thin">
- <Checkbox checked={selected} onCheck={this.handleProjectCheck} />
+ <Checkbox
+ label={translateWithParameters('projects_management.select_project', project.name)}
+ checked={selected}
+ onCheck={this.handleProjectCheck}
+ />
</td>
<td className="nowrap hide-overflow project-row-text-cell">
import { getComponentNavigation } from '../../api/navigation';
import ActionsDropdown, { ActionsDropdownItem } from '../../components/controls/ActionsDropdown';
import DeferredSpinner from '../../components/ui/DeferredSpinner';
-import { translate } from '../../helpers/l10n';
+import { translate, translateWithParameters } from '../../helpers/l10n';
import { getComponentPermissionsUrl } from '../../helpers/urls';
import { LoggedInUser } from '../../types/users';
import ApplyTemplate from '../permissions/project/components/ApplyTemplate';
return (
<>
- <ActionsDropdown onOpen={this.handleDropdownOpen}>
+ <ActionsDropdown
+ label={translateWithParameters(
+ 'projects_management.show_actions_for_x',
+ this.props.project.name
+ )}
+ onOpen={this.handleDropdownOpen}
+ >
{loading ? (
<ActionsDropdownItem>
<DeferredSpinner />
};
renderQualifierOption = (option: LabelValueSelectOption) => (
- <div className="display-flex-center">
+ <div>
<QualifierIcon className="little-spacer-right" qualifier={option.value} />
{option.label}
</div>
return null;
}
return (
- <td className="thin nowrap text-middle">
- <Select
- className="input-medium it__project-qualifier-select"
- isDisabled={!this.props.ready}
- name="projects-qualifier"
- onChange={this.handleQualifierChange}
- isSearchable={false}
- components={{
- Option: this.optionRenderer,
- SingleValue: this.singleValueRenderer,
- }}
- options={this.getQualifierOptions()}
- value={options.find((option) => option.value === this.props.qualifiers)}
- />
- </td>
+ <Select
+ className="input-medium it__project-qualifier-select"
+ isDisabled={!this.props.ready}
+ name="projects-qualifier"
+ onChange={this.handleQualifierChange}
+ isSearchable={false}
+ components={{
+ Option: this.optionRenderer,
+ SingleValue: this.singleValueRenderer,
+ }}
+ options={this.getQualifierOptions()}
+ value={options.find((option) => option.value === this.props.qualifiers)}
+ />
);
};
{ value: Visibility.Private, label: translate('visibility.private') },
];
return (
- <td className="thin nowrap text-middle">
- <Select
- className="input-small"
- isDisabled={!this.props.ready}
- name="projects-visibility"
- onChange={this.handleVisibilityChange}
- options={options}
- isSearchable={false}
- value={options.find((option) => option.value === (this.props.visibility || 'all'))}
- />
- </td>
+ <Select
+ className="input-small"
+ isDisabled={!this.props.ready}
+ name="projects-visibility"
+ onChange={this.handleVisibilityChange}
+ options={options}
+ isSearchable={false}
+ value={options.find((option) => option.value === (this.props.visibility || 'all'))}
+ />
);
};
renderTypeFilter = () =>
this.props.qualifiers === 'TRK' ? (
- <td className="thin nowrap text-middle">
+ <div>
<Checkbox
checked={this.props.provisioned}
className="link-checkbox-control"
<span className="text-middle little-spacer-left">
{translate('provisioning.only_provisioned')}
</span>
+ <HelpTooltip
+ className="spacer-left"
+ overlay={translate('provisioning.only_provisioned.tooltip')}
+ />
</Checkbox>
- <HelpTooltip
- className="spacer-left"
- overlay={translate('provisioning.only_provisioned.tooltip')}
- />
- </td>
+ </div>
) : null;
renderDateFilter = () => {
return (
- <td className="thin nowrap text-middle">
- <DateInput
- inputClassName="input-medium"
- name="analyzed-before"
- onChange={this.props.onDateChanged}
- placeholder={translate('last_analysis_before')}
- value={this.props.analyzedBefore}
- />
- </td>
+ <DateInput
+ inputClassName="input-medium"
+ name="analyzed-before"
+ onChange={this.props.onDateChanged}
+ placeholder={translate('last_analysis_before')}
+ value={this.props.analyzedBefore}
+ />
);
};
render() {
return (
<div className="big-spacer-bottom">
- <table className="data">
- <tbody>
- <tr>
- <td className="thin text-middle">
- {this.props.ready ? this.renderCheckbox() : <i className="spinner" />}
- </td>
- {this.renderQualifierFilter()}
- {this.renderDateFilter()}
- {this.renderVisibilityFilter()}
- {this.renderTypeFilter()}
- <td className="text-middle">
- <SearchBox
- minLength={3}
- onChange={this.props.onSearch}
- placeholder={translate('search.search_by_name_or_key')}
- value={this.props.query}
- />
- </td>
- <td className="thin nowrap text-middle">
- <Button
- className="js-bulk-apply-permission-template"
- disabled={this.props.selection.length === 0}
- onClick={this.handleBulkApplyTemplateClick}
- >
- {translate('permission_templates.bulk_apply_permission_template')}
- </Button>
- {this.props.qualifiers === 'TRK' && (
- <Button
- className="js-delete spacer-left button-red"
- disabled={this.props.selection.length === 0}
- onClick={this.handleDeleteClick}
- title={
- this.props.selection.length === 0
- ? translate('permission_templates.select_to_delete')
- : translate('permission_templates.delete_selected')
- }
- >
- {translate('delete')}
- </Button>
- )}
- </td>
- </tr>
- </tbody>
- </table>
+ <div className="projects-management-search">
+ <div>{this.props.ready ? this.renderCheckbox() : <i className="spinner" />}</div>
+ {this.renderQualifierFilter()}
+ {this.renderDateFilter()}
+ {this.renderVisibilityFilter()}
+ {this.renderTypeFilter()}
+ <div className="flex-grow">
+ <SearchBox
+ minLength={3}
+ onChange={this.props.onSearch}
+ placeholder={translate('search.search_by_name_or_key')}
+ value={this.props.query}
+ />
+ </div>
+ <div className="bulk-actions">
+ <Button
+ className="js-bulk-apply-permission-template"
+ disabled={this.props.selection.length === 0}
+ onClick={this.handleBulkApplyTemplateClick}
+ >
+ {translate('permission_templates.bulk_apply_permission_template')}
+ </Button>
+ {this.props.qualifiers === 'TRK' && (
+ <Button
+ className="js-delete spacer-left button-red"
+ disabled={this.props.selection.length === 0}
+ onClick={this.handleDeleteClick}
+ title={
+ this.props.selection.length === 0
+ ? translate('permission_templates.select_to_delete')
+ : translate('permission_templates.delete_selected')
+ }
+ >
+ {translate('delete')}
+ </Button>
+ )}
+ </div>
+ </div>
{this.state.bulkApplyTemplateModal && (
<BulkApplyTemplateModal
});
function getProjects() {
- // remove the first 2 rows: first is the filter bar, and second is the header
- return screen.getAllByRole('row').slice(2);
+ // Remove the first row (header)
+ return screen.getAllByRole('row').slice(1);
}
function getComponentsImplementation(overridePageSize?: number) {
</strong>
</span>
<EditButton
+ aria-label="settings.projects.change_visibility_form.label"
className="js-change-visibility spacer-left button-small"
onClick={[Function]}
/>
</strong>
</span>
<EditButton
+ aria-label="settings.projects.change_visibility_form.label"
className="js-change-visibility spacer-left button-small"
onClick={[Function]}
/>
>
<Checkbox
checked={true}
+ label="projects_management.select_project.Project"
onCheck={[Function]}
thirdState={false}
/>
>
<Checkbox
checked={true}
+ label="projects_management.select_project.Project"
onCheck={[Function]}
thirdState={false}
/>
>
<Checkbox
checked={true}
+ label="projects_management.select_project.Project"
onCheck={[Function]}
thirdState={false}
/>
exports[`renders correctly 1`] = `
<Fragment>
<ActionsDropdown
+ label="projects_management.show_actions_for_x.Foo"
onOpen={[Function]}
>
<ActionsDropdownItem
<div
className="big-spacer-bottom"
>
- <table
- className="data"
+ <div
+ className="projects-management-search"
>
- <tbody>
- <tr>
- <td
- className="thin text-middle"
- >
- <Checkbox
- checked={false}
- id="projects-selection"
- onCheck={[Function]}
- thirdState={false}
- title="check_all"
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <Select
- className="input-medium it__project-qualifier-select"
- components={
- {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isDisabled={false}
- isSearchable={false}
- name="projects-qualifier"
- onChange={[Function]}
- options={
- [
- {
- "label": "qualifiers.TRK",
- "value": "TRK",
- },
- {
- "label": "qualifiers.VW",
- "value": "VW",
- },
- {
- "label": "qualifiers.APP",
- "value": "APP",
- },
- ]
- }
- value={
- {
- "label": "qualifiers.TRK",
- "value": "TRK",
- }
- }
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <DateInput
- inputClassName="input-medium"
- name="analyzed-before"
- onChange={[MockFunction]}
- placeholder="last_analysis_before"
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <Select
- className="input-small"
- isDisabled={false}
- isSearchable={false}
- name="projects-visibility"
- onChange={[Function]}
- options={
- [
- {
- "label": "visibility.both",
- "value": "all",
- },
- {
- "label": "visibility.public",
- "value": "public",
- },
- {
- "label": "visibility.private",
- "value": "private",
- },
- ]
- }
- value={
- {
- "label": "visibility.both",
- "value": "all",
- }
- }
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <Checkbox
- checked={false}
- className="link-checkbox-control"
- id="projects-provisioned"
- onCheck={[MockFunction]}
- thirdState={false}
- >
- <span
- className="text-middle little-spacer-left"
- >
- provisioning.only_provisioned
- </span>
- </Checkbox>
- <HelpTooltip
- className="spacer-left"
- overlay="provisioning.only_provisioned.tooltip"
- />
- </td>
- <td
- className="text-middle"
- >
- <SearchBox
- minLength={3}
- onChange={[MockFunction]}
- placeholder="search.search_by_name_or_key"
- value=""
- />
- </td>
- <td
- className="thin nowrap text-middle"
+ <div>
+ <Checkbox
+ checked={false}
+ id="projects-selection"
+ onCheck={[Function]}
+ thirdState={false}
+ title="check_all"
+ />
+ </div>
+ <Select
+ className="input-medium it__project-qualifier-select"
+ components={
+ {
+ "Option": [Function],
+ "SingleValue": [Function],
+ }
+ }
+ isDisabled={false}
+ isSearchable={false}
+ name="projects-qualifier"
+ onChange={[Function]}
+ options={
+ [
+ {
+ "label": "qualifiers.TRK",
+ "value": "TRK",
+ },
+ {
+ "label": "qualifiers.VW",
+ "value": "VW",
+ },
+ {
+ "label": "qualifiers.APP",
+ "value": "APP",
+ },
+ ]
+ }
+ value={
+ {
+ "label": "qualifiers.TRK",
+ "value": "TRK",
+ }
+ }
+ />
+ <DateInput
+ inputClassName="input-medium"
+ name="analyzed-before"
+ onChange={[MockFunction]}
+ placeholder="last_analysis_before"
+ />
+ <Select
+ className="input-small"
+ isDisabled={false}
+ isSearchable={false}
+ name="projects-visibility"
+ onChange={[Function]}
+ options={
+ [
+ {
+ "label": "visibility.both",
+ "value": "all",
+ },
+ {
+ "label": "visibility.public",
+ "value": "public",
+ },
+ {
+ "label": "visibility.private",
+ "value": "private",
+ },
+ ]
+ }
+ value={
+ {
+ "label": "visibility.both",
+ "value": "all",
+ }
+ }
+ />
+ <div>
+ <Checkbox
+ checked={false}
+ className="link-checkbox-control"
+ id="projects-provisioned"
+ onCheck={[MockFunction]}
+ thirdState={false}
+ >
+ <span
+ className="text-middle little-spacer-left"
>
- <Button
- className="js-bulk-apply-permission-template"
- disabled={true}
- onClick={[Function]}
- >
- permission_templates.bulk_apply_permission_template
- </Button>
- <Button
- className="js-delete spacer-left button-red"
- disabled={true}
- onClick={[Function]}
- title="permission_templates.select_to_delete"
- >
- delete
- </Button>
- </td>
- </tr>
- </tbody>
- </table>
+ provisioning.only_provisioned
+ </span>
+ <HelpTooltip
+ className="spacer-left"
+ overlay="provisioning.only_provisioned.tooltip"
+ />
+ </Checkbox>
+ </div>
+ <div
+ className="flex-grow"
+ >
+ <SearchBox
+ minLength={3}
+ onChange={[MockFunction]}
+ placeholder="search.search_by_name_or_key"
+ value=""
+ />
+ </div>
+ <div
+ className="bulk-actions"
+ >
+ <Button
+ className="js-bulk-apply-permission-template"
+ disabled={true}
+ onClick={[Function]}
+ >
+ permission_templates.bulk_apply_permission_template
+ </Button>
+ <Button
+ className="js-delete spacer-left button-red"
+ disabled={true}
+ onClick={[Function]}
+ title="permission_templates.select_to_delete"
+ >
+ delete
+ </Button>
+ </div>
+ </div>
</div>
`;
<div
className="big-spacer-bottom"
>
- <table
- className="data"
+ <div
+ className="projects-management-search"
>
- <tbody>
- <tr>
- <td
- className="thin text-middle"
- >
- <Checkbox
- checked={false}
- id="projects-selection"
- onCheck={[Function]}
- thirdState={false}
- title="check_all"
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <DateInput
- inputClassName="input-medium"
- name="analyzed-before"
- onChange={[MockFunction]}
- placeholder="last_analysis_before"
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <Select
- className="input-small"
- isDisabled={false}
- isSearchable={false}
- name="projects-visibility"
- onChange={[Function]}
- options={
- [
- {
- "label": "visibility.both",
- "value": "all",
- },
- {
- "label": "visibility.public",
- "value": "public",
- },
- {
- "label": "visibility.private",
- "value": "private",
- },
- ]
- }
- value={
- {
- "label": "visibility.both",
- "value": "all",
- }
- }
- />
- </td>
- <td
- className="thin nowrap text-middle"
- >
- <Checkbox
- checked={false}
- className="link-checkbox-control"
- id="projects-provisioned"
- onCheck={[MockFunction]}
- thirdState={false}
- >
- <span
- className="text-middle little-spacer-left"
- >
- provisioning.only_provisioned
- </span>
- </Checkbox>
- <HelpTooltip
- className="spacer-left"
- overlay="provisioning.only_provisioned.tooltip"
- />
- </td>
- <td
- className="text-middle"
- >
- <SearchBox
- minLength={3}
- onChange={[MockFunction]}
- placeholder="search.search_by_name_or_key"
- value=""
- />
- </td>
- <td
- className="thin nowrap text-middle"
+ <div>
+ <Checkbox
+ checked={false}
+ id="projects-selection"
+ onCheck={[Function]}
+ thirdState={false}
+ title="check_all"
+ />
+ </div>
+ <DateInput
+ inputClassName="input-medium"
+ name="analyzed-before"
+ onChange={[MockFunction]}
+ placeholder="last_analysis_before"
+ />
+ <Select
+ className="input-small"
+ isDisabled={false}
+ isSearchable={false}
+ name="projects-visibility"
+ onChange={[Function]}
+ options={
+ [
+ {
+ "label": "visibility.both",
+ "value": "all",
+ },
+ {
+ "label": "visibility.public",
+ "value": "public",
+ },
+ {
+ "label": "visibility.private",
+ "value": "private",
+ },
+ ]
+ }
+ value={
+ {
+ "label": "visibility.both",
+ "value": "all",
+ }
+ }
+ />
+ <div>
+ <Checkbox
+ checked={false}
+ className="link-checkbox-control"
+ id="projects-provisioned"
+ onCheck={[MockFunction]}
+ thirdState={false}
+ >
+ <span
+ className="text-middle little-spacer-left"
>
- <Button
- className="js-bulk-apply-permission-template"
- disabled={true}
- onClick={[Function]}
- >
- permission_templates.bulk_apply_permission_template
- </Button>
- <Button
- className="js-delete spacer-left button-red"
- disabled={true}
- onClick={[Function]}
- title="permission_templates.select_to_delete"
- >
- delete
- </Button>
- </td>
- </tr>
- </tbody>
- </table>
+ provisioning.only_provisioned
+ </span>
+ <HelpTooltip
+ className="spacer-left"
+ overlay="provisioning.only_provisioned.tooltip"
+ />
+ </Checkbox>
+ </div>
+ <div
+ className="flex-grow"
+ >
+ <SearchBox
+ minLength={3}
+ onChange={[MockFunction]}
+ placeholder="search.search_by_name_or_key"
+ value=""
+ />
+ </div>
+ <div
+ className="bulk-actions"
+ >
+ <Button
+ className="js-bulk-apply-permission-template"
+ disabled={true}
+ onClick={[Function]}
+ >
+ permission_templates.bulk_apply_permission_template
+ </Button>
+ <Button
+ className="js-delete spacer-left button-red"
+ disabled={true}
+ onClick={[Function]}
+ title="permission_templates.select_to_delete"
+ >
+ delete
+ </Button>
+ </div>
+ </div>
</div>
`;
}
}
>
- <div
- className="display-flex-center"
- >
+ <div>
<QualifierIcon
className="little-spacer-right"
qualifier="val"
}
}
>
- <div
- className="display-flex-center"
- >
+ <div>
<QualifierIcon
className="little-spacer-right"
qualifier="val"
settings.languages.select_a_language_placeholder=Select a language
settings.projects.default_visibility_of_new_projects=Default visibility of new projects:
+settings.projects.change_visibility_form.label=Change default visibility of new projects
settings.projects.change_visibility_form.header=Set Default Visibility of New Projects
settings.projects.change_visibility_form.warning=This will not change the visibility of already existing projects.
settings.projects.change_visibility_form.submit=Change Default Visibility
projects_management.delete_selected_warning=You're about to delete {0} selected items.
projects_management.delete_all_warning=You're about to delete all {0} items.
projects_management.project_has_been_successfully_created=Project {project} has been successfully created.
+projects_management.select_project=Select project {0}
+projects_management.show_actions_for_x=Show actions for project {0}
#------------------------------------------------------------------------------
#
projects / sonarqube.git / commitdiff