forked from niki-timofe/verdaccio
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: disable info registry section with pkg manager config (verdaccio…
- Loading branch information
1 parent
73d34bf
commit 8ca5fe6
Showing
9 changed files
with
168 additions
and
210 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
204 changes: 134 additions & 70 deletions
204
packages/plugins/ui-theme/src/App/Header/RegistryInfoContent/RegistryInfoContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,155 @@ | ||
| import React, { useState } from 'react'; | ||
| import styled from '@emotion/styled'; | ||
| import Accordion from '@material-ui/core/Accordion'; | ||
| import AccordionDetails from '@material-ui/core/AccordionDetails'; | ||
| import AccordionSummary from '@material-ui/core/AccordionSummary'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import Link from '@material-ui/core/Link'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; | ||
| import React, { FC } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard'; | ||
| import { default as Typography } from 'verdaccio-ui/components/Heading'; | ||
| import Tab from 'verdaccio-ui/components/Tab'; | ||
| import Tabs from 'verdaccio-ui/components/Tabs'; | ||
| import { useConfig } from 'verdaccio-ui/providers/config'; | ||
| import { | ||
| getCLISetRegistry, | ||
| getCLIChangePassword, | ||
| getCLISetConfigRegistry, | ||
| } from 'verdaccio-ui/utils/cli-utils'; | ||
| import { NODE_MANAGER } from 'verdaccio-ui/utils/constants'; | ||
|
|
||
| import { CommandContainer } from './styles'; | ||
| import { Props, State } from './types'; | ||
|
|
||
| const RegistryInfoContent: React.FC<Props> = (props) => { | ||
| const [tabPosition, setTabPosition] = useState<State['tabPosition']>(0); | ||
| const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => { | ||
| event.preventDefault(); | ||
| setTabPosition(tabPosition); | ||
| }; | ||
|
|
||
| const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| <> | ||
| <CopyToClipBoard | ||
| text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} | ||
| /> | ||
| <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} /> | ||
| <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} /> | ||
| </> | ||
| ); | ||
| }; | ||
| const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| <Box display="flex" flexDirection="column" p={1}> | ||
| <CopyToClipBoard | ||
| text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} | ||
| /> | ||
| <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} /> | ||
| <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| <> | ||
| <CopyToClipBoard | ||
| text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} | ||
| /> | ||
| <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} /> | ||
| <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} /> | ||
| </> | ||
| ); | ||
| }; | ||
| const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| <Box display="flex" flexDirection="column" p={1}> | ||
| <CopyToClipBoard | ||
| text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} | ||
| /> | ||
| <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} /> | ||
| <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => { | ||
| return ( | ||
| <Box display="flex" flexDirection="column" p={1}> | ||
| <CopyToClipBoard | ||
| text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} | ||
| /> | ||
| ); | ||
| }; | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| root: { | ||
| width: '100%', | ||
| }, | ||
| heading: { | ||
| fontSize: theme.typography.pxToRem(15), | ||
| fontWeight: theme.typography.fontWeightBold, | ||
| }, | ||
| })); | ||
|
|
||
| export const AccordionContainer = styled('div')({ | ||
| padding: 30, | ||
| paddingLeft: 0, | ||
| paddingRight: 0, | ||
| }); | ||
|
|
||
| const renderTabs = (): JSX.Element => { | ||
| const { scope, registryUrl } = props; | ||
| export const CommandContainer = styled('div')({ | ||
| padding: 5, | ||
| }); | ||
|
|
||
| export const LinkContainer = styled('div')({ | ||
| margin: 10, | ||
| marginLeft: 0, | ||
| }); | ||
|
|
||
| export type Props = { | ||
| registryUrl: string; | ||
| scope: string; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Tabs | ||
| color={'primary'} | ||
| data-testid={'tabs-el'} | ||
| indicatorColor={'primary'} | ||
| onChange={handleChange} | ||
| value={tabPosition} | ||
| variant="fullWidth"> | ||
| <Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} /> | ||
| <Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} /> | ||
| <Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} /> | ||
| </Tabs> | ||
| {tabPosition === 0 && <TabContainer>{renderNpmTab(scope, registryUrl)}</TabContainer>} | ||
| {tabPosition === 1 && <TabContainer>{renderPnpmTab(scope, registryUrl)}</TabContainer>} | ||
| {tabPosition === 2 && <TabContainer>{renderYarnTab(scope, registryUrl)}</TabContainer>} | ||
| </> | ||
| ); | ||
| }; | ||
| const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => { | ||
| const { t } = useTranslation(); | ||
| const classes = useStyles(); | ||
| const { configOptions } = useConfig(); | ||
|
|
||
| /* eslint react/prop-types:0 */ | ||
| const TabContainer: React.FC = ({ children }): JSX.Element => { | ||
| return ( | ||
| <CommandContainer data-testid={'tab-content'}> | ||
| <Typography>{children}</Typography> | ||
| </CommandContainer> | ||
| ); | ||
| }; | ||
| const hasNpm = configOptions?.pkgManagers?.includes('npm'); | ||
| const hasYarn = configOptions?.pkgManagers?.includes('yarn'); | ||
| const hasPnpm = configOptions?.pkgManagers?.includes('pnpm'); | ||
| const hasPkgManagers = hasNpm | hasPnpm | hasYarn; | ||
| if (!hasPkgManagers || !scope || !registryUrl) { | ||
| return <AccordionContainer>{t('header.registry-no-conf')}</AccordionContainer>; | ||
| } | ||
|
|
||
| return <div>{renderTabs()}</div>; | ||
| return hasPkgManagers ? ( | ||
| <AccordionContainer> | ||
| {hasNpm && ( | ||
| <Accordion> | ||
| <AccordionSummary | ||
| aria-controls="panel1a-content" | ||
| expandIcon={<ExpandMoreIcon />} | ||
| id="panel1a-header"> | ||
| <Typography className={classes.heading}>{'npm'}</Typography> | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| <CommandContainer data-testid={'tab-content'}> | ||
| {renderNpmTab(scope, registryUrl)} | ||
| </CommandContainer> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| )} | ||
| {hasYarn && ( | ||
| <Accordion> | ||
| <AccordionSummary | ||
| aria-controls="panel2a-content" | ||
| expandIcon={<ExpandMoreIcon />} | ||
| id="panel2a-header"> | ||
| <Typography className={classes.heading}>{'yarn'}</Typography> | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| <CommandContainer data-testid={'tab-content'}> | ||
| {renderYarnTab(scope, registryUrl)} | ||
| </CommandContainer> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| )} | ||
| {hasPnpm && ( | ||
| <Accordion> | ||
| <AccordionSummary | ||
| aria-controls="panel3a-content" | ||
| expandIcon={<ExpandMoreIcon />} | ||
| id="panel3a-header"> | ||
| {'pnpm'} | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| <CommandContainer data-testid={'tab-content'}> | ||
| {renderPnpmTab(scope, registryUrl)} | ||
| </CommandContainer> | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| )} | ||
| <LinkContainer> | ||
| <Link href="https://verdaccio.org/docs/en/cli-registry" target="_blank"> | ||
| <Typography>{t('header.registry-info-link')}</Typography> | ||
| </Link> | ||
| </LinkContainer> | ||
| </AccordionContainer> | ||
| ) : null; | ||
| }; | ||
|
|
||
| export default RegistryInfoContent; |
5 changes: 0 additions & 5 deletions
5
packages/plugins/ui-theme/src/App/Header/RegistryInfoContent/styles.ts
This file was deleted.
Oops, something went wrong.
8 changes: 0 additions & 8 deletions
8
packages/plugins/ui-theme/src/App/Header/RegistryInfoContent/types.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.