diff options
Diffstat (limited to 'server/sonar-web')
56 files changed, 2027 insertions, 685 deletions
diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx index d4c6fb3a426..a89319b690a 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx @@ -22,6 +22,7 @@ import * as PropTypes from 'prop-types'; import GlobalNav from './nav/global/GlobalNav'; import GlobalFooterContainer from './GlobalFooterContainer'; import GlobalMessagesContainer from './GlobalMessagesContainer'; +import Workspace from '../../components/workspace/Workspace'; interface Props { children: React.ReactNode; @@ -61,14 +62,16 @@ export default class GlobalContainer extends React.PureComponent<Props, State> { <div className="global-container"> <div className="page-wrapper" id="container"> <div className="page-container"> - <GlobalNav - closeOnboardingTutorial={this.closeOnboardingTutorial} - isOnboardingTutorialOpen={this.state.isOnboardingTutorialOpen} - location={this.props.location} - openOnboardingTutorial={this.openOnboardingTutorial} - /> - <GlobalMessagesContainer /> - {this.props.children} + <Workspace> + <GlobalNav + closeOnboardingTutorial={this.closeOnboardingTutorial} + isOnboardingTutorialOpen={this.state.isOnboardingTutorialOpen} + location={this.props.location} + openOnboardingTutorial={this.openOnboardingTutorial} + /> + <GlobalMessagesContainer /> + {this.props.children} + </Workspace> </div> </div> <GlobalFooterContainer /> diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentPin.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentPin.tsx index 867f4bd476f..c9b3fb86af6 100644 --- a/server/sonar-web/src/main/js/apps/code/components/ComponentPin.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/ComponentPin.tsx @@ -18,10 +18,11 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; +import * as PropTypes from 'prop-types'; import { Component } from '../types'; import { BranchLike } from '../../../app/types'; import PinIcon from '../../../components/shared/pin-icon'; -import Workspace from '../../../components/workspace/main'; +import { WorkspaceContext } from '../../../components/workspace/context'; import { translate } from '../../../helpers/l10n'; interface Props { @@ -29,19 +30,34 @@ interface Props { component: Component; } -export default function ComponentPin({ branchLike, component }: Props) { - const handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => { +export default class ComponentPin extends React.PureComponent<Props> { + // prettier-ignore + context!: { workspace: WorkspaceContext }; + + static contextTypes = { + workspace: PropTypes.object.isRequired + }; + + handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => { event.preventDefault(); - Workspace.openComponent({ branchLike, key: component.key }); + event.currentTarget.blur(); + this.context.workspace.openComponent({ + branchLike: this.props.branchLike, + key: this.props.component.key, + name: this.props.component.path, + qualifier: this.props.component.qualifier + }); }; - return ( - <a - className="link-no-underline" - onClick={handleClick} - title={translate('component_viewer.open_in_workspace')} - href="#"> - <PinIcon /> - </a> - ); + render() { + return ( + <a + className="link-no-underline" + href="#" + onClick={this.handleClick} + title={translate('component_viewer.open_in_workspace')}> + <PinIcon /> + </a> + ); + } } diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx index 1a272610065..97b99759784 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx @@ -37,6 +37,7 @@ import { Button } from '../../../components/ui/buttons'; interface Props { canWrite: boolean | undefined; + hideSimilarRulesFilter?: boolean; onFilterChange: (changes: Partial<Query>) => void; onTagsChange: (tags: string[]) => void; organization: string | undefined; @@ -228,7 +229,9 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> { to={getRuleUrl(ruleDetails.key, this.props.organization)}> <LinkIcon /> </Link> - <SimilarRulesFilter onFilterChange={this.props.onFilterChange} rule={ruleDetails} /> + {!this.props.hideSimilarRulesFilter && ( + <SimilarRulesFilter onFilterChange={this.props.onFilterChange} rule={ruleDetails} /> + )} </div> <h3 className="page-title coding-rules-detail-header"> <big>{ruleDetails.name}</big> diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx index 0ba3cd6ec40..72ac6fa5bcd 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx @@ -20,10 +20,12 @@ import { stringify } from 'querystring'; import * as React from 'react'; import { Link } from 'react-router'; +import * as PropTypes from 'prop-types'; import MeasuresOverlay from './components/MeasuresOverlay'; import { SourceViewerFile, BranchLike } from '../../app/types'; import QualifierIcon from '../shared/QualifierIcon'; import FavoriteContainer from '../controls/FavoriteContainer'; +import { WorkspaceContext } from '../workspace/context'; import { getPathUrlAsString, getBranchLikeUrl, @@ -46,6 +48,13 @@ interface State { } export default class SourceViewerHeader extends React.PureComponent<Props, State> { + // prettier-ignore + context!: { workspace: WorkspaceContext }; + + static contextTypes = { + workspace: PropTypes.object.isRequired + }; + state: State = { measuresOverlay: false }; handleShowMeasuresClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => { @@ -60,8 +69,7 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State openInWorkspace = (event: React.SyntheticEvent<HTMLAnchorElement>) => { event.preventDefault(); const { key } = this.props.sourceViewerFile; - const Workspace = require('../workspace/main').default; - Workspace.openComponent({ key, branchLike: this.props.branchLike }); + this.context.workspace.openComponent({ branchLike: this.props.branchLike, key }); }; render() { diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/CoveragePopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/CoveragePopup.tsx index ef06788347e..4d60126638e 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/components/CoveragePopup.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/components/CoveragePopup.tsx @@ -19,10 +19,12 @@ */ import * as React from 'react'; import { groupBy } from 'lodash'; +import * as PropTypes from 'prop-types'; import { getTests } from '../../../api/components'; import { BranchLike, SourceLine, TestCase } from '../../../app/types'; import BubblePopup from '../../common/BubblePopup'; import TestStatusIcon from '../../shared/TestStatusIcon'; +import { WorkspaceContext } from '../../workspace/context'; import { isSameBranchLike, getBranchLikeQuery } from '../../../helpers/branches'; import { translate } from '../../../helpers/l10n'; import { collapsePath } from '../../../helpers/path'; @@ -41,7 +43,14 @@ interface State { } export default class CoveragePopup extends React.PureComponent<Props, State> { + // prettier-ignore + context!: { workspace: WorkspaceContext }; mounted = false; + + static contextTypes = { + workspace: PropTypes.object.isRequired + }; + state: State = { loading: true, testCases: [] }; componentDidMount() { @@ -87,8 +96,9 @@ export default class CoveragePopup extends React.PureComponent<Props, State> { event.preventDefault(); event.currentTarget.blur(); const { key } = event.currentTarget.dataset; - const Workspace = require('../../workspace/main').default; - Workspace.openComponent({ key, branchLike: this.props.branchLike }); + if (key) { + this.context.workspace.openComponent({ branchLike: this.props.branchLike, key }); + } this.props.onClose(); }; diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx index d4b75a93b28..445b750f807 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx @@ -19,10 +19,12 @@ */ import * as React from 'react'; import { Link } from 'react-router'; +import * as PropTypes from 'prop-types'; import { groupBy, sortBy } from 'lodash'; import { BranchLike, DuplicatedFile, DuplicationBlock, SourceViewerFile } from '../../../app/types'; import BubblePopup from '../../common/BubblePopup'; import QualifierIcon from '../../shared/QualifierIcon'; +import { WorkspaceContext } from '../../workspace/context'; import { translate } from '../../../helpers/l10n'; import { collapsedDirFromPath, fileFromPath } from '../../../helpers/path'; import { getProjectUrl } from '../../../helpers/urls'; @@ -38,6 +40,13 @@ interface Props { } export default class DuplicationPopup extends React.PureComponent<Props> { + // prettier-ignore + context!: { workspace: WorkspaceContext }; + + static contextTypes = { + workspace: PropTypes.object.isRequired + }; + isDifferentComponent = ( a: { project: string; subProject?: string }, b: { project: string; subProject?: string } @@ -48,9 +57,14 @@ export default class DuplicationPopup extends React.PureComponent<Props> { handleFileClick = (event: React.MouseEvent<HTMLAnchorElement>) => { event.preventDefault(); event.currentTarget.blur(); - const Workspace = require('../../workspace/main').default; const { key, line } = event.currentTarget.dataset; - Workspace.openComponent({ key, line, branchLike: this.props.branchLike }); + if (key) { + this.context.workspace.openComponent({ + branchLike: this.props.branchLike, + key, + line: line ? Number(line) : undefined + }); + } this.props.onClose(); }; diff --git a/server/sonar-web/src/main/js/components/icons-components/CollapseIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/CollapseIcon.tsx new file mode 100644 index 00000000000..f1070ac740e --- /dev/null +++ b/server/sonar-web/src/main/js/components/icons-components/CollapseIcon.tsx @@ -0,0 +1,39 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { IconProps } from './types'; + +export default function CollapseIcon({ className, fill = 'currentColor', size = 16 }: IconProps) { + return ( + <svg + className={className} + height={size} + version="1.1" + viewBox="0 0 16 16" + width={size} + xmlSpace="preserve" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <path + d="M8 8.509v3.56c0 .138-.05.257-.151.357-.1.101-.22.151-.358.151a.489.489 0 0 1-.357-.15l-1.145-1.145-2.638 2.639a.251.251 0 0 1-.366 0l-.906-.906a.251.251 0 0 1 0-.366l2.639-2.638-1.144-1.145a.489.489 0 0 1-.151-.357c0-.138.05-.257.15-.358.101-.1.22-.151.358-.151h3.56c.138 0 .257.05.358.151.1.1.151.22.151.358zm6-5.34c0 .068-.026.129-.08.182l-2.638 2.638 1.144 1.145c.101.1.151.22.151.357 0 .138-.05.257-.15.358-.101.1-.22.151-.358.151h-3.56a.489.489 0 0 1-.358-.151A.489.489 0 0 1 8 7.491v-3.56c0-.138.05-.257.151-.357.1-.101.22-.151.358-.151.137 0 .257.05.357.15l1.145 1.145 2.638-2.639a.251.251 0 0 1 .366 0l.906.906c.053.053.079.114.079.183z" + style={{ fill }} + /> + </svg> + ); +} diff --git a/server/sonar-web/src/main/js/components/icons-components/ExpandIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/ExpandIcon.tsx new file mode 100644 index 00000000000..1105b7833ed --- /dev/null +++ b/server/sonar-web/src/main/js/components/icons-components/ExpandIcon.tsx @@ -0,0 +1,39 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { IconProps } from './types'; + +export default function ExpandIcon({ className, fill = 'currentColor', size = 16 }: IconProps) { + return ( + <svg + className={className} + height={size} + version="1.1" + viewBox="0 0 16 16" + width={size} + xmlSpace="preserve" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <path + d="M7.898 9.25a.247.247 0 0 1-.078.18l-2.593 2.593 1.125 1.125a.48.48 0 0 1 .148.352.48.48 0 0 1-.148.352A.48.48 0 0 1 6 14H2.5a.48.48 0 0 1-.352-.148A.48.48 0 0 1 2 13.5V10a.48.48 0 0 1 .148-.352A.48.48 0 0 1 2.5 9.5a.48.48 0 0 1 .352.148l1.125 1.125L6.57 8.18a.247.247 0 0 1 .36 0l.89.89a.247.247 0 0 1 .078.18zM14 2.5V6a.48.48 0 0 1-.148.352.48.48 0 0 1-.352.148.48.48 0 0 1-.352-.148l-1.125-1.125L9.43 7.82a.247.247 0 0 1-.36 0l-.89-.89a.247.247 0 0 1 0-.36l2.593-2.593-1.125-1.125A.48.48 0 0 1 9.5 2.5a.48.48 0 0 1 .148-.352A.48.48 0 0 1 10 2h3.5a.48.48 0 0 1 .352.148A.48.48 0 0 1 14 2.5z" + style={{ fill }} + /> + </svg> + ); +} diff --git a/server/sonar-web/src/main/js/components/icons-components/MinimizeIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/MinimizeIcon.tsx new file mode 100644 index 00000000000..4478239ddf1 --- /dev/null +++ b/server/sonar-web/src/main/js/components/icons-components/MinimizeIcon.tsx @@ -0,0 +1,39 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { IconProps } from './types'; + +export default function MinimizeIcon({ className, fill = 'currentColor', size = 16 }: IconProps) { + return ( + <svg + className={className} + height={size} + version="1.1" + viewBox="0 0 16 16" + width={size} + xmlSpace="preserve" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <path + d="M14 12.1v1.267c0 .176-.08.325-.239.448a.918.918 0 0 1-.58.185H2.819a.918.918 0 0 1-.58-.185C2.08 13.692 2 13.543 2 13.367V12.1c0-.176.08-.326.239-.449a.918.918 0 0 1 .58-.185h10.363c.227 0 .42.062.58.185.158.123.238.273.238.449z" + style={{ fill }} + /> + </svg> + ); +} diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.js b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.js index df26092b983..515edd9b3ba 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.js +++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.js @@ -19,6 +19,7 @@ */ // @flow import React from 'react'; +import PropTypes from 'prop-types'; import { translate } from '../../../helpers/l10n'; export default class IssueMessage extends React.PureComponent { @@ -27,13 +28,16 @@ export default class IssueMessage extends React.PureComponent { rule: string, organization: string }; -*/ + */ + + static contextTypes = { + workspace: PropTypes.object.isRequired + }; handleClick = (e /*: MouseEvent */) => { e.preventDefault(); e.stopPropagation(); - const Workspace = require('../../workspace/main').default; - Workspace.openRule({ + this.context.workspace.openRule({ key: this.props.rule, organization: this.props.organization }); diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.js b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.js index eafe943c67a..785bc2a21f1 100644 --- a/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.js +++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/IssueMessage-test.js @@ -27,7 +27,8 @@ it('should render with the message and a link to open the rule', () => { rule="javascript:S1067" message="Reduce the number of conditional operators (4) used in the expression" organization="myorg" - /> + />, + { context: { workspace: {} } } ); expect(element).toMatchSnapshot(); }); diff --git a/server/sonar-web/src/main/js/components/workspace/Workspace.tsx b/server/sonar-web/src/main/js/components/workspace/Workspace.tsx new file mode 100644 index 00000000000..a5dcce0d75b --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/Workspace.tsx @@ -0,0 +1,235 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import * as PropTypes from 'prop-types'; +import { omit, uniqBy } from 'lodash'; +import { WorkspaceContext, ComponentDescriptor, RuleDescriptor } from './context'; +import WorkspaceNav from './WorkspaceNav'; +import WorkspacePortal from './WorkspacePortal'; +import { lazyLoad } from '../lazyLoad'; +import './styles.css'; + +const WorkspaceRuleViewer = lazyLoad(() => import('./WorkspaceRuleViewer')); +const WorkspaceComponentViewer = lazyLoad(() => import('./WorkspaceComponentViewer')); + +interface State { + components: ComponentDescriptor[]; + height: number; + maximized?: boolean; + open: { component?: string; rule?: string }; + rules: RuleDescriptor[]; +} + +const MIN_HEIGHT = 0.05; +const MAX_HEIGHT = 0.85; +const INITIAL_HEIGHT = 300; + +const STORAGE_KEY = 'sonarqube-workspace'; +const TYPE_KEY = '__type__'; + +export default class Workspace extends React.PureComponent<{}, State> { + mounted = false; + + static childContextTypes = { + workspace: PropTypes.object + }; + + constructor(props: {}) { + super(props); + this.state = { height: INITIAL_HEIGHT, open: {}, ...this.loadWorkspace() }; + } + + getChildContext = (): { workspace: WorkspaceContext } => { + return { workspace: { openComponent: this.openComponent, openRule: this.openRule } }; + }; + + componentDidMount() { + this.mounted = true; + } + + componentDidUpdate(_: {}, prevState: State) { + if (prevState.components !== this.state.components || prevState.rules !== this.state.rules) { + this.saveWorkspace(); + } + } + + componentWillUnmount() { + this.mounted = false; + } + + loadWorkspace = () => { + try { + const data: any[] = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || ''); + const components: ComponentDescriptor[] = data.filter(x => x[TYPE_KEY] === 'component'); + const rules: RuleDescriptor[] = data.filter(x => x[TYPE_KEY] === 'rule'); + return { components, rules }; + } catch { + // fail silently + return { components: [], rules: [] }; + } + }; + + saveWorkspace = () => { + const data = [ + // do not save line number, next time the file is open, it should be open on the first line + ...this.state.components.map(x => omit({ ...x, [TYPE_KEY]: 'component' }, 'line')), + ...this.state.rules.map(x => ({ ...x, [TYPE_KEY]: 'rule' })) + ]; + try { + window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); + } catch { + // fail silently + } + }; + + openComponent = (component: ComponentDescriptor) => { + this.setState((state: State): Partial<State> => ({ + components: uniqBy([...state.components, component], component => component.key), + open: { component: component.key } + })); + }; + + reopenComponent = (componentKey: string) => { + this.setState({ open: { component: componentKey } }); + }; + + openRule = (rule: RuleDescriptor) => { + this.setState((state: State): Partial<State> => ({ + open: { rule: rule.key }, + rules: uniqBy([...state.rules, rule], rule => rule.key) + })); + }; + + reopenRule = (ruleKey: string) => { + this.setState({ open: { rule: ruleKey } }); + }; + + closeComponent = (componentKey: string) => { + this.setState((state: State): Partial<State> => ({ + components: state.components.filter(x => x.key !== componentKey), + open: { + ...state.open, + component: state.open.component === componentKey ? undefined : state.open.component + } + })); + }; + + closeRule = (ruleKey: string) => { + this.setState((state: State): Partial<State> => ({ + rules: state.rules.filter(x => x.key !== ruleKey), + open: { + ...state.open, + rule: state.open.rule === ruleKey ? undefined : state.open.rule + } + })); + }; + + handleComponentLoad = (details: { key: string; name: string; qualifier: string }) => { + if (this.mounted) { + const { key, name, qualifier } = details; + this.setState((state: State): Partial<State> => ({ + components: state.components.map( + component => (component.key === key ? { ...component, name, qualifier } : component) + ) + })); + } + }; + + handleRuleLoad = (details: { key: string; name: string }) => { + if (this.mounted) { + const { key, name } = details; + this.setState((state: State): Partial<State> => ({ + rules: state.rules.map(rule => (rule.key === key ? { ...rule, name } : rule)) + })); + } + }; + + collapse = () => { + this.setState({ open: {} }); + }; + + maximize = () => { + this.setState({ maximized: true }); + }; + + minimize = () => { + this.setState({ maximized: false }); + }; + + resize = (deltaY: number) => { + const minHeight = window.innerHeight * MIN_HEIGHT; + const maxHeight = window.innerHeight * MAX_HEIGHT; + this.setState((state: State): Partial<State> => ({ + height: Math.min(maxHeight, Math.max(minHeight, state.height - deltaY)) + })); + }; + + render() { + const { components, open, rules } = this.state; + + const openComponent = open.component && components.find(x => x.key === open.component); + const openRule = open.rule && rules.find(x => x.key === open.rule); + + const height = this.state.maximized ? window.innerHeight * MAX_HEIGHT : this.state.height; + + return ( + <> + {this.props.children} + <WorkspacePortal> + <WorkspaceNav + components={components} + onComponentClose={this.closeComponent} + onComponentOpen={this.reopenComponent} + onRuleClose={this.closeRule} + onRuleOpen={this.reopenRule} + open={this.state.open} + rules={this.state.rules} + /> + {openComponent && ( + <WorkspaceComponentViewer + component={openComponent} + height={height} + maximized={this.state.maximized} + onClose={this.closeComponent} + onCollapse={this.collapse} + onLoad={this.handleComponentLoad} + onMaximize={this.maximize} + onMinimize={this.minimize} + onResize={this.resize} + /> + )} + {openRule && ( + <WorkspaceRuleViewer + height={height} + maximized={this.state.maximized} + onClose={this.closeRule} + onCollapse={this.collapse} + onLoad={this.handleRuleLoad} + onMaximize={this.maximize} + onMinimize={this.minimize} + onResize={this.resize} + rule={openRule} + /> + )} + </WorkspacePortal> + </> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx new file mode 100644 index 00000000000..8679e169731 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentTitle.tsx @@ -0,0 +1,40 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { ComponentDescriptor } from './context'; +import QualifierIcon from '../shared/QualifierIcon'; +import { collapsePath } from '../../helpers/path'; + +interface Props { + component: ComponentDescriptor; + limited?: boolean; +} + +export default function WorkspaceComponentTitle({ component, limited }: Props) { + const { name = '—' } = component; + return ( + <> + {component.qualifier && ( + <QualifierIcon className="little-spacer-right" qualifier={component.qualifier} /> + )} + {limited ? collapsePath(name, 15) : name} + </> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx new file mode 100644 index 00000000000..eb2140ed5ef --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceComponentViewer.tsx @@ -0,0 +1,102 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { ComponentDescriptor } from './context'; +import WorkspaceHeader, { Props as WorkspaceHeaderProps } from './WorkspaceHeader'; +import WorkspaceComponentTitle from './WorkspaceComponentTitle'; +import SourceViewer from '../SourceViewer/SourceViewer'; +import { SourceViewerFile, Omit } from '../../app/types'; +import { scrollToElement } from '../../helpers/scrolling'; + +export interface Props extends Omit<WorkspaceHeaderProps, 'children' | 'onClose'> { + component: ComponentDescriptor; + height: number; + onClose: (componentKey: string) => void; + onLoad: (details: { key: string; name: string; qualifier: string }) => void; +} + +export default class WorkspaceComponentViewer extends React.PureComponent<Props> { + container?: HTMLElement | null; + + componentDidMount() { + document.documentElement.classList.add('with-workspace'); + } + + componentWillUnmount() { + document.documentElement.classList.remove('with-workspace'); + } + + handleClose = () => { + this.props.onClose(this.props.component.key); + }; + + handleLoaded = (component: SourceViewerFile) => { + this.props.onLoad({ + key: this.props.component.key, + name: component.path, + qualifier: component.q + }); + + if (this.container && this.props.component.line) { + const row = this.container.querySelector( + `.source-line[data-line-number="${this.props.component.line}"]` + ); + if (row) { + scrollToElement(row, { + smooth: false, + parent: this.container, + topOffset: 50, + bottomOffset: 50 + }); + } + } + }; + + render() { + const { component } = this.props; + + return ( + <div className="workspace-viewer"> + <WorkspaceHeader + maximized={this.props.maximized} + onClose={this.handleClose} + onCollapse={this.props.onCollapse} + onMaximize={this.props.onMaximize} + onMinimize={this.props.onMinimize} + onResize={this.props.onResize}> + <WorkspaceComponentTitle component={component} /> + </WorkspaceHeader> + + <div + className="workspace-viewer-container" + ref={node => (this.container = node)} + style={{ height: this.props.height }}> + <SourceViewer + aroundLine={component.line} + branchLike={component.branchLike} + component={component.key} + highlightedLine={component.line} + onLoaded={this.handleLoaded} + /> + </div> + </div> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx new file mode 100644 index 00000000000..011991dd54d --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx @@ -0,0 +1,102 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { DraggableCore, DraggableData } from 'react-draggable'; +import { translate } from '../../helpers/l10n'; +import { ButtonIcon } from '../ui/buttons'; +import ClearIcon from '../icons-components/ClearIcon'; +import CollapseIcon from '../icons-components/CollapseIcon'; +import ExpandIcon from '../icons-components/ExpandIcon'; +import MinimizeIcon from '../icons-components/MinimizeIcon'; +import { IconProps } from '../icons-components/types'; + +export interface Props { + children: React.ReactNode; + maximized?: boolean; + onClose: () => void; + onCollapse: () => void; + onMaximize: () => void; + onMinimize: () => void; + onResize: (deltaY: number) => void; +} + +export default class WorkspaceHeader extends React.PureComponent<Props> { + handleDrag = (_event: MouseEvent, data: DraggableData) => { + this.props.onResize(data.deltaY); + }; + + render() { + return ( + <header className="workspace-viewer-header"> + <h6 className="workspace-viewer-name">{this.props.children}</h6> + + <DraggableCore offsetParent={document.body} onDrag={this.handleDrag}> + <div className="workspace-viewer-resize js-resize" /> + </DraggableCore> + + <div className="workspace-viewer-actions"> + <WorkspaceHeaderButton + icon={MinimizeIcon} + onClick={this.props.onCollapse} + tooltip="workspace.minimize" + /> + + {this.props.maximized ? ( + <WorkspaceHeaderButton + icon={CollapseIcon} + onClick={this.props.onMinimize} + tooltip="workspace.normal_size" + /> + ) : ( + <WorkspaceHeaderButton + icon={ExpandIcon} + onClick={this.props.onMaximize} + tooltip="workspace.full_window" + /> + )} + + <WorkspaceHeaderButton + icon={ClearIcon} + onClick={this.props.onClose} + tooltip="workspace.close" + /> + </div> + </header> + ); + } +} + +interface WorkspaceHeaderButtonProps { + icon: React.SFC<IconProps>; + onClick: () => void; + tooltip: string; +} + +function WorkspaceHeaderButton({ icon: Icon, onClick, tooltip }: WorkspaceHeaderButtonProps) { + return ( + <ButtonIcon + className="workspace-header-icon" + color="#fff" + onClick={onClick} + tooltip={translate(tooltip)}> + <Icon fill={undefined} /> + </ButtonIcon> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx new file mode 100644 index 00000000000..52471f7fb63 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNav.tsx @@ -0,0 +1,63 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { ComponentDescriptor, RuleDescriptor } from './context'; +import WorkspaceNavComponent from './WorkspaceNavComponent'; +import WorkspaceNavRule from './WorkspaceNavRule'; + +export interface Props { + components: ComponentDescriptor[]; + rules: RuleDescriptor[]; + onComponentClose: (componentKey: string) => void; + onComponentOpen: (componentKey: string) => void; + onRuleClose: (ruleKey: string) => void; + onRuleOpen: (ruleKey: string) => void; + open: { component?: string; rule?: string }; +} + +export default function WorkspaceNav(props: Props) { + // do not show a tab for the currently open component/rule + const components = props.components.filter(x => x.key !== props.open.component); + const rules = props.rules.filter(x => x.key !== props.open.rule); + + return ( + <nav className="workspace-nav"> + <ul className="workspace-nav-list"> + {components.map(component => ( + <WorkspaceNavComponent + component={component} + key={`component-${component.key}`} + onClose={props.onComponentClose} + onOpen={props.onComponentOpen} + /> + ))} + + {rules.map(rule => ( + <WorkspaceNavRule + key={`rule-${rule.key}`} + onClose={props.onRuleClose} + onOpen={props.onRuleOpen} + rule={rule} + /> + ))} + </ul> + </nav> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/views/base-viewer-view.js b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavComponent.tsx index f5883d57378..15a5c114b35 100644 --- a/server/sonar-web/src/main/js/components/workspace/views/base-viewer-view.js +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavComponent.tsx @@ -17,38 +17,31 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Marionette from 'backbone.marionette'; -import HeaderView from './viewer-header-view'; +import * as React from 'react'; +import { ComponentDescriptor } from './context'; +import WorkspaceComponentTitle from './WorkspaceComponentTitle'; +import WorkspaceNavItem from './WorkspaceNavItem'; -export default Marionette.LayoutView.extend({ - className: 'workspace-viewer', +export interface Props { + component: ComponentDescriptor; + onClose: (componentKey: string) => void; + onOpen: (componentKey: string) => void; +} - modelEvents: { - destroy: 'destroy' - }, +export default class WorkspaceNavComponent extends React.PureComponent<Props> { + handleClose = () => { + this.props.onClose(this.props.component.key); + }; - regions: { - headerRegion: '.workspace-viewer-header', - viewerRegion: '.workspace-viewer-container' - }, + handleOpen = () => { + this.props.onOpen(this.props.component.key); + }; - onRender() { - this.showHeader(); - this.$('.workspace-viewer-container').isolatedScroll(); - }, - - onViewerMinimize() { - this.trigger('viewerMinimize'); - }, - - onViewerClose() { - this.trigger('viewerClose', this.model); - }, - - showHeader() { - const headerView = new HeaderView({ model: this.model }); - this.listenTo(headerView, 'viewerMinimize', this.onViewerMinimize); - this.listenTo(headerView, 'viewerClose', this.onViewerClose); - this.headerRegion.show(headerView); + render() { + return ( + <WorkspaceNavItem onClose={this.handleClose} onOpen={this.handleOpen}> + <WorkspaceComponentTitle component={this.props.component} limited={true} /> + </WorkspaceNavItem> + ); } -}); +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx new file mode 100644 index 00000000000..6f29f4caef4 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx @@ -0,0 +1,52 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import ClearIcon from '../icons-components/ClearIcon'; +import { ButtonIcon } from '../ui/buttons'; + +export interface Props { + children: React.ReactNode; + onClose: () => void; + onOpen: () => void; +} + +export default class WorkspaceNavItem extends React.PureComponent<Props> { + handleNameClick = (event: React.MouseEvent<HTMLAnchorElement>) => { + event.preventDefault(); + event.currentTarget.blur(); + this.props.onOpen(); + }; + + render() { + return ( + <li className="workspace-nav-item"> + <a className="workspace-nav-item-link" href="#" onClick={this.handleNameClick}> + {this.props.children} + </a> + <ButtonIcon + className="js-close workspace-nav-item-close workspace-header-icon button-small little-spacer-left" + color="#fff" + onClick={this.props.onClose}> + <ClearIcon fill={undefined} size={12} /> + </ButtonIcon> + </li> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavRule.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavRule.tsx new file mode 100644 index 00000000000..1dea8715464 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavRule.tsx @@ -0,0 +1,47 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { RuleDescriptor } from './context'; +import WorkspaceNavItem from './WorkspaceNavItem'; +import WorkspaceRuleTitle from './WorkspaceRuleTitle'; + +export interface Props { + rule: RuleDescriptor; + onClose: (ruleKey: string) => void; + onOpen: (ruleKey: string) => void; +} + +export default class WorkspaceNavRule extends React.PureComponent<Props> { + handleClose = () => { + this.props.onClose(this.props.rule.key); + }; + + handleOpen = () => { + this.props.onOpen(this.props.rule.key); + }; + + render() { + return ( + <WorkspaceNavItem onClose={this.handleClose} onOpen={this.handleOpen}> + <WorkspaceRuleTitle limited={true} rule={this.props.rule} /> + </WorkspaceNavItem> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/models/item.js b/server/sonar-web/src/main/js/components/workspace/WorkspacePortal.tsx index 08ad8fe02a1..63af9fe6be6 100644 --- a/server/sonar-web/src/main/js/components/workspace/models/item.js +++ b/server/sonar-web/src/main/js/components/workspace/WorkspacePortal.tsx @@ -17,31 +17,27 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Backbone from 'backbone'; +import * as React from 'react'; +import { createPortal } from 'react-dom'; -export default Backbone.Model.extend({ - validate() { - if (!this.has('__type__')) { - return 'type is missing'; - } - if (this.get('__type__') === 'component' && !this.has('key')) { - return 'key is missing'; - } - if (this.get('__type__') === 'rule' && !this.has('key')) { - return 'key is missing'; - } - }, +export default class WorkspacePortal extends React.PureComponent { + el: HTMLElement; - isComponent() { - return this.get('__type__') === 'component'; - }, + constructor(props: {}) { + super(props); + this.el = document.createElement('div'); + this.el.classList.add('workspace'); + } + + componentDidMount() { + document.body.appendChild(this.el); + } - isRule() { - return this.get('__type__') === 'rule'; - }, + componentWillUnmount() { + document.body.removeChild(this.el); + } - destroy(options) { - this.stopListening(); - this.trigger('destroy', this, this.collection, options); + render() { + return createPortal(this.props.children, this.el); } -}); +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx new file mode 100644 index 00000000000..e154a145773 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleDetails.tsx @@ -0,0 +1,114 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { keyBy } from 'lodash'; +import { getRuleDetails, getRulesApp } from '../../api/rules'; +import { RuleDetails } from '../../app/types'; +import DeferredSpinner from '../common/DeferredSpinner'; +import RuleDetailsMeta from '../../apps/coding-rules/components/RuleDetailsMeta'; +import RuleDetailsDescription from '../../apps/coding-rules/components/RuleDetailsDescription'; +import '../../apps/coding-rules/styles.css'; + +interface Props { + onLoad: (details: { name: string }) => void; + organization: string | undefined; + ruleKey: string; +} + +interface State { + loading: boolean; + referencedRepositories: { [repository: string]: { key: string; language: string; name: string } }; + ruleDetails?: RuleDetails; +} + +export default class WorkspaceRuleDetails extends React.PureComponent<Props, State> { + mounted = false; + state: State = { loading: true, referencedRepositories: {} }; + + componentDidMount() { + this.mounted = true; + this.fetchRuleDetails(); + } + + componentDidUpdate(prevProps: Props) { + if ( + prevProps.ruleKey !== this.props.ruleKey || + prevProps.organization !== this.props.organization + ) { + this.fetchRuleDetails(); + } + } + + componentWillUnmount() { + this.mounted = false; + } + + fetchRuleDetails = () => { + this.setState({ loading: true }); + Promise.all([ + getRulesApp({ organization: this.props.organization }), + getRuleDetails({ key: this.props.ruleKey, organization: this.props.organization }) + ]).then( + ([{ repositories }, { rule }]) => { + if (this.mounted) { + this.setState({ + loading: false, + referencedRepositories: keyBy(repositories, 'key'), + ruleDetails: rule + }); + this.props.onLoad({ name: rule.name }); + } + }, + () => { + if (this.mounted) { + this.setState({ loading: false }); + } + } + ); + }; + + noOp = () => {}; + + render() { + return ( + <DeferredSpinner loading={this.state.loading}> + {this.state.ruleDetails && ( + <> + <RuleDetailsMeta + canWrite={false} + hideSimilarRulesFilter={true} + onFilterChange={this.noOp} + onTagsChange={this.noOp} + organization={this.props.organization} + referencedRepositories={this.state.referencedRepositories} + ruleDetails={this.state.ruleDetails} + /> + <RuleDetailsDescription + canWrite={false} + onChange={this.noOp} + organization={this.props.organization} + ruleDetails={this.state.ruleDetails} + /> + </> + )} + </DeferredSpinner> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleTitle.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleTitle.tsx new file mode 100644 index 00000000000..ac7387ce23b --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleTitle.tsx @@ -0,0 +1,36 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { RuleDescriptor } from './context'; + +interface Props { + limited?: boolean; + rule: RuleDescriptor; +} + +export default function WorkspaceRuleTitle({ limited, rule }: Props) { + const { name = '—' } = rule; + return ( + <> + <i className="icon-workspace-doc little-spacer-right" /> + {limited ? <span className="text-limited">{name}</span> : name} + </> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx new file mode 100644 index 00000000000..513f2ca8311 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceRuleViewer.tsx @@ -0,0 +1,68 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { RuleDescriptor } from './context'; +import WorkspaceHeader, { Props as WorkspaceHeaderProps } from './WorkspaceHeader'; +import WorkspaceRuleDetails from './WorkspaceRuleDetails'; +import WorkspaceRuleTitle from './WorkspaceRuleTitle'; +import { Omit } from '../../app/types'; + +export interface Props extends Omit<WorkspaceHeaderProps, 'children' | 'onClose'> { + rule: RuleDescriptor; + height: number; + onClose: (componentKey: string) => void; + onLoad: (details: { key: string; name: string }) => void; +} + +export default class WorkspaceRuleViewer extends React.PureComponent<Props> { + handleClose = () => { + this.props.onClose(this.props.rule.key); + }; + + handleLoaded = (rule: { name: string }) => { + this.props.onLoad({ key: this.props.rule.key, name: rule.name }); + }; + + render() { + const { rule } = this.props; + + return ( + <div className="workspace-viewer"> + <WorkspaceHeader + maximized={this.props.maximized} + onClose={this.handleClose} + onCollapse={this.props.onCollapse} + onMaximize={this.props.onMaximize} + onMinimize={this.props.onMinimize} + onResize={this.props.onResize}> + <WorkspaceRuleTitle rule={rule} /> + </WorkspaceHeader> + + <div className="workspace-viewer-container" style={{ height: this.props.height }}> + <WorkspaceRuleDetails + onLoad={this.handleLoaded} + organization={rule.organization} + ruleKey={rule.key} + /> + </div> + </div> + ); + } +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentTitle-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentTitle-test.tsx new file mode 100644 index 00000000000..2db40894949 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentTitle-test.tsx @@ -0,0 +1,32 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceComponentTitle from '../WorkspaceComponentTitle'; + +it('should render component', () => { + const component = { branchLike: undefined, key: 'foo' }; + expect(shallow(<WorkspaceComponentTitle component={component} />)).toMatchSnapshot(); +}); + +it('should render loaded component', () => { + const component = { branchLike: undefined, key: 'foo', name: 'src/foo.js', qualifier: 'FIL' }; + expect(shallow(<WorkspaceComponentTitle component={component} />)).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx new file mode 100644 index 00000000000..b3cab1c4b41 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceComponentViewer-test.tsx @@ -0,0 +1,61 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceComponentViewer, { Props } from '../WorkspaceComponentViewer'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should close', () => { + const onClose = jest.fn(); + const wrapper = shallowRender({ onClose }); + wrapper.find('WorkspaceHeader').prop<Function>('onClose')(); + expect(onClose).toBeCalledWith('foo'); +}); + +it('should call back after load', () => { + const onLoad = jest.fn(); + const wrapper = shallowRender({ onLoad }); + wrapper.find('[onLoaded]').prop<Function>('onLoaded')({ + key: 'foo', + path: 'src/foo.js', + q: 'FIL' + }); + expect(onLoad).toBeCalledWith({ key: 'foo', name: 'src/foo.js', qualifier: 'FIL' }); +}); + +function shallowRender(props?: Partial<Props>) { + const component = { branchLike: undefined, key: 'foo' }; + return shallow( + <WorkspaceComponentViewer + component={component} + height={300} + onClose={jest.fn()} + onCollapse={jest.fn()} + onLoad={jest.fn()} + onMaximize={jest.fn()} + onMinimize={jest.fn()} + onResize={jest.fn()} + {...props} + /> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx new file mode 100644 index 00000000000..a8be1a80c29 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceHeader-test.tsx @@ -0,0 +1,47 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceHeader, { Props } from '../WorkspaceHeader'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should resize', () => { + const onResize = jest.fn(); + const wrapper = shallowRender({ onResize }); + wrapper.find('DraggableCore').prop<Function>('onDrag')({}, { deltaY: 15 }); + expect(onResize).toBeCalledWith(15); +}); + +function shallowRender(props?: Partial<Props>) { + return shallow( + <WorkspaceHeader + onClose={jest.fn()} + onCollapse={jest.fn()} + onMaximize={jest.fn()} + onMinimize={jest.fn()} + onResize={jest.fn()} + {...props}> + <div id="workspace-header-children" /> + </WorkspaceHeader> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx new file mode 100644 index 00000000000..487e94a9b8c --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNav-test.tsx @@ -0,0 +1,51 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceNav, { Props } from '../WorkspaceNav'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should not render open component', () => { + expect(shallowRender({ open: { component: 'bar' } })).toMatchSnapshot(); +}); + +it('should not render open rule', () => { + expect(shallowRender({ open: { rule: 'qux' } })).toMatchSnapshot(); +}); + +function shallowRender(props?: Partial<Props>) { + const components = [{ branchLike: undefined, key: 'foo' }, { branchLike: undefined, key: 'bar' }]; + const rules = [{ key: 'qux', organization: 'org' }]; + return shallow( + <WorkspaceNav + components={components} + onComponentClose={jest.fn()} + onComponentOpen={jest.fn()} + onRuleClose={jest.fn()} + onRuleOpen={jest.fn()} + open={{}} + rules={rules} + {...props} + /> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavComponent-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavComponent-test.tsx new file mode 100644 index 00000000000..e14ddd018c1 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavComponent-test.tsx @@ -0,0 +1,52 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceNavComponent, { Props } from '../WorkspaceNavComponent'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should close', () => { + const onClose = jest.fn(); + const wrapper = shallowRender({ onClose }); + wrapper.find('WorkspaceNavItem').prop<Function>('onClose')(); + expect(onClose).toBeCalledWith('foo'); +}); + +it('should open', () => { + const onOpen = jest.fn(); + const wrapper = shallowRender({ onOpen }); + wrapper.find('WorkspaceNavItem').prop<Function>('onOpen')(); + expect(onOpen).toBeCalledWith('foo'); +}); + +function shallowRender(props?: Partial<Props>) { + const component = { branchLike: undefined, key: 'foo' }; + return shallow( + <WorkspaceNavComponent + component={component} + onClose={jest.fn()} + onOpen={jest.fn()} + {...props} + /> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavItem-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavItem-test.tsx new file mode 100644 index 00000000000..3f81b901171 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavItem-test.tsx @@ -0,0 +1,49 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceNavItem, { Props } from '../WorkspaceNavItem'; +import { click } from '../../../helpers/testUtils'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should close', () => { + const onClose = jest.fn(); + const wrapper = shallowRender({ onClose }); + click(wrapper.find('ButtonIcon')); + expect(onClose).toBeCalled(); +}); + +it('should open', () => { + const onOpen = jest.fn(); + const wrapper = shallowRender({ onOpen }); + click(wrapper.find('.workspace-nav-item-link')); + expect(onOpen).toBeCalled(); +}); + +function shallowRender(props?: Partial<Props>) { + return shallow( + <WorkspaceNavItem onClose={jest.fn()} onOpen={jest.fn()} {...props}> + <div id="workspace-nav-item" /> + </WorkspaceNavItem> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavRule-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavRule-test.tsx new file mode 100644 index 00000000000..15be6798e8b --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceNavRule-test.tsx @@ -0,0 +1,47 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceNavRule, { Props } from '../WorkspaceNavRule'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should close', () => { + const onClose = jest.fn(); + const wrapper = shallowRender({ onClose }); + wrapper.find('WorkspaceNavItem').prop<Function>('onClose')(); + expect(onClose).toBeCalledWith('foo'); +}); + +it('should open', () => { + const onOpen = jest.fn(); + const wrapper = shallowRender({ onOpen }); + wrapper.find('WorkspaceNavItem').prop<Function>('onOpen')(); + expect(onOpen).toBeCalledWith('foo'); +}); + +function shallowRender(props?: Partial<Props>) { + const rule = { key: 'foo', organization: 'org' }; + return shallow( + <WorkspaceNavRule onClose={jest.fn()} onOpen={jest.fn()} rule={rule} {...props} /> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/views/items-view.js b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspacePortal-test.tsx index 06f3f9353bb..35b0909a04b 100644 --- a/server/sonar-web/src/main/js/components/workspace/views/items-view.js +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspacePortal-test.tsx @@ -17,17 +17,13 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Marionette from 'backbone.marionette'; -import ItemView from './item-view'; -import Template from '../templates/workspace-items.hbs'; +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspacePortal from '../WorkspacePortal'; -export default Marionette.CompositeView.extend({ - className: 'workspace-nav', - template: Template, - childViewContainer: '.workspace-nav-list', - childView: ItemView, - - childViewOptions() { - return { collectionView: this }; - } +it('should create portal element', () => { + const wrapper = shallow(<WorkspacePortal />); + const { el } = wrapper.instance() as WorkspacePortal; + expect(el.tagName.toLowerCase()).toBe('div'); + expect(el.className).toBe('workspace'); }); diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx new file mode 100644 index 00000000000..e1b5f68840f --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleDetails-test.tsx @@ -0,0 +1,49 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceRuleDetails from '../WorkspaceRuleDetails'; +import { waitAndUpdate } from '../../../helpers/testUtils'; + +jest.mock('../../../api/rules', () => ({ + getRulesApp: jest.fn(() => + Promise.resolve({ repositories: [{ key: 'repo', language: 'xoo', name: 'Xoo Repository' }] }) + ), + getRuleDetails: jest.fn(() => Promise.resolve({ rule: { key: 'foo', name: 'Foo' } })) +})); + +it('should render', async () => { + const wrapper = shallow( + <WorkspaceRuleDetails onLoad={jest.fn()} organization="org" ruleKey="foo" /> + ); + expect(wrapper).toMatchSnapshot(); + + await waitAndUpdate(wrapper); + expect(wrapper).toMatchSnapshot(); +}); + +it('should call back on load', async () => { + const onLoad = jest.fn(); + const wrapper = shallow( + <WorkspaceRuleDetails onLoad={onLoad} organization="org" ruleKey="foo" /> + ); + await waitAndUpdate(wrapper); + expect(onLoad).toBeCalledWith({ name: 'Foo' }); +}); diff --git a/server/sonar-web/src/main/js/components/workspace/views/item-view.js b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleTitle-test.tsx index b007f55b7b9..b12796f1129 100644 --- a/server/sonar-web/src/main/js/components/workspace/views/item-view.js +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleTitle-test.tsx @@ -17,41 +17,16 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import Marionette from 'backbone.marionette'; -import Template from '../templates/workspace-item.hbs'; +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceRuleTitle from '../WorkspaceRuleTitle'; -export default Marionette.ItemView.extend({ - tagName: 'li', - className: 'workspace-nav-item', - template: Template, - - modelEvents: { - change: 'render', - showViewer: 'onViewerShow', - hideViewer: 'onViewerHide' - }, - - events: { - click: 'onClick', - 'click .js-close': 'onCloseClick' - }, - - onClick(e) { - e.preventDefault(); - this.options.collectionView.trigger('click', this.model); - }, - - onCloseClick(e) { - e.preventDefault(); - e.stopPropagation(); - this.model.destroy(); - }, - - onViewerShow() { - this.$el.addClass('hidden'); - }, +it('should render rule', () => { + const rule = { key: 'foo', organization: 'org' }; + expect(shallow(<WorkspaceRuleTitle rule={rule} />)).toMatchSnapshot(); +}); - onViewerHide() { - this.$el.removeClass('hidden'); - } +it('should render loaded rule', () => { + const rule = { key: 'foo', name: 'Foo', organization: 'org' }; + expect(shallow(<WorkspaceRuleTitle rule={rule} />)).toMatchSnapshot(); }); diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx new file mode 100644 index 00000000000..978b87768e4 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/WorkspaceRuleViewer-test.tsx @@ -0,0 +1,57 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import WorkspaceRuleViewer, { Props } from '../WorkspaceRuleViewer'; + +it('should render', () => { + expect(shallowRender()).toMatchSnapshot(); +}); + +it('should close', () => { + const onClose = jest.fn(); + const wrapper = shallowRender({ onClose }); + wrapper.find('WorkspaceHeader').prop<Function>('onClose')(); + expect(onClose).toBeCalledWith('foo'); +}); + +it('should call back after load', () => { + const onLoad = jest.fn(); + const wrapper = shallowRender({ onLoad }); + wrapper.find('WorkspaceRuleDetails').prop<Function>('onLoad')({ name: 'Foo' }); + expect(onLoad).toBeCalledWith({ key: 'foo', name: 'Foo' }); +}); + +function shallowRender(props?: Partial<Props>) { + const rule = { key: 'foo', organization: 'org' }; + return shallow( + <WorkspaceRuleViewer + height={300} + onClose={jest.fn()} + onCollapse={jest.fn()} + onLoad={jest.fn()} + onMaximize={jest.fn()} + onMinimize={jest.fn()} + onResize={jest.fn()} + rule={rule} + {...props} + /> + ); +} diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentTitle-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentTitle-test.tsx.snap new file mode 100644 index 00000000000..ed1cae463d9 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentTitle-test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render component 1`] = ` +<React.Fragment> + — +</React.Fragment> +`; + +exports[`should render loaded component 1`] = ` +<React.Fragment> + <QualifierIcon + className="little-spacer-right" + qualifier="FIL" + /> + src/foo.js +</React.Fragment> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentViewer-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentViewer-test.tsx.snap new file mode 100644 index 00000000000..221000a98f5 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceComponentViewer-test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<div + className="workspace-viewer" +> + <WorkspaceHeader + onClose={[Function]} + onCollapse={[MockFunction]} + onMaximize={[MockFunction]} + onMinimize={[MockFunction]} + onResize={[MockFunction]} + > + <WorkspaceComponentTitle + component={ + Object { + "branchLike": undefined, + "key": "foo", + } + } + /> + </WorkspaceHeader> + <div + className="workspace-viewer-container" + style={ + Object { + "height": 300, + } + } + > + <Connect(SourceViewerBase) + component="foo" + onLoaded={[Function]} + /> + </div> +</div> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceHeader-test.tsx.snap new file mode 100644 index 00000000000..11212c4c2e5 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceHeader-test.tsx.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<header + className="workspace-viewer-header" +> + <h6 + className="workspace-viewer-name" + > + <div + id="workspace-header-children" + /> + </h6> + <DraggableCore + allowAnyClick={false} + cancel={null} + disabled={false} + enableUserSelectHack={true} + grid={null} + handle={null} + offsetParent={<body />} + onDrag={[Function]} + onMouseDown={[Function]} + onStart={[Function]} + onStop={[Function]} + transform={null} + > + <div + className="workspace-viewer-resize js-resize" + /> + </DraggableCore> + <div + className="workspace-viewer-actions" + > + <WorkspaceHeaderButton + icon={[Function]} + onClick={[MockFunction]} + tooltip="workspace.minimize" + /> + <WorkspaceHeaderButton + icon={[Function]} + onClick={[MockFunction]} + tooltip="workspace.full_window" + /> + <WorkspaceHeaderButton + icon={[Function]} + onClick={[MockFunction]} + tooltip="workspace.close" + /> + </div> +</header> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNav-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNav-test.tsx.snap new file mode 100644 index 00000000000..28dfed90df5 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNav-test.tsx.snap @@ -0,0 +1,111 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should not render open component 1`] = ` +<nav + className="workspace-nav" +> + <ul + className="workspace-nav-list" + > + <WorkspaceNavComponent + component={ + Object { + "branchLike": undefined, + "key": "foo", + } + } + key="component-foo" + onClose={[MockFunction]} + onOpen={[MockFunction]} + /> + <WorkspaceNavRule + key="rule-qux" + onClose={[MockFunction]} + onOpen={[MockFunction]} + rule={ + Object { + "key": "qux", + "organization": "org", + } + } + /> + </ul> +</nav> +`; + +exports[`should not render open rule 1`] = ` +<nav + className="workspace-nav" +> + <ul + className="workspace-nav-list" + > + <WorkspaceNavComponent + component={ + Object { + "branchLike": undefined, + "key": "foo", + } + } + key="component-foo" + onClose={[MockFunction]} + onOpen={[MockFunction]} + /> + <WorkspaceNavComponent + component={ + Object { + "branchLike": undefined, + "key": "bar", + } + } + key="component-bar" + onClose={[MockFunction]} + onOpen={[MockFunction]} + /> + </ul> +</nav> +`; + +exports[`should render 1`] = ` +<nav + className="workspace-nav" +> + <ul + className="workspace-nav-list" + > + <WorkspaceNavComponent + component={ + Object { + "branchLike": undefined, + "key": "foo", + } + } + key="component-foo" + onClose={[MockFunction]} + onOpen={[MockFunction]} + /> + <WorkspaceNavComponent + component={ + Object { + "branchLike": undefined, + "key": "bar", + } + } + key="component-bar" + onClose={[MockFunction]} + onOpen={[MockFunction]} + /> + <WorkspaceNavRule + key="rule-qux" + onClose={[MockFunction]} + onOpen={[MockFunction]} + rule={ + Object { + "key": "qux", + "organization": "org", + } + } + /> + </ul> +</nav> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavComponent-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavComponent-test.tsx.snap new file mode 100644 index 00000000000..0f6abcbcdb4 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavComponent-test.tsx.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<WorkspaceNavItem + onClose={[Function]} + onOpen={[Function]} +> + <WorkspaceComponentTitle + component={ + Object { + "branchLike": undefined, + "key": "foo", + } + } + limited={true} + /> +</WorkspaceNavItem> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavItem-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavItem-test.tsx.snap new file mode 100644 index 00000000000..3834b942dba --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavItem-test.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<li + className="workspace-nav-item" +> + <a + className="workspace-nav-item-link" + href="#" + onClick={[Function]} + > + <div + id="workspace-nav-item" + /> + </a> + <ButtonIcon + className="js-close workspace-nav-item-close workspace-header-icon button-small little-spacer-left" + color="#fff" + onClick={[MockFunction]} + > + <ClearIcon + size={12} + /> + </ButtonIcon> +</li> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavRule-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavRule-test.tsx.snap new file mode 100644 index 00000000000..2855436401d --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceNavRule-test.tsx.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<WorkspaceNavItem + onClose={[Function]} + onOpen={[Function]} +> + <WorkspaceRuleTitle + limited={true} + rule={ + Object { + "key": "foo", + "organization": "org", + } + } + /> +</WorkspaceNavItem> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleDetails-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleDetails-test.tsx.snap new file mode 100644 index 00000000000..682c1d5ac77 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleDetails-test.tsx.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<DeferredSpinner + loading={true} + timeout={100} +/> +`; + +exports[`should render 2`] = ` +<DeferredSpinner + loading={false} + timeout={100} +> + <React.Fragment> + <RuleDetailsMeta + canWrite={false} + hideSimilarRulesFilter={true} + onFilterChange={[Function]} + onTagsChange={[Function]} + organization="org" + referencedRepositories={ + Object { + "repo": Object { + "key": "repo", + "language": "xoo", + "name": "Xoo Repository", + }, + } + } + ruleDetails={ + Object { + "key": "foo", + "name": "Foo", + } + } + /> + <RuleDetailsDescription + canWrite={false} + onChange={[Function]} + organization="org" + ruleDetails={ + Object { + "key": "foo", + "name": "Foo", + } + } + /> + </React.Fragment> +</DeferredSpinner> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleTitle-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleTitle-test.tsx.snap new file mode 100644 index 00000000000..5ba5fc924a9 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleTitle-test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render loaded rule 1`] = ` +<React.Fragment> + <i + className="icon-workspace-doc little-spacer-right" + /> + Foo +</React.Fragment> +`; + +exports[`should render rule 1`] = ` +<React.Fragment> + <i + className="icon-workspace-doc little-spacer-right" + /> + — +</React.Fragment> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleViewer-test.tsx.snap b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleViewer-test.tsx.snap new file mode 100644 index 00000000000..f8bc63a9a99 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/__tests__/__snapshots__/WorkspaceRuleViewer-test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` +<div + className="workspace-viewer" +> + <WorkspaceHeader + onClose={[Function]} + onCollapse={[MockFunction]} + onMaximize={[MockFunction]} + onMinimize={[MockFunction]} + onResize={[MockFunction]} + > + <WorkspaceRuleTitle + rule={ + Object { + "key": "foo", + "organization": "org", + } + } + /> + </WorkspaceHeader> + <div + className="workspace-viewer-container" + style={ + Object { + "height": 300, + } + } + > + <WorkspaceRuleDetails + onLoad={[Function]} + organization="org" + ruleKey="foo" + /> + </div> +</div> +`; diff --git a/server/sonar-web/src/main/js/components/workspace/context.ts b/server/sonar-web/src/main/js/components/workspace/context.ts new file mode 100644 index 00000000000..07dde023200 --- /dev/null +++ b/server/sonar-web/src/main/js/components/workspace/context.ts @@ -0,0 +1,39 @@ +/* +* SonarQube +* Copyright (C) 2009-2018 SonarSource SA +* mailto:info AT sonarsource DOT com +* +* This program is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License as published by the Free Software Foundation; either +* version 3 of the License, or (at your option) any later version. +* +* This program is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public License +* along with this program; if not, write to the Free Software Foundation, +* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +*/ +import { BranchLike } from '../../app/types'; + +export interface ComponentDescriptor { + branchLike: BranchLike | undefined; + key: string; + line?: number; + name?: string; + qualifier?: string; +} + +export interface RuleDescriptor { + key: string; + name?: string; + organization: string; +} + +export interface WorkspaceContext { + openComponent: (component: ComponentDescriptor) => void; + openRule: (rule: RuleDescriptor) => void; +} diff --git a/server/sonar-web/src/main/js/components/workspace/main.js b/server/sonar-web/src/main/js/components/workspace/main.js deleted file mode 100644 index b2fd7941ecf..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/main.js +++ /dev/null @@ -1,143 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -// @flow -import $ from 'jquery'; -import Item from './models/item'; -import Items from './models/items'; -import ItemsView from './views/items-view'; -import ViewerView from './views/viewer-view'; -import RuleView from './views/rule-view'; -import { getRuleDetails } from '../../api/rules'; -import './styles.css'; -import '../../apps/coding-rules/styles.css'; - -let instance = null; -const Workspace = function() { - if (instance != null) { - throw new Error('Cannot instantiate more than one Workspace, use Workspace.getInstance()'); - } - this.initialize(); -}; - -Workspace.prototype = { - initialize() { - const that = this; - - this.items = new Items(); - this.items.load(); - this.items.on('change', () => { - that.save(); - }); - - this.itemsView = new ItemsView({ collection: this.items }); - this.itemsView.render().$el.appendTo(document.body); - this.itemsView.on('click', model => { - that.open(model); - }); - }, - - save() { - this.items.save(); - }, - - addComponent(model) { - const m = this.items.add2(model); - this.save(); - return m; - }, - - open(options) { - const model = typeof options.toJSON === 'function' ? options : new Item(options); - if (!model.isValid()) { - throw new Error(model.validationError); - } - const m = this.addComponent(model); - if (m.isComponent()) { - this.showComponentViewer(m); - } - if (m.isRule()) { - this.showRule(m); - } - }, - - openComponent(options) { - return this.open({ ...options, __type__: 'component' }); - }, - - openRule(options /*: { key: string, organization: string } */) { - return this.open({ ...options, __type__: 'rule' }); - }, - - showViewer(Viewer, model) { - const that = this; - if (this.viewerView != null) { - this.viewerView.model.trigger('hideViewer'); - this.viewerView.destroy(); - } - $('html').addClass('with-workspace'); - model.trigger('showViewer'); - this.viewerView = new Viewer({ model }); - this.viewerView - .on('viewerMinimize', () => { - model.trigger('hideViewer'); - that.closeComponentViewer(); - }) - .on('viewerClose', m => { - that.closeComponentViewer(); - m.destroy(); - }); - this.viewerView.$el.appendTo(document.body); - this.viewerView.render(); - }, - - showComponentViewer(model) { - this.showViewer(ViewerView, model); - }, - - closeComponentViewer() { - if (this.viewerView != null) { - this.viewerView.destroy(); - $('.with-workspace').removeClass('with-workspace'); - } - }, - - showRule(model) { - const that = this; - getRuleDetails({ key: model.get('key') }).then( - r => { - model.set({ ...r.rule, exist: true }); - that.showViewer(RuleView, model); - }, - () => { - model.set({ exist: false }); - that.showViewer(RuleView, model); - } - ); - } -}; - -Workspace.getInstance = function() { - if (instance == null) { - instance = new Workspace(); - } - return instance; -}; - -export default Workspace.getInstance(); diff --git a/server/sonar-web/src/main/js/components/workspace/models/items.js b/server/sonar-web/src/main/js/components/workspace/models/items.js deleted file mode 100644 index c191ca98a90..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/models/items.js +++ /dev/null @@ -1,59 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import Backbone from 'backbone'; -import Item from './item'; - -const STORAGE_KEY = 'sonarqube-workspace'; - -export default Backbone.Collection.extend({ - model: Item, - - initialize() { - this.on('remove', this.save); - }, - - save() { - const dump = JSON.stringify(this.toJSON()); - window.localStorage.setItem(STORAGE_KEY, dump); - }, - - load() { - const dump = window.localStorage.getItem(STORAGE_KEY); - if (dump != null) { - try { - const parsed = JSON.parse(dump); - this.reset(parsed); - } catch (err) { - // fail silently - } - } - }, - - has(model) { - const forComponent = model.isComponent() && this.findWhere({ key: model.get('key') }) != null; - const forRule = model.isRule() && this.findWhere({ key: model.get('key') }) != null; - return forComponent || forRule; - }, - - add2(model) { - const tryModel = this.findWhere({ key: model.get('key') }); - return tryModel != null ? tryModel : this.add(model); - } -}); diff --git a/server/sonar-web/src/main/js/components/workspace/styles.css b/server/sonar-web/src/main/js/components/workspace/styles.css index 170a4e2c986..229b996cdea 100644 --- a/server/sonar-web/src/main/js/components/workspace/styles.css +++ b/server/sonar-web/src/main/js/components/workspace/styles.css @@ -22,7 +22,7 @@ z-index: 451; bottom: 0; right: 0; - height: 30px; + height: 28px; } .workspace-nav-list { @@ -30,21 +30,33 @@ } .workspace-nav-item { - float: left; - vertical-align: middle; - margin-right: 10px; - padding: 3px 10px; + position: relative; + display: inline-flex; + align-items: center; + margin-right: var(--gridSize); +} + +.workspace-nav-item-link { + display: inline-flex; + align-items: center; + height: 28px; + padding: 0 calc(3.5 * var(--gridSize)) 0 var(--gridSize); + border: none; background-color: var(--gray40); color: #fff; font-size: var(--smallFontSize); - font-weight: 300; - cursor: pointer; } -.workspace-nav-item > i { - position: relative; - top: -2px; - vertical-align: middle; +.workspace-nav-item-link:hover, +.workspace-nav-item-link:focus { + color: #fff; + opacity: 0.9; +} + +.workspace-nav-item-close { + position: absolute; + right: 4px; + top: 4px; } .workspace-viewer { @@ -72,7 +84,7 @@ float: left; line-height: var(--controlHeight); color: #fff; - font-weight: 300; + font-weight: 400; } .workspace-viewer-name i { @@ -92,13 +104,17 @@ .workspace-viewer-actions { float: right; - line-height: var(--controlHeight); } .workspace-viewer-actions a { color: inherit; } +.workspace-header-icon:hover path, +.workspace-header-icon:focus path { + color: var(--gray40); +} + .workspace-viewer-container { height: calc(40vh - 30px); min-height: 100px; diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-item.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-item.hbs deleted file mode 100644 index a98380cb682..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-item.hbs +++ /dev/null @@ -1,3 +0,0 @@ -{{#if q}}{{qualifierIcon q}} {{/if}}{{#eq type 'rule'}}<i class="icon-workspace-doc"></i> {{/eq}}{{limitString name}} - -<button class="js-close button-clean" style="color: #fff;">×</button> diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-items.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-items.hbs deleted file mode 100644 index 6fe99c04b19..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-items.hbs +++ /dev/null @@ -1 +0,0 @@ -<ul class="workspace-nav-list"></ul> diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs deleted file mode 100644 index 304daeaca48..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-rule.hbs +++ /dev/null @@ -1,76 +0,0 @@ -<div class="workspace-viewer-header"></div> - -<div class="workspace-viewer-container"> - - {{#if exist}} - - <ul class="coding-rules-detail-properties"> - {{#if severity}} - <li class="coding-rules-detail-property" - data-toggle="tooltip" data-placement="bottom" title="{{t 'coding_rules.type.tooltip' this.type}}"> - <span class="little-spacer-right">{{issueTypeIcon this.type}}</span>{{issueType this.type}} - </li> - - <li class="coding-rules-detail-property" - data-toggle="tooltip" data-placement="bottom" title="Default rule severity"> - {{severityIcon severity}} {{t "severity" severity}} - </li> - {{/if}} - - {{#notEq status 'READY'}} - <li class="coding-rules-detail-property" - data-toggle="tooltip" data-placement="bottom" title="Rule status">{{status}}</li> - {{/notEq}} - - <li class="coding-rules-detail-property coding-rules-detail-tag-list {{#if canWrite}}coding-rules-detail-tags-change{{/if}}" - data-toggle="tooltip" data-placement="bottom" title="Rule tags"> - <i class="icon-tags little-spacer-right"></i> - <span>{{#if allTags}}{{join allTags ', '}}{{else}}{{t 'coding_rules.no_tags'}}{{/if}}</span> - </li> - - <li class="coding-rules-detail-property">{{t 'coding_rules.available_since'}} {{d createdAt}}</li> - - {{#if debtRemFnType}} - <li class="coding-rules-detail-property" - data-toggle="tooltip" data-placement="bottom" title="{{t 'coding_rules.remediation_function'}}"> - {{t 'coding_rules.remediation_function' debtRemFnType}}: - - {{#if debtRemFnOffset}}{{debtRemFnOffset}}{{/if}} - {{#if debtRemFnCoeff}}{{#if debtRemFnOffset}}+{{/if}}{{debtRemFnCoeff}}{{/if}} - {{#if effortToFixDescription}}{{effortToFixDescription}}{{/if}} - </li> - {{/if}} - - <li class="coding-rules-detail-property spacer-left"> - <a class="link-no-underline" target="_blank" href="{{permalink}}"> - <svg - xmlns="http://www.w3.org/2000/svg" - height=14 - width=14 - viewBox="0 0 16 16"> - <path - fill="currentColor" - d="M13.501 11.429q0-0.357-0.25-0.607l-1.857-1.857q-0.25-0.25-0.607-0.25-0.375 0-0.643 0.286 0.027 0.027 0.17 0.165t0.192 0.192 0.134 0.17 0.116 0.228 0.031 0.246q0 0.357-0.25 0.607t-0.607 0.25q-0.134 0-0.246-0.031t-0.228-0.116-0.17-0.134-0.192-0.192-0.165-0.17q-0.295 0.277-0.295 0.652 0 0.357 0.25 0.607l1.839 1.848q0.241 0.241 0.607 0.241 0.357 0 0.607-0.232l1.313-1.304q0.25-0.25 0.25-0.598zM7.224 5.134q0-0.357-0.25-0.607l-1.839-1.848q-0.25-0.25-0.607-0.25-0.348 0-0.607 0.241l-1.313 1.304q-0.25 0.25-0.25 0.598 0 0.357 0.25 0.607l1.857 1.857q0.241 0.241 0.607 0.241 0.375 0 0.643-0.277-0.027-0.027-0.17-0.165t-0.192-0.192-0.134-0.17-0.116-0.228-0.031-0.246q0-0.357 0.25-0.607t0.607-0.25q0.134 0 0.246 0.031t0.228 0.116 0.17 0.134 0.192 0.192 0.165 0.17q0.295-0.277 0.295-0.652zM15.215 11.429q0 1.071-0.759 1.813l-1.313 1.304q-0.741 0.741-1.813 0.741-1.080 0-1.821-0.759l-1.839-1.848q-0.741-0.741-0.741-1.813 0-1.098 0.786-1.866l-0.786-0.786q-0.768 0.786-1.857 0.786-1.071 0-1.821-0.75l-1.857-1.857q-0.75-0.75-0.75-1.821t0.759-1.813l1.313-1.304q0.741-0.741 1.813-0.741 1.080 0 1.821 0.759l1.839 1.848q0.741 0.741 0.741 1.813 0 1.098-0.786 1.866l0.786 0.786q0.768-0.786 1.857-0.786 1.071 0 1.821 0.75l1.857 1.857q0.75 0.75 0.75 1.821z" - /> - </svg> - </a> - <span class="note little-spacer-left">{{key}}</span> - </li> - </ul> - - <div class="coding-rules-detail-description rule-desc markdown">{{{htmlDesc}}}</div> - - {{#if htmlNote}} - <div id="coding-rules-detail-description-extra"> - <div class="rule-desc markdown">{{{htmlNote}}}</div> - </div> - {{/if}} - - {{else}} - - {{! does not exist}} - <div class="alert alert-warning">{{t 'workspace.no_rule'}}</div> - - {{/if}} - -</div> diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer-header.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer-header.hbs deleted file mode 100644 index 409dcd3a6cf..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer-header.hbs +++ /dev/null @@ -1,17 +0,0 @@ -<h6 class="workspace-viewer-name">{{#if q}}{{qualifierIcon q}} {{/if}}{{#eq type 'rule'}}<i class="icon-workspace-doc"></i> {{/eq}}{{name}}</h6> - -<div class="workspace-viewer-resize js-resize"></div> - -<div class="workspace-viewer-actions"> - <a href="#" class="js-minimize icon-minimize spacer-right" - title="{{t 'workspace.minimize'}}" data-placement="bottom" data-toggle="tooltip"></a> - - <a href="#" class="js-full-screen icon-bigger-size spacer-right" - title="{{t 'workspace.full_window'}}" data-placement="bottom" data-toggle="tooltip"></a> - - <a href="#" class="js-normal-size icon-smaller-size spacer-right" - title="{{t 'workspace.normal_size'}}" data-placement="bottom" data-toggle="tooltip"></a> - - <a href="#" class="js-close icon-close" - title="{{t 'workspace.close'}}" data-placement="bottom" data-toggle="tooltip"></a> -</div> diff --git a/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer.hbs b/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer.hbs deleted file mode 100644 index 45515fbecb0..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/templates/workspace-viewer.hbs +++ /dev/null @@ -1,3 +0,0 @@ -<div class="workspace-viewer-header"></div> - -<div class="workspace-viewer-container"></div> diff --git a/server/sonar-web/src/main/js/components/workspace/views/rule-view.js b/server/sonar-web/src/main/js/components/workspace/views/rule-view.js deleted file mode 100644 index 88c2dbb5b8f..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/views/rule-view.js +++ /dev/null @@ -1,53 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import { union } from 'lodash'; -import Marionette from 'backbone.marionette'; -import BaseView from './base-viewer-view'; -import Template from '../templates/workspace-rule.hbs'; -import { getPathUrlAsString, getRulesUrl } from '../../../helpers/urls'; -import { areThereCustomOrganizations } from '../../../store/organizations/utils'; - -export default BaseView.extend({ - template: Template, - - onRender() { - BaseView.prototype.onRender.apply(this, arguments); - this.$('[data-toggle="tooltip"]').tooltip({ container: 'body' }); - }, - - onDestroy() { - this.$('[data-toggle="tooltip"]').tooltip('destroy'); - }, - - serializeData() { - const query = { rule_key: this.model.get('key') }; - const permalink = getPathUrlAsString( - areThereCustomOrganizations() - ? getRulesUrl(query, this.model.get('organization')) - : getRulesUrl(query, undefined) - ); - - return { - ...Marionette.LayoutView.prototype.serializeData.apply(this, arguments), - allTags: union(this.model.get('sysTags'), this.model.get('tags')), - permalink - }; - } -}); diff --git a/server/sonar-web/src/main/js/components/workspace/views/viewer-header-view.js b/server/sonar-web/src/main/js/components/workspace/views/viewer-header-view.js deleted file mode 100644 index 756ede70c71..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/views/viewer-header-view.js +++ /dev/null @@ -1,110 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import $ from 'jquery'; -import Marionette from 'backbone.marionette'; -import Template from '../templates/workspace-viewer-header.hbs'; - -export default Marionette.ItemView.extend({ - template: Template, - - modelEvents: { - change: 'render' - }, - - events: { - 'mousedown .js-resize': 'onResizeClick', - - 'click .js-minimize': 'onMinimizeClick', - 'click .js-full-screen': 'onFullScreenClick', - 'click .js-normal-size': 'onNormalSizeClick', - 'click .js-close': 'onCloseClick' - }, - - onRender() { - this.$('[data-toggle="tooltip"]').tooltip({ container: 'body' }); - this.$('.js-normal-size').addClass('hidden'); - }, - - onDestroy() { - this.$('[data-toggle="tooltip"]').tooltip('destroy'); - $('.tooltip').remove(); - }, - - onResizeClick(e) { - e.preventDefault(); - this.startResizing(e); - }, - - onMinimizeClick(e) { - e.preventDefault(); - this.trigger('viewerMinimize'); - }, - - onFullScreenClick(e) { - e.preventDefault(); - this.toFullScreen(); - }, - - onNormalSizeClick(e) { - e.preventDefault(); - this.toNormalSize(); - }, - - onCloseClick(e) { - e.preventDefault(); - this.trigger('viewerClose'); - }, - - startResizing(e) { - this.initialResizePosition = e.clientY; - this.initialResizeHeight = $('.workspace-viewer-container').height(); - const processResizing = this.processResizing.bind(this); - const stopResizing = this.stopResizing.bind(this); - $('body') - .on('mousemove.workspace', processResizing) - .on('mouseup.workspace', stopResizing); - }, - - processResizing(e) { - const currentResizePosition = e.clientY; - const resizeDelta = this.initialResizePosition - currentResizePosition; - const height = this.initialResizeHeight + resizeDelta; - $('.workspace-viewer-container').height(height); - }, - - stopResizing() { - $('body') - .off('mousemove.workspace') - .off('mouseup.workspace'); - }, - - toFullScreen() { - this.$('.js-normal-size').removeClass('hidden'); - this.$('.js-full-screen').addClass('hidden'); - this.initialResizeHeight = $('.workspace-viewer-container').height(); - $('.workspace-viewer-container').height('9999px'); - }, - - toNormalSize() { - this.$('.js-normal-size').addClass('hidden'); - this.$('.js-full-screen').removeClass('hidden'); - $('.workspace-viewer-container').height(this.initialResizeHeight); - } -}); diff --git a/server/sonar-web/src/main/js/components/workspace/views/viewer-view.js b/server/sonar-web/src/main/js/components/workspace/views/viewer-view.js deleted file mode 100644 index eafcac4460e..00000000000 --- a/server/sonar-web/src/main/js/components/workspace/views/viewer-view.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2018 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import $ from 'jquery'; -import React from 'react'; -import { render } from 'react-dom'; -import BaseView from './base-viewer-view'; -import SourceViewer from '../../SourceViewer/SourceViewer'; -import Template from '../templates/workspace-viewer.hbs'; -import WithStore from '../../shared/WithStore'; - -export default BaseView.extend({ - template: Template, - - onRender() { - BaseView.prototype.onRender.apply(this, arguments); - this.showViewer(); - }, - - scrollToLine(line) { - const row = this.$el.find(`.source-line[data-line-number="${line}"]`); - if (row.length > 0) { - const sourceViewer = this.$el.find('.source-viewer'); - let p = sourceViewer.scrollParent(); - if (p.is(document) || p.is('body')) { - p = $(window); - } - const pTopOffset = p.offset() != null ? p.offset().top : 0; - const pHeight = p.height(); - const goal = row.offset().top - pHeight / 3 - pTopOffset; - p.scrollTop(goal); - } - }, - - showViewer() { - const { branchLike, key, line } = this.model.toJSON(); - - const el = document.querySelector(this.viewerRegion.el); - - render( - <WithStore> - <SourceViewer - aroundLine={line} - branchLike={branchLike} - component={key} - fromWorkspace={true} - highlightedLine={line} - onLoaded={component => { - this.model.set({ name: component.name, q: component.q }); - if (line) { - this.scrollToLine(line); - } - }} - /> - </WithStore>, - el - ); - } -}); |