diff --git a/src/webui/components/CopyToClipBoard/index.js b/src/webui/components/CopyToClipBoard/index.js index 4600e8a3b..ab43c8ecf 100644 --- a/src/webui/components/CopyToClipBoard/index.js +++ b/src/webui/components/CopyToClipBoard/index.js @@ -11,27 +11,12 @@ import type { Node } from 'react'; import { IProps } from './types'; import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles'; - -const copyToClipBoardUtility = (str: string) => (event: SyntheticEvent) => { - event.preventDefault(); - const node = document.createElement('div'); - node.innerText = str; - if (document.body) { - document.body.appendChild(node); - const range = document.createRange(); - const selection = window.getSelection(); - range.selectNodeContents(node); - selection.removeAllRanges(); - selection.addRange(range); - document.execCommand('copy'); - // $FlowFixMe - document.body.removeChild(node); - } -}; +import { copyToClipBoardUtility } from '../../utils/cli-utils'; +import { TEXT } from '../../utils/constants'; const CopyToClipBoard = ({ text }: IProps): Node => { const renderToolTipFileCopy = () => ( - + diff --git a/src/webui/components/CopyToClipBoard/styles.js b/src/webui/components/CopyToClipBoard/styles.js index a25d7ab33..d18f1662a 100644 --- a/src/webui/components/CopyToClipBoard/styles.js +++ b/src/webui/components/CopyToClipBoard/styles.js @@ -1,11 +1,8 @@ import styled from 'react-emotion'; import IconButton from '@material-ui/core/IconButton/index'; -export const ClipBoardCopy = styled.p` +export const ClipBoardCopy = styled.div` && { - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - padding: 5px 0 5px 0; - margin: 0; display: flex; align-items: center; justify-content: space-between; @@ -26,4 +23,4 @@ export const CopyIcon = styled(IconButton)` && { margin: 0 0 0 10px; } -`; \ No newline at end of file +`; diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js index 278e7ddd5..92404144f 100644 --- a/src/webui/components/Header/index.js +++ b/src/webui/components/Header/index.js @@ -19,10 +19,10 @@ import { default as IconSearch } from '@material-ui/icons/Search'; import { getRegistryURL } from '../../utils/url'; import Link from '../Link'; import Logo from '../Logo'; -import CopyToClipBoard from '../CopyToClipBoard/index'; import RegistryInfoDialog from '../RegistryInfoDialog'; import Label from '../Label'; import Search from '../Search'; +import RegistryInfoContent from '../RegistryInfoContent'; import { IProps, IState } from './types'; import type { ToolTipType } from './types'; @@ -222,10 +222,7 @@ class Header extends Component { const { openInfoDialog, registryUrl } = this.state; return ( -
- - -
+ ); }; diff --git a/src/webui/components/RegistryInfoContent/index.js b/src/webui/components/RegistryInfoContent/index.js new file mode 100644 index 000000000..0f7dfbd5c --- /dev/null +++ b/src/webui/components/RegistryInfoContent/index.js @@ -0,0 +1,90 @@ +/** + * @prettier + * @flow + */ + +import React, { Component } from 'react'; + +import type { IProps, IState } from './types'; +import { CommandContainer } from './styles'; +import CopyToClipBoard from '../CopyToClipBoard'; +import Tabs from '@material-ui/core/Tabs/index'; +import Tab from '@material-ui/core/Tab/index'; +import Typography from '@material-ui/core/Typography/index'; + +import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils'; +import { NODE_MANAGER } from '../../utils/constants'; + +/* eslint react/prop-types:0 */ +function TabContainer({ children }) { + return ( + + + {children} + + + ); +} + +class RegistryInfoContent extends Component { + state = { + tabPosition: 0, + }; + + render() { + return
{this.renderTabs()}
; + } + + renderTabs() { + const { scope, registryUrl } = this.props; + const { tabPosition } = this.state; + + return ( + + + + + + + {tabPosition === 0 && {this.renderNpmTab(scope, registryUrl)}} + {tabPosition === 1 && {this.renderPNpmTab(scope, registryUrl)}} + {tabPosition === 2 && {this.renderYarnTab(scope, registryUrl)}} + + ); + } + + renderNpmTab(scope: string, registryUrl: string) { + return ( + + + + + + ); + } + + renderPNpmTab(scope: string, registryUrl: string) { + return ( + + + + + + ); + } + + renderYarnTab(scope: string, registryUrl: string) { + return ( + + + + ); + } + + handleChange = (event: any, tabPosition: number) => { + event.preventDefault(); + this.setState({ tabPosition }); + }; +} + +export default RegistryInfoContent; diff --git a/src/webui/components/RegistryInfoContent/styles.js b/src/webui/components/RegistryInfoContent/styles.js new file mode 100644 index 000000000..e19465873 --- /dev/null +++ b/src/webui/components/RegistryInfoContent/styles.js @@ -0,0 +1,7 @@ +import styled from 'react-emotion'; + +export const CommandContainer = styled.div` + && { + padding-top: 20px; + } +`; diff --git a/src/webui/components/RegistryInfoContent/types.js b/src/webui/components/RegistryInfoContent/types.js new file mode 100644 index 000000000..909ad96c6 --- /dev/null +++ b/src/webui/components/RegistryInfoContent/types.js @@ -0,0 +1,13 @@ +/** + * @prettier + * @flow + */ + +export interface IProps { + scope: string; + registryUrl: string; +} + +export interface IState { + tabPosition: number; +} diff --git a/src/webui/utils/cli-utils.js b/src/webui/utils/cli-utils.js new file mode 100644 index 000000000..d7a476019 --- /dev/null +++ b/src/webui/utils/cli-utils.js @@ -0,0 +1,33 @@ +/** + * @prettier + * @flow + */ + +export const copyToClipBoardUtility = (str: string) => (event: SyntheticEvent) => { + event.preventDefault(); + const node = document.createElement('div'); + node.innerText = str; + if (document.body) { + document.body.appendChild(node); + const range = document.createRange(); + const selection = window.getSelection(); + range.selectNodeContents(node); + selection.removeAllRanges(); + selection.addRange(range); + document.execCommand('copy'); + // $FlowFixMe + document.body.removeChild(node); + } +}; + +export function getCLISetConfigRegistry(command: string, scope: string, registryUrl: string): string { + return `${command} ${scope} registry ${registryUrl}`; +} + +export function getCLISetRegistry(command: string, registryUrl: string): string { + return `${command} --registry ${registryUrl}`; +} + +export function getCLIChangePassword(command: string, registryUrl: string): string { + return `${command} profile set password --registry ${registryUrl}`; +} diff --git a/src/webui/utils/constants.js b/src/webui/utils/constants.js new file mode 100644 index 000000000..616033a78 --- /dev/null +++ b/src/webui/utils/constants.js @@ -0,0 +1,9 @@ +export const TEXT = { + CLIPBOARD_COPY: 'Copy to Clipboard', +}; + +export const NODE_MANAGER = { + npm: 'npm', + yarn: 'yarn', + pnpm: 'pnpm', +}; diff --git a/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap b/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap index 194f6507f..fdf0a4d9f 100644 --- a/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/copyToClipBoard.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component render the component 1`] = `"

copy text

"`; +exports[` component render the component 1`] = `"
copy text
"`; diff --git a/test/unit/webui/components/__snapshots__/help.spec.js.snap b/test/unit/webui/components/__snapshots__/help.spec.js.snap index 3d59cef55..476fdc8ba 100644 --- a/test/unit/webui/components/__snapshots__/help.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/help.spec.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

$ npm adduser --registry http://localhost

$ npm publish --registry http://localhost

Learn More
"`; +exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

$ npm adduser --registry http://localhost
$ npm publish --registry http://localhost
Learn More
"`;