Skip to content

Commit

Permalink
Bug 1703757: Fix bug where some masthead actions cannot open in new tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhamilto
rhamilto committed May 1, 2020
1 parent 9384794 commit 1a28ecc
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 32 deletions.
6 changes: 3 additions & 3 deletions frontend/integration-tests/views/login.view.ts
View file
Expand Up @@ -4,7 +4,7 @@ import { appHost } from '../protractor.conf';
export const nameInput = $('#inputUsername');
export const passwordInput = $('#inputPassword');
export const submitButton = $('button[type=submit]');
export const logOutLink = element(by.linkText('Log out'));
export const logOutButton = element(by.buttonText('Log out'));
export const userDropdown = $('[data-test=user-dropdown] .pf-c-app-launcher__toggle');
export const pf3Login = until.presenceOf($('.login-pf'));
export const pf4Login = until.presenceOf($('[data-test-id="login"]'));
Expand Down Expand Up @@ -32,7 +32,7 @@ export const login = async (providerName: string, username: string, password: st
export const logout = async () => {
await browser.wait(until.presenceOf(userDropdown));
await userDropdown.click();
await browser.wait(until.presenceOf(logOutLink));
await logOutLink.click();
await browser.wait(until.presenceOf(logOutButton));
await logOutButton.click();
await browser.wait(until.or(pf3Login, pf4Login));
};
50 changes: 21 additions & 29 deletions frontend/public/components/masthead-toolbar.jsx
View file
Expand Up @@ -23,6 +23,7 @@ import {
Tooltip,
} from '@patternfly/react-core';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { FLAGS, YellowExclamationTriangleIcon } from '@console/shared';
import { formatNamespacedRouteForResource } from '@console/shared/src/utils';
import CloudShellMastheadButton from '@console/app/src/components/cloud-shell/CloudShellMastheadButton';
Expand Down Expand Up @@ -80,6 +81,7 @@ class MastheadToolbarContents_ extends React.Component {
};

this._getStatuspageData = this._getStatuspageData.bind(this);
this._getImportYAMLPath = this._getImportYAMLPath.bind(this);
this._updateUser = this._updateUser.bind(this);
this._onUserDropdownToggle = this._onUserDropdownToggle.bind(this);
this._onUserDropdownSelect = this._onUserDropdownSelect.bind(this);
Expand All @@ -93,7 +95,6 @@ class MastheadToolbarContents_ extends React.Component {
this._onApplicationLauncherDropdownToggle = this._onApplicationLauncherDropdownToggle.bind(
this,
);
this._onImportYAML = this._onImportYAML.bind(this);
this._onHelpDropdownSelect = this._onHelpDropdownSelect.bind(this);
this._onHelpDropdownToggle = this._onHelpDropdownToggle.bind(this);
this._onAboutModal = this._onAboutModal.bind(this);
Expand Down Expand Up @@ -124,6 +125,10 @@ class MastheadToolbarContents_ extends React.Component {
.then((statuspageData) => this.setState({ statuspageData }));
}

_getImportYAMLPath() {
return formatNamespacedRouteForResource('import', this.props.activeNamespace);
}

_updateUser() {
const { flags, user } = this.props;
if (!flags[FLAGS.OPENSHIFT]) {
Expand Down Expand Up @@ -175,12 +180,6 @@ class MastheadToolbarContents_ extends React.Component {
});
}

_onImportYAML(e) {
e.preventDefault();
const importYAMLPath = formatNamespacedRouteForResource('import', this.props.activeNamespace);
history.push(importYAMLPath);
}

_onHelpDropdownSelect() {
this.setState({
isHelpDropdownOpen: !this.state.isHelpDropdownOpen,
Expand All @@ -202,16 +201,6 @@ class MastheadToolbarContents_ extends React.Component {
this.setState({ showAboutModal: false });
}

_onCommandLineTools(e) {
e.preventDefault();
history.push('/command-line-tools');
}

_openLink(e, url) {
e.preventDefault();
window.open(url, '_blank').opener = null;
}

_getAdditionalLinks(links, type) {
return _.sortBy(
_.filter(links, (link) => link.spec.location === type),
Expand Down Expand Up @@ -309,8 +298,7 @@ class MastheadToolbarContents_ extends React.Component {
...(flags[FLAGS.CONSOLE_CLI_DOWNLOAD]
? [
{
label: 'Command Line Tools',
callback: this._onCommandLineTools,
component: <Link to="/command-line-tools">Command Line Tools</Link>,
},
]
: []),
Expand All @@ -319,13 +307,14 @@ class MastheadToolbarContents_ extends React.Component {
{
label: reportBugLink.label,
externalLink: true,
callback: (e) => this._openLink(e, reportBugLink.href),
href: reportBugLink.href,
},
]
: []),
{
label: 'About',
callback: this._onAboutModal,
component: 'button',
},
],
});
Expand All @@ -340,12 +329,9 @@ class MastheadToolbarContents_ extends React.Component {
_getAdditionalActions(links) {
const actions = _.map(links, (link) => {
return {
callback: (e) => {
e.preventDefault();
window.open(link.spec.href, '_blank').opener = null;
},
label: link.spec.text,
externalLink: true,
href: link.spec.href,
};
});

Expand All @@ -372,6 +358,7 @@ class MastheadToolbarContents_ extends React.Component {
icon={sectionAction.image}
href={sectionAction.href || '#'}
onClick={sectionAction.callback}
component={sectionAction.component}
{...this._externalProps(sectionAction)}
>
{sectionAction.label}
Expand All @@ -394,6 +381,7 @@ class MastheadToolbarContents_ extends React.Component {
icon={action.image}
href={action.href || '#'}
onClick={action.callback}
component={action.component}
{...this._externalProps(action)}
>
{action.label}
Expand Down Expand Up @@ -442,14 +430,15 @@ class MastheadToolbarContents_ extends React.Component {
if (window.SERVER_FLAGS.requestTokenURL) {
userActions.push({
label: 'Copy Login Command',
callback: (e) => this._openLink(e, window.SERVER_FLAGS.requestTokenURL),
href: window.SERVER_FLAGS.requestTokenURL,
externalLink: true,
});
}

userActions.push({
label: 'Log out',
callback: logout,
component: 'button',
});

actions.push({
Expand All @@ -471,8 +460,7 @@ class MastheadToolbarContents_ extends React.Component {
isSection: true,
actions: [
{
label: 'Import YAML',
callback: this._onImportYAML,
component: <Link to={this._getImportYAMLPath()}>Import YAML</Link>,
},
],
});
Expand Down Expand Up @@ -576,9 +564,13 @@ class MastheadToolbarContents_ extends React.Component {
)}
<ToolbarItem>
<Tooltip content="Import YAML" position={TooltipPosition.bottom}>
<Button variant="plain" aria-label="Import YAML" onClick={this._onImportYAML}>
<Link
to={this._getImportYAMLPath()}
className="pf-c-button pf-m-plain"
aria-lable="Import YAML"
>
<PlusCircleIcon className="co-masthead-icon" />
</Button>
</Link>
</Tooltip>
</ToolbarItem>
<CloudShellMastheadButton />
Expand Down

0 comments on commit 1a28ecc

Please sign in to comment.