From 91fe807305e89ecd9df3b6f4f221540fd451659e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?=
Date: Thu, 8 Feb 2018 17:43:32 +0100
Subject: [PATCH] SONAR-10347 Create a CodeSnippet component and use it in
project badges and onboarding tutorial
---
.../js/apps/overview/badges/BadgesModal.tsx | 4 +-
.../__snapshots__/BadgesModal-test.tsx.snap | 3 +-
.../main/js/apps/overview/badges/styles.css | 35 ------
.../tutorials/onboarding/commands/ClangGCC.js | 6 +-
.../tutorials/onboarding/commands/DotNet.js | 8 +-
.../onboarding/commands/JavaGradle.js | 6 +-
.../onboarding/commands/JavaMaven.js | 4 +-
.../tutorials/onboarding/commands/Msvc.js | 8 +-
.../tutorials/onboarding/commands/Other.js | 4 +-
.../__snapshots__/ClangGCC-test.js.snap | 30 ++---
.../__snapshots__/Command-test.js.snap | 39 ------
.../__snapshots__/DotNet-test.js.snap | 32 ++---
.../__snapshots__/JavaGradle-test.js.snap | 16 +--
.../__snapshots__/JavaMaven-test.js.snap | 8 +-
.../__tests__/__snapshots__/Msvc-test.js.snap | 32 ++---
.../__snapshots__/Other-test.js.snap | 18 +--
.../js/apps/tutorials/onboarding/styles.css | 42 -------
.../common/CodeSnippet.css} | 47 ++++++--
.../common/CodeSnippet.tsx} | 48 ++++----
.../common/__tests__/CodeSnippet-test.tsx} | 13 +-
.../__snapshots__/CodeSnippet-test.tsx.snap | 111 ++++++++++++++++++
21 files changed, 267 insertions(+), 247 deletions(-)
delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Command-test.js.snap
rename server/sonar-web/src/main/js/{apps/overview/badges/BadgeSnippet.tsx => components/common/CodeSnippet.css} (53%)
rename server/sonar-web/src/main/js/{apps/tutorials/onboarding/commands/Command.js => components/common/CodeSnippet.tsx} (52%)
rename server/sonar-web/src/main/js/{apps/tutorials/onboarding/commands/__tests__/Command-test.js => components/common/__tests__/CodeSnippet-test.tsx} (66%)
create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
index fc98e4eb71a..3592c4daea3 100644
--- a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
@@ -19,10 +19,10 @@
*/
import * as React from 'react';
import BadgeButton from './BadgeButton';
-import BadgeSnippet from './BadgeSnippet';
import BadgeParams from './BadgeParams';
import { BadgeType, BadgeOptions, getBadgeUrl } from './utils';
import { Metric } from '../../../app/types';
+import CodeSnippet from '../../../components/common/CodeSnippet';
import Modal from '../../../components/controls/Modal';
import { translate } from '../../../helpers/l10n';
import './styles.css';
@@ -101,7 +101,7 @@ export default class BadgesModal extends React.PureComponent {
type={selectedType}
updateOptions={this.handleUpdateOptions}
/>
-
+
-
-
@@ -79,8 +79,8 @@ exports[`renders correctly 2`] = `
>
onboarding.analysis.java.gradle.text.2
-
onboarding.analysis.java.maven.text
-
onboarding.analysis.java.maven.text
-
-
-
-
-
-
-
-
-
-
-
{snippet}
-
-
- );
+.code-snippet-oneline button {
+ top: auto;
+ top: 40px;
}
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
similarity index 52%
rename from server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js
rename to server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
index 5e3706585f2..6e2469597bc 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js
+++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
@@ -17,37 +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.
*/
-// @flow
-import React from 'react';
-import classNames from 'classnames';
-import ClipboardButton from '../../../../components/controls/ClipboardButton';
-import { translate } from '../../../../helpers/l10n';
+import * as React from 'react';
+import * as classNames from 'classnames';
+import ClipboardButton from '../controls/ClipboardButton';
+import './CodeSnippet.css';
-/*::
-type Props = {
- command: string | Array,
- isOneLine?: boolean
-};
-*/
+interface Props {
+ className?: string;
+ isOneLine?: boolean;
+ noCopy?: boolean;
+ snippet: string | (string | undefined)[];
+}
// keep this "useless" concatentation for the readability reason
// eslint-disable-next-line no-useless-concat
const s = ' \\' + '\n ';
-export default class Command extends React.PureComponent {
- /*:: props: Props; */
-
- render() {
- const { command, isOneLine } = this.props;
- const commandArray = Array.isArray(command) ? command.filter(line => line != null) : [command];
- const finalCommand = isOneLine ? commandArray.join(' ') : commandArray.join(s);
-
- return (
-
- );
- }
+export default function CodeSnippet({ className, isOneLine, noCopy, snippet }: Props) {
+ const snippetArray = Array.isArray(snippet)
+ ? snippet.filter(line => line !== undefined)
+ : [snippet];
+ const finalSnippet = isOneLine ? snippetArray.join(' ') : snippetArray.join(s);
+ return (
+
+
{finalSnippet}
+ {!noCopy &&
}
+
+ );
}
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
similarity index 66%
rename from server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js
rename to server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
index f4aa51cd5c8..8956e411a50 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js
+++ b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
@@ -17,11 +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.
*/
-// @flow
-import React from 'react';
+import * as React from 'react';
import { mount } from 'enzyme';
-import Command from '../Command';
+import CodeSnippet from '../CodeSnippet';
it('renders correctly', () => {
- expect(mount()).toMatchSnapshot();
+ expect(mount()).toMatchSnapshot();
+ expect(mount()).toMatchSnapshot();
+});
+
+it('renders correctly with array snippet', () => {
+ expect(mount()).toMatchSnapshot();
+ expect(mount()).toMatchSnapshot();
});
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
new file mode 100644
index 00000000000..5e330d13abe
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+
+
+
+ foo
+bar
+
+
+
+
+
+
+`;
+
+exports[`renders correctly 2`] = `
+
+
+
+`;
+
+exports[`renders correctly with array snippet 1`] = `
+
+
+
+ foo \\
+ bar
+
+
+
+
+
+
+`;
+
+exports[`renders correctly with array snippet 2`] = `
+
+
+
+ foo bar
+
+
+
+
+
+
+`;
--
2.39.5