@verdaccio/ui-components 3.0.0-next.1 → 4.0.0-next-8.0

package/src/components/UpLinks/UplinkLink.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { utils } from '../../utils';
+import LinkExternal from '../LinkExternal';
+
+const UpLinkLink: React.FC<{ packageName: string; uplinkName: string }> = ({
+  packageName,
+  uplinkName,
+}) => {
+  const link = utils.getUplink(uplinkName, packageName);
+  return link ? (
+    <LinkExternal to={link} variant="outline">
+      {uplinkName}
+    </LinkExternal>
+  ) : (
+    <>{uplinkName}</>
+  );
+};
+
+export default UpLinkLink;

package/src/components/UpLinks/styles.ts

@@ -15,6 +15,7 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
+  margin: '0 16px',
 }));
 
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({

package/src/components/Versions/HistoryList.tsx

@@ -1,11 +1,14 @@
+import Chip from '@mui/material/Chip';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useConfig } from '../../providers';
 import { Time, Versions } from '../../types/packageMeta';
-import { utils } from '../../utils';
-import { Link } from '../Link';
+import { Route, utils } from '../../utils';
+import Link from '../Link';
 import { ListItemText, Spacer } from './styles';
 
 interface Props {
@@ -14,20 +17,50 @@ interface Props {
   time: Time;
 }
 
+export function filterDeprecated(versions: Versions) {
+  const versionsIds = Object.keys(versions);
+  return versionsIds.reduce((prev, current) => {
+    if (!versions[current].deprecated) {
+      prev[current] = versions[current];
+    }
+
+    return prev;
+  }, {});
+}
+
 const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
   const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  const theme = useTheme();
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+  const listVersions = hideDeprecatedVersions ? filterDeprecated(versions) : versions;
 
   return (
     <List dense={true}>
-      {Object.keys(versions)
+      {Object.keys(listVersions)
         .reverse()
         .map((version) => (
-          <ListItem className="version-item" data-testid={`version-${version}`} key={version}>
-            <Link to={`/-/web/detail/${packageName}/v/${version}`} variant="caption">
+          <ListItem
+            className="version-item"
+            data-testid={`version-${version}`}
+            key={version}
+            sx={{ pr: 0 }}
+          >
+            <Link to={`${Route.DETAIL}${packageName}/v/${version}`} variant="outline">
               <ListItemText disableTypography={false} primary={version}></ListItemText>
             </Link>
+            {typeof versions[version]?.deprecated === 'string' ? (
+              <Chip
+                color="warning"
+                data-testid="deprecated-badge"
+                label={t('versions.deprecated')}
+                size="small"
+                sx={{ marginLeft: theme.spacing(1) }}
+                variant="outlined"
+              />
+            ) : null}
             <Spacer />
-            <ListItemText title={utils.formatDate(time[version])}>
+            <ListItemText data-testid={`version-list-text`} title={utils.formatDate(time[version])}>
               {time[version]
                 ? utils.formatDateDistance(time[version])
                 : t('versions.not-available')}

package/src/components/Versions/TagList.tsx

@@ -3,7 +3,8 @@ import ListItem from '@mui/material/ListItem';
 import React from 'react';
 
 import { DistTags, Time } from '../../types/packageMeta';
-import { Link } from '../Link';
+import { Route } from '../../utils';
+import Link from '../Link';
 import { ListItemText, Spacer } from './styles';
 
 interface Props {
@@ -19,8 +20,8 @@ const VersionsTagList: React.FC<Props> = ({ tags, packageName, time }) => (
         return time[tags[a]] < time[tags[b]] ? 1 : time[tags[a]] > time[tags[b]] ? -1 : 0;
       })
       .map((tag) => (
-        <ListItem className="version-item" data-testid={`tag-${tag}`} key={tag}>
-          <Link to={`/-/web/detail/${packageName}/v/${tags[tag]}`} variant="outline">
+        <ListItem className="version-item" data-testid={`tag-${tag}`} key={tag} sx={{ pr: 0 }}>
+          <Link to={`${Route.DETAIL}${packageName}/v/${tags[tag]}`} variant="outline">
             <ListItemText>{tag}</ListItemText>
           </Link>
           <Spacer />

package/src/components/Versions/Versions.test.tsx

@@ -2,23 +2,31 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { cleanup, render } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import Versions, { Props } from './Versions';
 import data from './__partials__/data.json';
+import dataDeprecated from './__partials__/deprecated-versions.json';
 
-const ComponentToBeRendered: React.FC<Props> = (props) => (
+const VersionsComponent: React.FC<Props> = (props) => (
   <MemoryRouter>
     <Versions {...props} />
   </MemoryRouter>
 );
 
+jest.mock('lodash/debounce', () =>
+  jest.fn((fn) => {
+    fn.cancel = jest.fn();
+    return fn;
+  })
+);
+
 describe('<Version /> component', () => {
   afterEach(() => {
-    cleanup();
+    jest.clearAllMocks();
   });
 
   test('should render versions', () => {
-    const { getByText } = render(<ComponentToBeRendered packageMeta={data} packageName={'foo'} />);
+    const { getByText } = render(<VersionsComponent packageMeta={data} packageName={'foo'} />);
 
     expect(getByText('versions.version-history')).toBeTruthy();
     expect(getByText('versions.current-tags')).toBeTruthy();
@@ -26,13 +34,38 @@ describe('<Version /> component', () => {
     // pick some versions
     expect(getByText('2.3.0')).toBeTruthy();
     expect(getByText('canary')).toBeTruthy();
+    // there is one deprecated version deprecated
+    expect(screen.queryByTestId('deprecated-badge')).toBeInTheDocument();
+  });
+
+  test('should filter by version', () => {
+    render(<VersionsComponent packageMeta={data} packageName={'foo'} />);
+    expect(screen.getByText('versions.version-history')).toBeTruthy();
+    expect(screen.getByText('versions.current-tags')).toBeTruthy();
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(65);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '2.3.0' } });
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(1);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
+    expect(screen.queryAllByTestId('version-list-text')).toHaveLength(65);
   });
 
   test('should not render versions', () => {
-    const { queryByText } = render(<ComponentToBeRendered packageMeta={{}} packageName={'foo'} />);
+    render(<VersionsComponent packageMeta={{}} packageName={'foo'} />);
 
-    expect(queryByText('versions.version-history')).toBeFalsy();
-    expect(queryByText('versions.current-tags')).toBeFalsy();
+    expect(screen.queryByText('versions.version-history')).toBeFalsy();
+    expect(screen.queryByText('versions.current-tags')).toBeFalsy();
+  });
+
+  test('should render versions deprecated settings', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.hideDeprecatedVersions = true;
+    const { getByText } = render(
+      <VersionsComponent packageMeta={dataDeprecated} packageName={'foo'} />
+    );
+    expect(getByText('versions.hide-deprecated')).toBeTruthy();
+
+    // pick some versions
+    expect(screen.queryByText('0.0.2')).not.toBeInTheDocument();
+    expect(screen.getByText('0.0.1')).toBeInTheDocument();
   });
 
   test.todo('should click on version link');

package/src/components/Versions/Versions.tsx

@@ -1,39 +1,108 @@
+import styled from '@emotion/styled';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import { useTheme } from '@mui/styles';
+import debounce from 'lodash/debounce';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import semver from 'semver';
 
+import { Theme } from '../../Theme';
+import { useConfig } from '../../providers';
 import VersionsHistoryList from './HistoryList';
 import VersionsTagList from './TagList';
 
 export type Props = { packageMeta: any; packageName: string };
 
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
 const Versions: React.FC<Props> = ({ packageMeta, packageName }) => {
   const { t } = useTranslation();
+  const { configOptions } = useConfig();
+  const theme = useTheme();
+  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
 
-  if (!packageMeta) {
+  const [packageVersions, setPackageVersions] = useState(versions);
+  if (!packageMeta || Object.keys(packageMeta).length === 0) {
     return null;
   }
+  const hideDeprecatedVersions = configOptions.hideDeprecatedVersions;
+  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
+  const hasVersionHistory =
+    packageVersions && Object.keys(packageVersions).length > 0 && packageName;
 
-  const { versions = {}, time = {}, ['dist-tags']: distTags = {} } = packageMeta;
+  const filterVersions = (textSearch) => {
+    const filteredVersions = Object.keys(versions).reduce((acc, version) => {
+      if (textSearch !== '') {
+        if (typeof versions[version] !== 'undefined') {
+          if (semver.satisfies(version, textSearch, { includePrerelease: true, loose: true })) {
+            acc[version] = versions[version];
+          }
+        }
+      } else {
+        acc[version] = versions[version];
+      }
+      return acc;
+    }, {});
 
-  const hasDistTags = distTags && Object.keys(distTags).length > 0 && packageName;
-  const hasVersionHistory = versions && Object.keys(versions).length > 0 && packageName;
+    setPackageVersions(filteredVersions);
+  };
 
   return (
-    <>
-      {hasDistTags ? (
-        <>
-          <Typography variant="subtitle1">{t('versions.current-tags')}</Typography>
-          <VersionsTagList packageName={packageName} tags={distTags} time={time} />
-        </>
-      ) : null}
-      {hasVersionHistory ? (
-        <>
-          <Typography variant="subtitle1">{t('versions.version-history')}</Typography>
-          <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
-        </>
-      ) : null}
-    </>
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="versions" sx={{ m: 2 }}>
+          {hasDistTags ? (
+            <>
+              <StyledText variant="subtitle1">
+                {t('versions.current-tags')}
+                <span>{` (${Object.keys(distTags).length})`}</span>
+              </StyledText>
+              <VersionsTagList packageName={packageName} tags={distTags} time={time} />
+            </>
+          ) : null}
+          <>
+            <StyledText variant="subtitle1">
+              {t('versions.version-history')}
+              <span>{` (${Object.keys(packageVersions).length})`}</span>
+            </StyledText>
+            <TextField
+              helperText={t('versions.search.placeholder')}
+              onChange={debounce((e) => {
+                filterVersions(e.target.value);
+              }, 200)}
+              size="small"
+              variant="standard"
+              width="50%"
+            />
+          </>
+          {hasVersionHistory ? (
+            <>
+              {hideDeprecatedVersions === true && (
+                <Alert
+                  severity="info"
+                  sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}
+                >
+                  {t('versions.hide-deprecated')}
+                </Alert>
+              )}
+              <VersionsHistoryList
+                packageName={packageName}
+                time={time}
+                versions={packageVersions}
+              />
+            </>
+          ) : null}
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 

package/src/components/Versions/__partials__/data.json

@@ -3,6 +3,7 @@
     "0.0.1": {
       "name": "@verdaccio/local-storage",
       "version": "0.0.1",
+      "deprecated": "this is deprecated",
       "description": "local storage implementation",
       "main": "lib/index.js",
       "scripts": {

package/src/components/Versions/__partials__/deprecated-versions.json

@@ -0,0 +1,175 @@
+{
+  "versions": {
+    "0.0.1": {
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.1",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "e7e4ea74f20331dfde0a7133a02b5b95d68696a9",
+      "_id": "@verdaccio/local-storage@0.0.1",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-J7qeK3r6jbaMOf4mBIqL1bAdb7Iwb+mC4ZaE9PUE2TctzXSkRRnk2M33zWGhZV0ziEPGAF40wC76wWex2GvXeA==",
+        "shasum": "9c71cbeeb922b35efc1b31949d0afa6aac97e9b6",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.1.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.1.tgz_1502536792670_0.3513342353980988"
+      },
+      "directories": {}
+    },
+    "0.0.2": {
+      "deprecated": "this package is deprecated",
+      "name": "@verdaccio/local-storage",
+      "version": "0.0.2",
+      "description": "local storage implementation",
+      "main": "lib/index.js",
+      "scripts": {
+        "test": "npm run lint && mocha --require babel-polyfill  --compilers js:babel-core/register ./test/**/*.spec.js",
+        "lint": "eslint .",
+        "flow": "flow",
+        "build": "babel src/ --out-dir lib/ --copy-files",
+        "cover": "cross-env NODE_ENV=test nyc npm t"
+      },
+      "dependencies": {
+        "@verdaccio/file-locking": "^0.0.3",
+        "@verdaccio/streams": "^0.0.2",
+        "async": "2.5.0",
+        "http-errors": "1.4.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1"
+      },
+      "devDependencies": {
+        "@verdaccio/types": "0.0.2",
+        "babel-cli": "6.24.1",
+        "babel-core": "6.25.0",
+        "babel-eslint": "^7.2.3",
+        "babel-plugin-istanbul": "4.1.4",
+        "babel-polyfill": "6.23.0",
+        "babel-preset-es2015": "6.24.1",
+        "babel-preset-es2015-node4": "2.1.0",
+        "babel-preset-flow": "6.23.0",
+        "babel-plugin-transform-inline-imports-commonjs": "1.0.0",
+        "babel-plugin-array-includes": "2.0.3",
+        "babel-plugin-transform-runtime": "6.4.3",
+        "cross-env": "5.0.5",
+        "eslint": "4.4.1",
+        "eslint-config-google": "0.9.1",
+        "eslint-plugin-flowtype": "2.35.0",
+        "flow-bin": "0.52.0",
+        "mocha": "3.5.0",
+        "nyc": "11.1.0"
+      },
+      "nyc": {
+        "include": ["src/**/*.js"],
+        "all": true,
+        "cache": true,
+        "sourceMap": false,
+        "instrument": false,
+        "report-dir": "./tests-report",
+        "reporter": ["text", "html"]
+      },
+      "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+      },
+      "keywords": ["streams"],
+      "author": {
+        "name": "Juan Picado",
+        "email": "juanpicado19@gmail.com"
+      },
+      "private": false,
+      "license": "MIT",
+      "gitHead": "626ea013ee810da9115550e0a60f44aa3d08e9a0",
+      "_id": "@verdaccio/local-storage@0.0.2",
+      "_npmVersion": "5.3.0",
+      "_nodeVersion": "8.2.1",
+      "_npmUser": {
+        "name": "jotadeveloper",
+        "email": "juanpicado19@gmail.com"
+      },
+      "dist": {
+        "integrity": "sha512-Su0cQpLAaBab3qekpcHO+J/JCfoznTuU0P7e5q9T7R2trGVobYXvsTiIB/usQNmDr2e+1N6iBhMst7Uy+231ag==",
+        "shasum": "fe79ad6f9ceb631857618038486f729098e7b31b",
+        "tarball": "http://localhost:4872/@verdaccio%2flocal-storage/-/local-storage-0.0.2.tgz"
+      },
+      "maintainers": [
+        {
+          "name": "jotadeveloper",
+          "email": "juanpicado19@gmail.com"
+        }
+      ],
+      "_npmOperationalInternal": {
+        "host": "s3://npm-registry-packages",
+        "tmp": "tmp/local-storage-0.0.2.tgz_1502611253150_0.21545960218645632"
+      },
+      "directories": {}
+    }
+  }
+}

package/src/index.ts

@@ -1,6 +1,5 @@
 export { default as CopyClipboard, copyToClipBoardUtility } from './components/CopyClipboard';
 export * from './components/CopyClipboard';
-export { Link } from './components/Link';
 export { default as ActionBar } from './components/ActionBar';
 export { default as Author } from './components/Author';
 export { default as Dependencies } from './components/Dependencies';
@@ -12,9 +11,13 @@ export { default as FundButton } from './components/FundButton';
 export { default as Heading } from './components/Heading';
 export * as Icons from './components/Icons';
 export { default as Install } from './components/Install';
+export { default as Keywords } from './components/Keywords';
+export { default as Link } from './components/Link';
+export { default as LinkExternal } from './components/LinkExternal';
 export { default as RawViewer } from './components/RawViewer';
+export { default as Person } from './components/Person';
 export { default as Readme } from './components/Readme';
-export { default as SideBarTitle } from './components/SideBarTittle';
+export { default as SideBarTitle } from './components/SideBarTitle';
 export { default as UpLinks } from './components/UpLinks';
 export { default as Versions } from './components/Versions';
 export { default as TextField } from './components/TextField';
@@ -22,6 +25,7 @@ export { default as Label } from './components/Label';
 export { default as Logo } from './components/Logo';
 export { default as MenuItem } from './components/MenuItem';
 export { default as NotFound } from './components/NotFound';
+export { default as Forbidden } from './components/Forbidden';
 export { default as LoginDialog } from './components/LoginDialog';
 export { default as Search } from './components/Search';
 export { default as HeaderInfoDialog } from './components/HeaderInfoDialog';

package/src/providers/AppConfigurationProvider/AppConfigurationProvider.tsx

@@ -28,6 +28,8 @@ const defaultValues: ConfigProviderProps = {
     showSearch: true,
     showRaw: true,
     showDownloadTarball: true,
+    showUplinks: true,
+    hideDeprecatedVersions: false,
     title: 'Verdaccio',
   },
 };

package/src/providers/PersistenceSettingProvider/PersistenceSettingProvider.tsx

@@ -10,11 +10,15 @@ import React, {
 import useLocalStorage from '../../hooks/useLocalStorage';
 
 type PersistenceSettingsProps = {
+  isLatest?: boolean;
   isGlobal?: boolean;
+  yarnModern: boolean;
 };
 
 const defaultValues: PersistenceSettingsProps = {
+  isLatest: false,
   isGlobal: false,
+  yarnModern: false,
 };
 
 const PersistenceSettingContext = createContext<any>(defaultValues);

package/src/providers/VersionProvider/VersionProvider.test.tsx

@@ -30,7 +30,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should load data from the provider', async () => {
-    await act(async () => {
+    act(() =>
       renderWithStore(
         <MemoryRouter initialEntries={[`/-/web/detail/storybook`]}>
           <Route path={Routes.PACKAGE}>
@@ -40,8 +40,8 @@ describe('<Header /> component with logged in state', () => {
           </Route>
         </MemoryRouter>,
         store
-      );
-    });
+      )
+    );
     await waitFor(() => screen.getByText('storybook'));
     expect(screen.getByText('storybook')).toBeInTheDocument();
     expect(screen.getByText('MIT')).toBeInTheDocument();

package/src/sections/Detail/Detail.stories.tsx

@@ -27,3 +27,13 @@ export const DetailJquery: any = () => (
     </Route>
   </MemoryRouter>
 );
+
+export const DetailForbidden: any = () => (
+  <MemoryRouter initialEntries={[`/-/web/detail/JSONStream`]}>
+    <Route exact={true} path="/-/web/detail/:package">
+      <VersionProvider>
+        <Detail />
+      </VersionProvider>
+    </Route>
+  </MemoryRouter>
+);

package/src/sections/Detail/Detail.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import DetailContainer from './Detail';
 
 describe('DetailContainer', () => {
@@ -8,5 +8,12 @@ describe('DetailContainer', () => {
     const { container } = render(<DetailContainer />);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('renders without uplinks', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.showUplinks = false;
+    render(<DetailContainer />);
+    expect(screen.queryByTestId('uplinks-tab')).toBeFalsy();
+  });
+
   test.todo('should test click on tabs');
 });

package/src/sections/Detail/Detail.tsx

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
 import React, { useState } from 'react';
 
 import Deprecated from '../../components/Deprecated';
-import { useVersion } from '../../providers';
+import { useConfig, useVersion } from '../../providers';
 import ContainerContent from './ContainerContent';
 import Tabs from './Tabs';
 
@@ -14,7 +14,10 @@ export enum TabPosition {
 }
 
 const DetailContainer: React.FC = () => {
-  const tabs = Object.values(TabPosition);
+  const { configOptions } = useConfig();
+  const tabs = configOptions.showUplinks
+    ? Object.values(TabPosition)
+    : Object.values(TabPosition).filter((tab) => tab !== TabPosition.UPLINKS);
   const [tabPosition, setTabPosition] = useState(0);
   const { readMe, packageMeta } = useVersion();
 
@@ -23,8 +26,12 @@ const DetailContainer: React.FC = () => {
   };
 
   return (
-    <Box component="div" display="flex" flexDirection="column" padding={2}>
-      <Tabs onChange={handleChange} tabPosition={tabPosition} />
+    <Box component="div" display="flex" flexDirection="column" padding={0}>
+      <Tabs
+        onChange={handleChange}
+        showUplinks={configOptions.showUplinks}
+        tabPosition={tabPosition}
+      />
       {packageMeta?.latest?.deprecated && <Deprecated message={packageMeta?.latest?.deprecated} />}
       <ContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
     </Box>