* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import {
+ ButtonIcon,
+ ButtonSize,
+ ButtonVariety,
+ IconDelete,
+ IconEdit,
+} from '@sonarsource/echoes-react';
import * as React from 'react';
-import { DestructiveIcon, InteractiveIcon, PencilIcon, TrashIcon } from '~design-system';
+import { useIntl } from 'react-intl';
import EventInner from '../../../components/activity-graph/EventInner';
-import Tooltip from '../../../components/controls/Tooltip';
import { translate } from '../../../helpers/l10n';
import { AnalysisEvent, ProjectAnalysisEventCategory } from '../../../types/project-activity';
import ChangeEventForm from './forms/ChangeEventForm';
function Event(props: Readonly<EventProps>) {
const { analysisKey, event, canAdmin, isFirst } = props;
+ const intl = useIntl();
const [changing, setChanging] = React.useState(false);
const [deleting, setDeleting] = React.useState(false);
const canDelete = isOther || (isVersion && !isFirst);
const showActions = canAdmin && (canChange || canDelete);
+ const editEventLabel = intl.formatMessage(
+ { id: 'project_activity.events.tooltip.edit' },
+ { event: `${event.category} ${event.name}` },
+ );
+ const deleteEventLabel = intl.formatMessage(
+ { id: 'project_activity.events.tooltip.delete' },
+ { event: `${event.category} ${event.name}` },
+ );
+
return (
<div className="it__project-activity-event sw-flex sw-justify-between">
<EventInner event={event} />
{showActions && (
<div className="sw-grow-0 sw-shrink-0 sw-ml-2">
{canChange && (
- <Tooltip content={translate('project_activity.events.tooltip.edit')}>
- <InteractiveIcon
- Icon={PencilIcon}
- aria-label={translate('project_activity.events.tooltip.edit')}
- data-test="project-activity__edit-event"
- onClick={() => setChanging(true)}
- stopPropagation
- size="small"
- />
- </Tooltip>
+ <ButtonIcon
+ Icon={IconEdit}
+ className="-sw-mt-1"
+ variety={ButtonVariety.PrimaryGhost}
+ size={ButtonSize.Medium}
+ tooltipContent={editEventLabel}
+ ariaLabel={editEventLabel}
+ data-test="project-activity__edit-event"
+ onClick={() => setChanging(true)}
+ />
)}
{canDelete && (
- <Tooltip content={translate('project_activity.events.tooltip.delete')}>
- <DestructiveIcon
- Icon={TrashIcon}
- aria-label={translate('project_activity.events.tooltip.delete')}
- data-test="project-activity__delete-event"
- onClick={() => setDeleting(true)}
- stopPropagation
- size="small"
- />
- </Tooltip>
+ <ButtonIcon
+ className="-sw-mt-1"
+ Icon={IconDelete}
+ size={ButtonSize.Medium}
+ variety={ButtonVariety.DangerGhost}
+ tooltipContent={deleteEventLabel}
+ ariaLabel={deleteEventLabel}
+ data-test="project-activity__delete-event"
+ onClick={() => setDeleting(true)}
+ />
)}
</div>
)}
*/
import styled from '@emotion/styled';
+import { Spinner, Text } from '@sonarsource/echoes-react';
import classNames from 'classnames';
import { isEqual } from 'date-fns';
import * as React from 'react';
-import { Badge, HelperHintIcon, LightLabel, Spinner, themeColor } from '~design-system';
+import { Badge, HelperHintIcon, themeColor } from '~design-system';
import Tooltip from '../../../components/controls/Tooltip';
import DateFormatter from '../../../components/intl/DateFormatter';
import { toShortISO8601String } from '../../../helpers/dates';
}
render() {
- const byVersionByDay = getAnalysesByVersionByDay(this.props.analyses, this.props.query);
+ const { analyses, query, initializing } = this.props;
+ const byVersionByDay = getAnalysesByVersionByDay(analyses, query);
const newCodePeriod = this.getNewCodePeriodStartKey(byVersionByDay);
const hasFilteredData =
byVersionByDay.length > 1 ||
(byVersionByDay.length === 1 && Object.keys(byVersionByDay[0].byDay).length > 0);
- if (this.props.analyses.length === 0 || !hasFilteredData) {
- return (
- <div>
- {this.props.initializing ? (
- <div className="sw-p-4 sw-typo-default">
- <Spinner />
- </div>
- ) : (
- <div className="sw-p-4 sw-typo-default">
- <LightLabel>{translate('no_results')}</LightLabel>
- </div>
- )}
- </div>
- );
- }
+ const hasData = analyses.length > 0 && hasFilteredData;
return (
- <ul
- className="it__project-activity-versions-list sw-box-border sw-overflow-auto sw-grow sw-shrink-0 sw-py-0 sw-px-4"
- ref={(element) => (this.scrollContainer = element)}
- style={{
- height: 'calc(100vh - 250px)',
- marginTop:
- this.props.project.qualifier === ComponentQualifier.Project
- ? LIST_MARGIN_TOP
- : undefined,
- }}
- >
- {newCodePeriod.baselineAnalysisKey !== undefined &&
- newCodePeriod.firstNewCodeAnalysisKey === undefined && (
- <BaselineMarker className="sw-typo-default sw-mb-2">
- <span className="sw-py-1/2 sw-px-1">
- {translate('project_activity.new_code_period_start')}
- </span>
- <Tooltip
- content={translate('project_activity.new_code_period_start.help')}
- side="top"
- >
- <HelperHintIcon className="sw-ml-1" />
- </Tooltip>
- </BaselineMarker>
- )}
-
- {byVersionByDay.map((version, idx) => {
- const days = Object.keys(version.byDay);
- if (days.length <= 0) {
- return null;
- }
+ <>
+ <div aria-live="polite">
+ <Spinner isLoading={initializing}>
+ {!hasData && (
+ <div className="sw-p-4 sw-typo-default">
+ <Text isSubdued>{translate('no_results')}</Text>
+ </div>
+ )}
+ </Spinner>
+ </div>
- return (
- <li key={version.key || 'noversion'}>
- {version.version && (
- <VersionTagStyled
- className={classNames(
- 'sw-sticky sw-top-0 sw-left-0 sw-pb-1 -sw-ml-4 sw-z-normal',
- {
- 'sw-top-0 sw-pt-0': idx === 0,
- },
- )}
- >
+ {hasData && (
+ <ul
+ className="it__project-activity-versions-list sw-box-border sw-overflow-auto sw-grow sw-shrink-0 sw-py-0 sw-px-4"
+ ref={(element) => (this.scrollContainer = element)}
+ style={{
+ height: 'calc(100vh - 250px)',
+ marginTop:
+ this.props.project.qualifier === ComponentQualifier.Project
+ ? LIST_MARGIN_TOP
+ : undefined,
+ }}
+ >
+ {newCodePeriod.baselineAnalysisKey !== undefined &&
+ newCodePeriod.firstNewCodeAnalysisKey === undefined && (
+ <BaselineMarker className="sw-typo-default sw-mb-2">
+ <span className="sw-py-1/2 sw-px-1">
+ {translate('project_activity.new_code_period_start')}
+ </span>
<Tooltip
- mouseEnterDelay={0.5}
- content={`${translate('version')} ${version.version}`}
+ content={translate('project_activity.new_code_period_start.help')}
+ side="top"
>
- <Badge className="sw-p-1">{version.version}</Badge>
+ <HelperHintIcon className="sw-ml-1" />
</Tooltip>
- </VersionTagStyled>
+ </BaselineMarker>
)}
- <ul className="it__project-activity-days-list">
- {days.map((day) => (
- <li
- className="it__project-activity-day sw-mt-1 sw-mb-4"
- data-day={toShortISO8601String(Number(day))}
- key={day}
- >
- <div className="sw-typo-lg-semibold sw-mb-3">
- <DateFormatter date={Number(day)} long />
- </div>
- <ul className="it__project-activity-analyses-list">
- {version.byDay[day]?.map((analysis) =>
- this.renderAnalysis(analysis, newCodePeriod.firstNewCodeAnalysisKey),
+
+ {byVersionByDay.map((version, idx) => {
+ const days = Object.keys(version.byDay);
+ if (days.length <= 0) {
+ return null;
+ }
+
+ return (
+ <li key={version.key || 'noversion'}>
+ {version.version && (
+ <VersionTagStyled
+ className={classNames(
+ 'sw-sticky sw-top-0 sw-left-0 sw-pb-1 -sw-ml-4 sw-z-normal',
+ {
+ 'sw-top-0 sw-pt-0': idx === 0,
+ },
)}
- </ul>
- </li>
- ))}
- </ul>
- </li>
- );
- })}
- {this.props.analysesLoading && (
- <li className="sw-text-center">
- <Spinner />
- </li>
+ >
+ <Tooltip
+ mouseEnterDelay={0.5}
+ content={`${translate('version')} ${version.version}`}
+ >
+ <Badge className="sw-p-1">{version.version}</Badge>
+ </Tooltip>
+ </VersionTagStyled>
+ )}
+ <ul className="it__project-activity-days-list">
+ {days.map((day) => (
+ <li
+ className="it__project-activity-day sw-mt-1 sw-mb-4"
+ data-day={toShortISO8601String(Number(day))}
+ key={day}
+ >
+ <div className="sw-typo-lg-semibold sw-mb-3">
+ <DateFormatter date={Number(day)} long />
+ </div>
+ <ul className="it__project-activity-analyses-list">
+ {version.byDay[day]?.map((analysis) =>
+ this.renderAnalysis(analysis, newCodePeriod.firstNewCodeAnalysisKey),
+ )}
+ </ul>
+ </li>
+ ))}
+ </ul>
+ </li>
+ );
+ })}
+ {this.props.analysesLoading && (
+ <li className="sw-text-center">
+ <Spinner />
+ </li>
+ )}
+ </ul>
)}
- </ul>
+ </>
);
}
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { Button } from '@sonarsource/echoes-react';
+import { Button, ButtonGroup, Label } from '@sonarsource/echoes-react';
import * as React from 'react';
import { DateRangePicker, PopupZLevel } from '~design-system';
import { translate } from '../../../helpers/l10n';
render() {
return (
- <div className="sw-flex">
+ <ButtonGroup>
+ <Label htmlFor="date-from">{translate('project_activity.filter_date_range')}</Label>
<DateRangePicker
className="sw-w-abs-350"
startClearButtonLabel={translate('clear.start')}
>
{translate('project_activity.reset_dates')}
</Button>
- </div>
+ </ButtonGroup>
);
}
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { ButtonGroup, InputSize, Label, Select } from '@sonarsource/echoes-react';
import * as React from 'react';
-import { InputSelect, LabelValueSelectOption } from '~design-system';
+import { LabelValueSelectOption } from '~design-system';
import { isPortfolioLike } from '~sonar-aligned/helpers/component';
import { ComponentQualifier } from '~sonar-aligned/types/component';
import { translate } from '../../../helpers/l10n';
}));
const handleCategoryChange = React.useCallback(
- (option: { value: string } | null) => {
- updateQuery({ category: option ? option.value : '' });
+ (option: string | null) => {
+ updateQuery({ category: option ?? '' });
},
[updateQuery],
);
return (
<div className="sw-flex sw-mb-5 sw-items-center">
{!isPortfolioLike(project.qualifier) && (
- <InputSelect
- aria-label={translate('project_activity.filter_events')}
- className="sw-mr-8 sw-typo-default sw-w-abs-200"
- isClearable
- onChange={(data: LabelValueSelectOption) => handleCategoryChange(data)}
- options={options}
- placeholder={translate('project_activity.filter_events')}
- size="full"
- value={options.find((o) => o.value === category)}
- classNames={{
- menu: () => 'sw-z-dropdown-menu-page',
- }}
- />
+ <ButtonGroup>
+ <Label htmlFor="graph-type">{translate('project_activity.filter_events')}</Label>
+ <Select
+ id="events-filter"
+ className="sw-mr-8 sw-typo-default sw-w-abs-200"
+ hasDropdownAutoWidth
+ placeholder={translate('project_activity.filter_events.placeholder')}
+ onChange={(value) => handleCategoryChange(value)}
+ value={options.find((o) => o.value === category)?.value}
+ size={InputSize.Small}
+ data={options}
+ />
+ </ButtonGroup>
)}
<ProjectActivityDateInput from={from} onChange={props.updateQuery} to={to} />
</div>
await ui.addVersionEvent('1.1.0.1', initialValue);
expect(screen.getAllByText(initialValue).length).toBeGreaterThan(0);
- await ui.updateEvent(1, updatedValue);
+ await ui.updateEvent(`VERSION ${initialValue}`, updatedValue);
expect(screen.getAllByText(updatedValue).length).toBeGreaterThan(0);
- await ui.deleteEvent(0);
+ await ui.deleteEvent(`VERSION ${updatedValue}`);
expect(screen.queryByText(updatedValue)).not.toBeInTheDocument();
});
await ui.addCustomEvent('1.1.0.1', initialValue);
expect(screen.getAllByText(initialValue).length).toBeGreaterThan(0);
- await ui.updateEvent(1, updatedValue);
+ await ui.updateEvent(`OTHER ${initialValue}`, updatedValue);
expect(screen.getAllByText(updatedValue).length).toBeGreaterThan(0);
- await ui.deleteEvent(0);
+ await ui.deleteEvent(`OTHER ${updatedValue}`);
expect(screen.queryByText(updatedValue)).not.toBeInTheDocument();
});
addCustomEventBtn: byRole('menuitem', { name: 'project_activity.add_custom_event' }),
addVersionEvenBtn: byRole('menuitem', { name: 'project_activity.add_version' }),
deleteAnalysisBtn: byRole('menuitem', { name: 'project_activity.delete_analysis' }),
- editEventBtn: byRole('button', { name: 'project_activity.events.tooltip.edit' }),
- deleteEventBtn: byRole('button', { name: 'project_activity.events.tooltip.delete' }),
+ editEventBtn: (event: string) =>
+ byRole('button', { name: `project_activity.events.tooltip.edit.${event}` }),
+ deleteEventBtn: (event: string) =>
+ byRole('button', { name: `project_activity.events.tooltip.delete.${event}` }),
// Event modal.
nameInput: byLabelText('name'),
await user.click(ui.saveBtn.get());
},
- async updateEvent(index: number, value: string) {
- await user.click(ui.editEventBtn.getAll()[index]);
+ async updateEvent(event: string, value: string) {
+ await user.click(ui.editEventBtn(event).get());
await user.clear(ui.nameInput.get());
await user.type(ui.nameInput.get(), value);
await user.click(ui.changeBtn.get());
},
- async deleteEvent(index: number) {
- await user.click(ui.deleteEventBtn.getAll()[index]);
+ async deleteEvent(event: string) {
+ await user.click(ui.deleteEventBtn(event).get());
await user.click(ui.deleteBtn.get());
},
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { Tooltip } from '@sonarsource/echoes-react';
import * as React from 'react';
import { Note } from '~design-system';
import { ComponentContext } from '../../app/components/componentContext/ComponentContext';
import { useCurrentBranchQuery } from '../../queries/branch';
import { StaleTime } from '../../queries/common';
import { AnalysisEvent, ProjectAnalysisEventCategory } from '../../types/project-activity';
-import Tooltip from '../controls/Tooltip';
import { DefinitionChangeEventInner, isDefinitionChangeEvent } from './DefinitionChangeEventInner';
import { RichQualityGateEventInner, isRichQualityGateEvent } from './RichQualityGateEventInner';
import {
import styled from '@emotion/styled';
import * as React from 'react';
+import { useIntl } from 'react-intl';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
-import { ButtonSecondary } from '~design-system';
import { formatMeasure } from '~sonar-aligned/helpers/measures';
import { AdvancedTimeline } from '../../components/charts/AdvancedTimeline';
-import { translate } from '../../helpers/l10n';
+import { KeyboardKeys } from '../../helpers/keycodes';
import { getShortType } from '../../helpers/measures';
import { MeasureHistory, ParsedAnalysis, Serie } from '../../types/project-activity';
-import ModalButton from '../controls/ModalButton';
import DataTableModal from './DataTableModal';
import GraphsLegendCustom from './GraphsLegendCustom';
import GraphsLegendStatic from './GraphsLegendStatic';
showAreas,
graphDescription,
} = props;
+ const intl = useIntl();
const [tooltipIdx, setTooltipIdx] = React.useState<number | undefined>(undefined);
const [tooltipXPos, setTooltipXPos] = React.useState<number | undefined>(undefined);
+ const [tableIsVisible, setTableIsVisible] = React.useState(false);
const formatValue = (tick: string | number) => {
return formatMeasure(tick, getShortType(metricsType));
setTooltipXPos(tooltipXPos);
};
- const modalProp = ({ onClose }: { onClose: () => void }) => (
- <DataTableModal
- analyses={analyses}
- graphEndDate={graphEndDate}
- graphStartDate={graphStartDate}
- series={series}
- onClose={onClose}
- />
- );
-
const events = getAnalysisEventsForDate(analyses, selectedDate);
return (
- <StyledGraphContainer className="sw-flex sw-flex-col sw-justify-center sw-items-stretch sw-grow sw-py-2">
- {isCustom && props.removeCustomMetric ? (
- <GraphsLegendCustom
- leakPeriodDate={leakPeriodDate}
- removeMetric={props.removeCustomMetric}
- series={series}
- />
- ) : (
- <GraphsLegendStatic leakPeriodDate={leakPeriodDate} series={series} />
- )}
+ <>
+ <StyledGraphContainer
+ tabIndex={canShowDataAsTable ? 0 : -1}
+ aria-label={`${intl.formatMessage(
+ { id: 'project_activity.graphs.graph_shown_x' },
+ { '0': isCustom ? series.map((s) => s.translatedName).join(',') : graph },
+ )} ${intl.formatMessage({ id: 'project_activity.graphs.open_in_table' })}`}
+ onKeyUp={(event) => {
+ if (event.key === KeyboardKeys.Enter) {
+ setTableIsVisible(true);
+ }
+ }}
+ className="sw-flex sw-flex-col sw-justify-center sw-items-stretch sw-grow sw-py-2"
+ >
+ {isCustom && props.removeCustomMetric ? (
+ <GraphsLegendCustom
+ leakPeriodDate={leakPeriodDate}
+ removeMetric={props.removeCustomMetric}
+ series={series}
+ />
+ ) : (
+ <GraphsLegendStatic leakPeriodDate={leakPeriodDate} series={series} />
+ )}
- <div className="sw-flex-1">
- <AutoSizer>
- {({ height, width }) => (
- <div>
- <AdvancedTimeline
- endDate={graphEndDate}
- formatYTick={formatValue}
- height={height}
- leakPeriodDate={leakPeriodDate}
- splitPointDate={measuresHistory.find((m) => m.splitPointDate)?.splitPointDate}
- metricType={metricsType}
- selectedDate={selectedDate}
- series={series}
- showAreas={showAreas}
- startDate={graphStartDate}
- graphDescription={graphDescription}
- updateSelectedDate={props.updateSelectedDate}
- updateTooltip={updateTooltip}
- updateZoom={props.updateGraphZoom}
- width={width}
- />
+
<div className="sw-flex-1">
+ {({ height, width }) => (
+ endDate={graphEndDate}
+ formatYTick={formatValue}
+ height={height}
+ leakPeriodDate={leakPeriodDate}
+ splitPointDate={measuresHistory.find((m) => m.splitPointDate)?.splitPointDate}
+ metricType={metricsType}
+ selectedDate={selectedDate}
+ series={series}
+ showAreas={showAreas}
+ startDate={graphStartDate}
+ graphDescription={graphDescription}
+ updateSelectedDate={props.updateSelectedDate}
+ updateTooltip={updateTooltip}
+ updateZoom={props.updateGraphZoom}
+ width={width}
+ />
- {selectedDate !== undefined &&
- tooltipIdx !== undefined &&
- tooltipXPos !== undefined && (
- <GraphsTooltips
- events={events}
- formatValue={formatTooltipValue}
- graph={graph}
- graphWidth={width}
- measuresHistory={measuresHistory}
- selectedDate={selectedDate}
- series={series}
- tooltipIdx={tooltipIdx}
- tooltipPos={tooltipXPos}
- />
- )}
- </div>
- )}
- </AutoSizer>
- </div>
- {canShowDataAsTable && (
- <ModalButton modal={modalProp}>
- {({ onClick }) => (
- <ButtonSecondary className="sw-sr-only" onClick={onClick}>
- {translate('project_activity.graphs.open_in_table')}
- </ButtonSecondary>
- )}
- </ModalButton>
+ {selectedDate !== undefined &&
+ tooltipIdx !== undefined &&
+ tooltipXPos !== undefined && (
+ <GraphsTooltips
+ events={events}
+ formatValue={formatTooltipValue}
+ graph={graph}
+ graphWidth={width}
+ measuresHistory={measuresHistory}
+ selectedDate={selectedDate}
+ series={series}
+ tooltipIdx={tooltipIdx}
+ tooltipPos={tooltipXPos}
+ />
+ )}
+ </div>
+ )}
+ </AutoSizer>
+ </div>
+ </StyledGraphContainer>
+ {tableIsVisible && (
+ <DataTableModal
+ analyses={analyses}
+ graphEndDate={graphEndDate}
+ graphStartDate={graphStartDate}
+ series={series}
+ onClose={() => setTableIsVisible(false)}
+ />
)}
- </StyledGraphContainer>
+ </>
);
}
-const StyledGraphContainer = styled.div`
+const StyledGraphContainer = styled.section`
height: 300px;
`;
render() {
const { analyses, graph, loading, series, ariaLabel, canShowDataAsTable } = this.props;
const isCustom = isCustomGraph(graph);
+ const showAreas = [GraphType.coverage, GraphType.duplications].includes(graph);
- if (loading) {
- return (
- <div className="sw-flex sw-justify-center sw-flex-col sw-items-stretch sw-grow">
- <div className="sw-text-center">
- <Spinner isLoading={loading} />
- </div>
- </div>
- );
- }
-
- if (!hasHistoryData(series)) {
- return (
- <div className="sw-flex sw-items-center sw-justify-center sw-h-full">
- <Text isSubdued>
- {translate(
- isCustom
- ? 'project_activity.graphs.custom.no_history'
- : 'component_measures.no_history',
+ return (
+ <div className="sw-flex sw-justify-center sw-flex-col sw-items-stretch sw-text-center sw-grow">
+ <div aria-live="polite" aria-busy={loading}>
+ <Spinner isLoading={loading}>
+ {!hasHistoryData(series) && (
+ <Text isSubdued className="sw-max-w-full">
+ {translate(
+ isCustom
+ ? 'project_activity.graphs.custom.no_history'
+ : 'component_measures.no_history',
+ )}
+ </Text>
)}
- </Text>
+ </Spinner>
</div>
- );
- }
- const showAreas = [GraphType.coverage, GraphType.duplications].includes(graph);
- return (
- <div className="sw-flex sw-justify-center sw-flex-col sw-items-stretch sw-grow">
- {this.props.graphs.map((graphSeries, idx) => {
- return (
- <GraphHistory
- analyses={analyses}
- canShowDataAsTable={canShowDataAsTable}
- graph={graph}
- graphEndDate={this.props.graphEndDate}
- graphStartDate={this.props.graphStartDate}
- isCustom={isCustom}
- key={idx}
- leakPeriodDate={this.props.leakPeriodDate}
- measuresHistory={this.props.measuresHistory}
- metricsType={getSeriesMetricType(graphSeries)}
- removeCustomMetric={this.props.removeCustomMetric}
- selectedDate={this.state.selectedDate}
- series={graphSeries}
- graphDescription={
- ariaLabel ??
- translateWithParameters(
- 'project_activity.graphs.explanation_x',
- uniqBy(graphSeries, 'name')
- .map(({ translatedName }) => translatedName)
- .join(', '),
- )
- }
- showAreas={showAreas}
- updateGraphZoom={this.props.updateGraphZoom}
- updateSelectedDate={this.props.updateSelectedDate}
- updateTooltip={this.updateTooltip}
- />
- );
- })}
+
+ {hasHistoryData(series) && !loading && (
+ <>
+ {this.props.graphs.map((graphSeries, idx) => {
+ return (
+ <GraphHistory
+ analyses={analyses}
+ canShowDataAsTable={canShowDataAsTable}
+ graph={graph}
+ graphEndDate={this.props.graphEndDate}
+ graphStartDate={this.props.graphStartDate}
+ isCustom={isCustom}
+ key={idx}
+ leakPeriodDate={this.props.leakPeriodDate}
+ measuresHistory={this.props.measuresHistory}
+ metricsType={getSeriesMetricType(graphSeries)}
+ removeCustomMetric={this.props.removeCustomMetric}
+ selectedDate={this.state.selectedDate}
+ series={graphSeries}
+ graphDescription={
+ ariaLabel ??
+ translateWithParameters(
+ 'project_activity.graphs.explanation_x',
+ uniqBy(graphSeries, 'name')
+ .map(({ translatedName }) => translatedName)
+ .join(', '),
+ )
+ }
+ showAreas={showAreas}
+ updateGraphZoom={this.props.updateGraphZoom}
+ updateSelectedDate={this.props.updateSelectedDate}
+ updateTooltip={this.updateTooltip}
+ />
+ );
+ })}
+ </>
+ )}
</div>
);
}
await ui.closeDataTable();
await ui.changeGraphType(GraphType.coverage);
- await ui.openDataTable();
+ await ui.openDataTable(true);
expect(ui.dataTable.get()).toBeInTheDocument();
expect(ui.dataTableColHeaders.getAll()).toHaveLength(4);
expect(ui.dataTableRows.getAll()).toHaveLength(HISTORY_COUNT + 1);
noDataText: byText('project_activity.graphs.custom.no_history'),
// Data in table.
- openInTableBtn: byRole('button', { name: 'project_activity.graphs.open_in_table' }),
+ openInTableRegion: byRole('region', { name: /project_activity.graphs.open_in_table/ }),
closeDataTableBtn: byRole('button', { name: 'close' }),
dataTable: byRole('table'),
dataTableRows: byRole('row'),
async removeMetric(metric: MetricKey) {
await user.click(ui.legendRemoveMetricBtn(metric).get());
},
- async openDataTable() {
- await user.click(ui.openInTableBtn.get());
+ async openDataTable(tabFromGraphSelection = false) {
+ // tab to graph selection and close popup
+ if (!tabFromGraphSelection) {
+ await user.tab();
+ await user.keyboard('{escape}');
+ }
+ // tab to graph region and open data table
+ await user.tab();
+ await user.keyboard('{enter}');
},
async closeDataTable() {
await user.click(ui.closeDataTableBtn.get());
if (date === undefined) {
return intl.formatMessage({ id: 'disabled_' });
}
- return `${intl.formatDate(date, { month: 'long', format: 'M' })} ${intl.formatDate(date, {
+ return `${intl.formatDate(date, { month: 'long' })} ${intl.formatDate(date, {
year: 'numeric',
- format: 'y',
})}`;
};
project_activity.reset_dates=Reset dates
project_activity.delete_analysis=Delete Analysis
project_activity.delete_analysis.question=Are you sure you want to delete this analysis from the history?
-project_activity.filter_events=Filter events
-project_activity.events.tooltip.edit=Edit this event
-project_activity.events.tooltip.delete=Delete this event
+project_activity.filter_events=Events filter
+project_activity.filter_events.placeholder=Select an event
+project_activity.filter_date_range=Date range filter
+project_activity.events.tooltip.edit=Edit this event: {event}
+project_activity.events.tooltip.delete=Delete this event: {event}
project_activity.new_code_period_start=Everything above this line is New Code
project_activity.new_code_period_start.help=The analysis below this mark is the baseline for New Code comparison
project_activity.graphs.custom.metric_no_history=This metric has no historical data to display.
project_activity.graphs.custom.search=Search for a metric by name
project_activity.graphs.custom.type_x_message=Only "{0}" metrics are available with your current selection.
-project_activity.graphs.open_in_table=Show the graph data in a table
+project_activity.graphs.graph_shown_x=Graph shown for {0}.
+project_activity.graphs.open_in_table=Press 'Enter' to show the graph data in a table.
project_activity.graphs.data_table.title=Graph data in table format
project_activity.graphs.data_table.max_lines_warning=Only the {0} most recent data entries are shown. If you want to see different data, change the date filters on the main page.
project_activity.graphs.data_table.no_data_warning=There is no data for the selected series.
projects / sonarqube.git / commitdiff