disabled={false}
halfWidth={false}
key="Reliability"
+ loading={false}
name={
<span
id="measure-overview-Reliability-name"
disabled={false}
halfWidth={false}
key="new_bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
disabled={false}
halfWidth={false}
key="bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
disabled={false}
halfWidth={false}
key="Reliability"
+ loading={false}
name={
<span
id="measure-overview-Reliability-name"
disabled={false}
halfWidth={false}
key="new_bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
disabled={false}
halfWidth={false}
key="bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
disabled={false}
halfWidth={false}
key="Reliability"
+ loading={false}
name={
<span
id="measure-overview-Reliability-name"
disabled={false}
halfWidth={false}
key="bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
disabled={false}
halfWidth={false}
key="Reliability"
+ loading={false}
name={
<span
id="measure-overview-Reliability-name"
disabled={false}
halfWidth={false}
key="new_bugs"
+ loading={false}
name={
<span
className="big-spacer-left"
import '../styles.css';
+interface FetchIssuesPromise {
+ components: ReferencedComponent[];
+ facets: RawFacet[];
+ issues: Issue[];
+ languages: ReferencedLanguage[];
+ paging: Paging;
+ rules: { name: string }[];
+ users: ReferencedUser[];
+}
+
interface Props {
branchLike?: BranchLike;
component?: Component;
currentUser: CurrentUser;
- fetchIssues: (
- query: RawQuery,
- requestOrganizations?: boolean
- ) => Promise<{
- components: ReferencedComponent[];
- facets: RawFacet[];
- issues: Issue[];
- languages: ReferencedLanguage[];
- paging: Paging;
- rules: { name: string }[];
- users: ReferencedUser[];
- }>;
+ fetchIssues: (query: RawQuery, requestOrganizations?: boolean) => Promise<FetchIssuesPromise>;
location: { pathname: string; query: RawQuery };
myIssues?: boolean;
onBranchesChange: () => void;
}
};
- fetchIssues = (additional: RawQuery, requestFacets = false, requestOrganizations = true) => {
+ fetchIssues = (
+ additional: RawQuery,
+ requestFacets = false,
+ requestOrganizations = true
+ ): Promise<FetchIssuesPromise> => {
const { component, organization } = this.props;
const { myIssues, openFacets, query } = this.state;
Object.assign(parameters, { assignees: '__me__' });
}
- return this.props.fetchIssues(parameters, requestOrganizations);
+ return this.props.fetchIssues(parameters, requestOrganizations).then(reponse => {
+ this.setState({ loading: false });
+ return reponse;
+ });
};
fetchFirstIssues() {
};
handleFilterChange = (changes: Partial<Query>) => {
+ this.setState({ loading: true });
this.context.router.push({
pathname: this.props.location.pathname,
query: {
<Sidebar
component={component}
facets={this.state.facets}
+ loading={this.state.loading}
myIssues={this.state.myIssues}
onFacetToggle={this.handleFacetToggle}
onFilterChange={this.handleFilterChange}
assignees: string[];
component: Component | undefined;
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.isAssigneeActive(assignee)}
key={assignee}
+ loading={this.props.loading}
name={this.getAssigneeName(assignee)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(assignee), this.props.facetMode)}
interface Props {
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.authors.includes(author)}
key={author}
+ loading={this.props.loading}
name={author}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(author), this.props.facetMode)}
createdBefore: Date | undefined;
createdInLast: string;
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
createdBefore: endDate,
tooltip,
x: index,
- y: stats[start]
+ y: this.props.loading ? 0 : stats[start]
};
});
<div className="spacer-top issues-predefined-periods">
<FacetItem
active={!this.hasValue()}
+ loading={this.props.loading}
name={translate('issues.facet.createdAt.all')}
onClick={this.handlePeriodClick}
value=""
{component ? (
<FacetItem
active={sinceLeakPeriod}
+ loading={this.props.loading}
name={translate('issues.leak_period')}
onClick={this.handleLeakPeriodClick}
value=""
<>
<FacetItem
active={createdInLast === '1w'}
+ loading={this.props.loading}
name={translate('issues.facet.createdAt.last_week')}
onClick={this.handlePeriodClick}
value="1w"
/>
<FacetItem
active={createdInLast === '1m'}
+ loading={this.props.loading}
name={translate('issues.facet.createdAt.last_month')}
onClick={this.handlePeriodClick}
value="1m"
/>
<FacetItem
active={createdInLast === '1y'}
+ loading={this.props.loading}
name={translate('issues.facet.createdAt.last_year')}
onClick={this.handlePeriodClick}
value="1y"
interface Props {
directories: string[];
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.directories.includes(directory)}
key={directory}
+ loading={this.props.loading}
name={this.renderName(directory)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(directory), this.props.facetMode)}
interface Props {
facetMode: string;
files: string[];
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.files.includes(file)}
key={file}
+ loading={this.props.loading}
name={this.renderName(file)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(file), this.props.facetMode)}
interface Props {
facetMode: string;
+ languages: string[];
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
- stats: { [x: string]: number } | undefined;
referencedLanguages: { [languageKey: string]: ReferencedLanguage };
- languages: string[];
+ stats: { [x: string]: number } | undefined;
}
export default class LanguageFacet extends React.PureComponent<Props> {
<FacetItem
active={this.props.languages.includes(language)}
key={language}
+ loading={this.props.loading}
name={this.getLanguageName(language)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(language), this.props.facetMode)}
interface Props {
facetMode: string;
+ loading?: boolean;
modules: string[];
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
<FacetItem
active={this.props.modules.includes(module)}
key={module}
+ loading={this.props.loading}
name={this.renderName(module)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(module), this.props.facetMode)}
interface Props {
component: Component | undefined;
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.projects.includes(project)}
key={project}
+ loading={this.props.loading}
name={this.renderName(project)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(project), this.props.facetMode)}
interface Props {
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
disabled={stat === 0 && !active}
halfWidth={true}
key={resolution}
+ loading={this.props.loading}
name={this.getFacetItemName(resolution)}
onClick={this.handleItemClick}
stat={formatFacetStat(stat, this.props.facetMode)}
interface Props {
facetMode: string;
languages: string[];
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.rules.includes(rule)}
key={rule}
+ loading={this.props.loading}
name={this.getRuleName(rule)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(rule), this.props.facetMode)}
interface Props {
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
disabled={stat === 0 && !active}
halfWidth={true}
key={severity}
+ loading={this.props.loading}
name={<SeverityHelper severity={severity} />}
onClick={this.handleItemClick}
stat={formatFacetStat(stat, this.props.facetMode)}
export interface Props {
component: Component | undefined;
facets: { [facet: string]: Facet };
+ loading?: boolean;
myIssues: boolean;
onFacetToggle: (property: string) => void;
onFilterChange: (changes: Partial<Query>) => void;
<FacetMode facetMode={query.facetMode} onChange={this.props.onFilterChange} />
<TypeFacet
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.types}
/>
<SeverityFacet
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.severities}
/>
<ResolutionFacet
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.resolutions}
/>
<StatusFacet
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.statuses}
createdBefore={query.createdBefore}
createdInLast={query.createdInLast}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.createdAt}
<RuleFacet
facetMode={query.facetMode}
languages={query.languages}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.rules}
<TagFacet
component={component}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.tags}
<ProjectFacet
component={component}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.projects}
{displayModulesFacet && (
<ModuleFacet
facetMode={query.facetMode}
+ loading={this.props.loading}
modules={query.modules}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
<DirectoryFacet
directories={query.directories}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.directories}
<FileFacet
facetMode={query.facetMode}
files={query.files}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.files}
assignees={query.assignees}
component={component}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.assignees}
<AuthorFacet
authors={query.authors}
facetMode={query.facetMode}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.authors}
<LanguageFacet
facetMode={query.facetMode}
languages={query.languages}
+ loading={this.props.loading}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.languages}
interface Props {
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
disabled={stat === 0 && !active}
halfWidth={true}
key={status}
+ loading={this.props.loading}
name={this.renderStatus(status)}
onClick={this.handleItemClick}
stat={formatFacetStat(stat, this.props.facetMode)}
interface Props {
component: Component | undefined;
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
<FacetItem
active={this.props.tags.includes(tag)}
key={tag}
+ loading={this.props.loading}
name={this.renderTag(tag)}
onClick={this.handleItemClick}
stat={formatFacetStat(this.getStat(tag), this.props.facetMode)}
interface Props {
facetMode: string;
+ loading?: boolean;
onChange: (changes: Partial<Query>) => void;
onToggle: (property: string) => void;
open: boolean;
active={active}
disabled={stat === 0 && !active}
key={type}
+ loading={this.props.loading}
name={
<span>
<IssueTypeIcon query={type} /> {translate('issue.type', type)}
active={false}
disabled={false}
halfWidth={false}
+ loading={false}
name="unassigned"
onClick={[Function]}
stat="5"
disabled={false}
halfWidth={false}
key="foo"
+ loading={false}
name={
<span>
<Connect(Avatar)
disabled={false}
halfWidth={false}
key="bar"
+ loading={false}
name="bar"
onClick={[Function]}
stat="7"
active={true}
disabled={false}
halfWidth={false}
+ loading={false}
name="unassigned"
onClick={[Function]}
stat="5"
disabled={false}
halfWidth={false}
key="foo"
+ loading={false}
name={
<span>
<Connect(Avatar)
disabled={false}
halfWidth={false}
key="bar"
+ loading={false}
name="bar"
onClick={[Function]}
stat="7"
active={false}
disabled={false}
halfWidth={false}
+ loading={false}
name="unassigned"
onClick={[Function]}
stat="5"
disabled={false}
halfWidth={false}
key="foo"
+ loading={false}
name={
<span>
<Connect(Avatar)
disabled={false}
halfWidth={false}
key="bar"
+ loading={false}
name="bar"
onClick={[Function]}
stat="7"
className?: string;
disabled?: boolean;
halfWidth?: boolean;
+ loading?: boolean;
name: React.ReactNode;
onClick: (x: string) => void;
stat?: React.ReactNode;
export default class FacetItem extends React.PureComponent<Props> {
static defaultProps = {
disabled: false,
- halfWidth: false
+ halfWidth: false,
+ loading: false
};
handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
return this.props.disabled ? (
<span className={className} data-facet={this.props.value}>
<span className="facet-name">{this.props.name}</span>
- {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
+ {this.props.stat != null && (
+ <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+ )}
</span>
) : (
<a className={className} data-facet={this.props.value} href="#" onClick={this.handleClick}>
<span className="facet-name">{this.props.name}</span>
- {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
+ {this.props.stat != null && (
+ <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+ )}
</a>
);
}
expect(renderFacetItem({ stat: '13' })).toMatchSnapshot();
});
+it('should loading stat', () => {
+ expect(renderFacetItem({ loading: true })).toMatchSnapshot();
+});
+
it('should render disabled', () => {
expect(renderFacetItem({ disabled: true })).toMatchSnapshot();
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should loading stat 1`] = `
+<a
+ className="facet search-navigator-facet"
+ data-facet="bar"
+ href="#"
+ onClick={[Function]}
+>
+ <span
+ className="facet-name"
+ >
+ foo
+ </span>
+</a>
+`;
+
exports[`should render active 1`] = `
<a
className="facet search-navigator-facet active"
projects / sonarqube.git / commitdiff