Skip to content
Permalink
Browse files

FIX Disable compare mode when there is only one version available

  • Loading branch information...
robbieaverill committed Aug 21, 2018
1 parent d1f7857 commit 7d18f3a5ec17a8893d346bc0743071c38d15146c

Large diffs are not rendered by default.

@@ -174,6 +174,15 @@ class HistoryViewer extends Component {
this.handleSetPage(currentPage - 1);
}

/**
* Compare mode is not available when only one version exists
*
* @returns {boolean}
*/
compareModeAvailable() {
return this.getVersions().length > 1;
}

/**
* Renders the detail form for a selected version
*
@@ -207,7 +216,7 @@ class HistoryViewer extends Component {
const schemaSearch = compare ? /:id|:class|:from|:to/g : /:id|:class|:version/g;
const schemaReplacements = compare ? schemaCompareReplacements : schemaVersionReplacements;

const version = compare ? compare.versionFrom : currentVersion;
const version = compare ? versionFrom : currentVersion;
const latestVersion = this.getLatestVersion();

const props = {
@@ -218,6 +227,7 @@ class HistoryViewer extends Component {
schemaUrl: schemaUrl.replace(schemaSearch, (match) => schemaReplacements[match]),
version,
compare,
compareModeAvailable: this.compareModeAvailable(),
previewState,
};

@@ -326,6 +336,7 @@ class HistoryViewer extends Component {
<ListComponent
versions={this.getVersions()}
showHeader={!compare || (compare && !hasVersionFrom)}
compareModeAvailable={this.compareModeAvailable()}
/>

<div className="history-viewer__pagination">
@@ -352,7 +363,7 @@ class HistoryViewer extends Component {
return <Loading />;
}

if (compare) {
if (this.compareModeAvailable() && compare) {
return this.renderCompareMode();
}

@@ -398,6 +409,7 @@ HistoryViewer.propTypes = {
};

HistoryViewer.defaultProps = {
compare: {},
contextKey: '',
currentVersion: false,
isInGridField: false,
@@ -32,10 +32,45 @@ class HistoryViewerHeading extends Component {
}
}

render() {
const { compareModeSelected } = this.props;
/**
* If compare mode is available, renders a dropdown containing the "compare two versions" option
*
* @returns {Dropdown|null}
*/
renderDropdown() {
const { compareModeAvailable, compareModeSelected } = this.props;
const { dropdownOpen } = this.state;

if (!compareModeAvailable) {
return null;
}

return (
<Dropdown
isOpen={dropdownOpen}
toggle={this.toggle}
className="history-viewer__actions-dropdown"
>
<DropdownToggle className="font-icon-sliders" />
<DropdownMenu right>
<div className="form-check">
<input
id="history-viewer-compare-two"
type="checkbox"
className="no-change-track history-viewer-heading__compare-mode-checkbox"
checked={compareModeSelected}
onChange={this.handleCompareModeChange}
/>
<label className="form-check-label" htmlFor="history-viewer-compare-two">
{i18n._t('HistoryViewerHeading.COMPARE_VERSIONS', 'Compare two versions')}
</label>
</div>
</DropdownMenu>
</Dropdown>
);
}

render() {
return (
<li className="history-viewer__heading" role="row">
<span className="history-viewer__version-no" role="columnheader">#</span>
@@ -46,39 +81,24 @@ class HistoryViewerHeading extends Component {
{i18n._t('HistoryViewer.Author', 'Author')}
</span>
<span className="history-viewer__actions" role="columnheader">
<Dropdown
isOpen={dropdownOpen}
toggle={this.toggle}
className="history-viewer__actions-dropdown"
>
<DropdownToggle className="font-icon-sliders" />
<DropdownMenu right>
<div className="form-check">
<input
id="history-viewer-compare-two"
type="checkbox"
className="no-change-track history-viewer-heading__compare-mode-checkbox"
checked={compareModeSelected}
onChange={this.handleCompareModeChange}
/>
<label className="form-check-label" htmlFor="history-viewer-compare-two">
{i18n._t('HistoryViewerHeading.COMPARE_VERSIONS', 'Compare two versions')}
</label>
</div>
</DropdownMenu>
</Dropdown>
{this.renderDropdown()}
</span>
</li>
);
}
}

HistoryViewerHeading.propTypes = {
compareModeAvailable: PropTypes.bool,
compareModeSelected: PropTypes.bool,
onCompareModeSelect: PropTypes.func,
onCompareModeUnselect: PropTypes.func,
};

HistoryViewerHeading.defaultProps = {
compareModeAvailable: true,
};

function mapStateToProps(state) {
return {
compareModeSelected: !!state.versionedAdmin.historyViewer.compare,
@@ -109,10 +109,10 @@ class HistoryViewerVersion extends Component {
* @returns {FormAction|null}
*/
renderCompareButton() {
const { compare, FormActionComponent } = this.props;
const { compareModeAvailable, compare, FormActionComponent } = this.props;
const translatedText = i18n._t('HistoryViewerVersion.COMPARE', 'Compare');

if (compare) {
if (!compareModeAvailable || compare) {
return null;
}

@@ -242,6 +242,7 @@ HistoryViewerVersion.propTypes = {
onSelect: PropTypes.func,
onCompareMode: PropTypes.func,
compare: compareType,
compareModeAvailable: PropTypes.bool,
StateComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
FormActionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
};
@@ -250,6 +251,7 @@ HistoryViewerVersion.defaultProps = {
isActive: false,
version: defaultVersion,
compare: false,
compareModeAvailable: true,
};

export { HistoryViewerVersion as Component };
@@ -140,7 +140,13 @@ class HistoryViewerVersionDetail extends PureComponent {
* @returns {Object}
*/
renderDetails() {
const { ListComponent, schemaUrl, CompareWarningComponent, previewState } = this.props;
const {
compareModeAvailable,
ListComponent,
schemaUrl,
CompareWarningComponent,
previewState,
} = this.props;

// Hide when the preview mode is explicitly enabled
if (this.isPreviewable() && previewState === 'preview') {
@@ -170,6 +176,7 @@ class HistoryViewerVersionDetail extends PureComponent {
<ListComponent
extraClass={classnames(extraListClasses)}
versions={this.getListVersions()}
compareModeAvailable={compareModeAvailable}
/>

<div className={classnames(formClasses)}>
@@ -84,12 +84,21 @@ class HistoryViewerVersionList extends PureComponent {
* @returns {HistoryViewerHeading|null}
*/
renderHeader() {
const { showHeader, HeadingComponent } = this.props;
return showHeader ? <HeadingComponent /> : null;
const { showHeader, HeadingComponent, compareModeAvailable } = this.props;

if (!showHeader) {
return null;
}

const headingProps = {
compareModeAvailable,
};

return <HeadingComponent {...headingProps} />;
}

render() {
const { VersionComponent, versions, compare } = this.props;
const { VersionComponent, versions, compareModeAvailable, compare } = this.props;

return (
<div className="history-viewer__list">
@@ -103,6 +112,7 @@ class HistoryViewerVersionList extends PureComponent {
isActive={this.isVersionActive(version)}
version={version}
compare={compare}
compareModeAvailable={compareModeAvailable}
/>
))
}
@@ -121,9 +131,11 @@ HistoryViewerVersionList.propTypes = {
VersionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
versions: PropTypes.arrayOf(versionType),
compare: compareType,
compareModeAvailable: PropTypes.bool,
};

HistoryViewerVersionList.defaultProps = {
compareModeAvailable: true,
extraClass: 'history-viewer__table',
messages: [],
showHeader: true,
@@ -251,34 +251,79 @@ describe('HistoryViewer', () => {

expect(wrapper.instance().isListView()).toBe(true);
});

it('returns false when in compare mode', () => {
const wrapper = shallow(
<HistoryViewer
ListComponent={ListComponent}
VersionDetailComponent={VersionDetailComponent}
CompareWarningComponent={CompareWarningComponent}
recordId={1}
onSelect={mockOnSelect}
onSetPage={mockOnSetPage}
limit={1}
page={2}
versions={versions}
currentVersion={{
ID: 1
}}
compare={{
versionFrom: {
ID: 1,
},
versionTo: {
ID: 2,
},
}}
/>
);

expect(wrapper.instance().isListView()).toBe(false);
});
});

it('returns false when in compare mode', () => {
const wrapper = shallow(
<HistoryViewer
ListComponent={ListComponent}
VersionDetailComponent={VersionDetailComponent}
CompareWarningComponent={CompareWarningComponent}
recordId={1}
onSelect={mockOnSelect}
onSetPage={mockOnSetPage}
limit={1}
page={2}
versions={versions}
currentVersion={{
ID: 1
}}
compare={{
versionFrom: {
ID: 1,
},
versionTo: {
ID: 2,
},
}}
/>
);
describe('compareModeAvailable()', () => {
it('returns true when more than one version is present', () => {
const wrapper = shallow(
<HistoryViewer
ListComponent={ListComponent}
VersionDetailComponent={VersionDetailComponent}
CompareWarningComponent={CompareWarningComponent}
recordId={1}
onSelect={mockOnSelect}
onSetPage={mockOnSetPage}
limit={1}
page={2}
versions={versions}
/>
);

expect(wrapper.instance().compareModeAvailable()).toBe(true);
});

it('returns false with only one version', () => {
const wrapper = shallow(
<HistoryViewer
ListComponent={ListComponent}
VersionDetailComponent={VersionDetailComponent}
CompareWarningComponent={CompareWarningComponent}
recordId={1}
onSelect={mockOnSelect}
onSetPage={mockOnSetPage}
limit={1}
page={2}
versions={{
Versions: {
pageInfo: { totalCount: 1 },
edges: [
{ node: { Version: 14 } },
],
}
}}
/>
);

expect(wrapper.instance().isListView()).toBe(false);
expect(wrapper.instance().compareModeAvailable()).toBe(false);
});
});
});

0 comments on commit 7d18f3a

Please sign in to comment.
You can’t perform that action at this time.