feat: display deprecated packages

src/pages/Version/DetailSidebar/Deprecated/Deprecated.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render, cleanup, screen } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { DetailContextProvider } from '../../context';
+
+import Deprecated from './Deprecated';
+
+describe('test Deprecated', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const packageMeta = {
+    latest: {
+      packageName: 'foo',
+      version: '1.0.0',
+      deprecated: 'duuuude, this is deprecated',
+      maintainers: [],
+      contributors: [],
+    },
+  };
+
+  test('should render the deprecated message', () => {
+    render(
+      // @ts-ignore
+      <DetailContextProvider value={{ packageMeta }}>
+        <Deprecated message={packageMeta.latest.deprecated} />
+      </DetailContextProvider>
+    );
+
+    expect(screen.getByText('duuuude, this is deprecated')).toBeInTheDocument();
+  });
+});

src/pages/Version/DetailSidebar/Deprecated/Deprecated.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import React from 'react';
+
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const CardStyled = styled(Card)<{ theme?: Theme }>(({ theme }) => {
+  return {
+    marginTop: '1rem',
+    marginBottom: '1rem',
+    backgroundColor: theme?.palette?.error.light,
+    opacity: '0.9',
+    color: theme?.palette?.error.contrastText,
+    fontWeight: 'bold',
+  };
+});
+
+export type Props = {
+  message: string;
+};
+
+const Deprecated: React.FC<Props> = ({ message }) => {
+  return (
+    <CardStyled>
+      <CardContent>{message}</CardContent>
+    </CardStyled>
+  );
+};
+
+export default Deprecated;

src/pages/Version/DetailSidebar/Deprecated/index.ts

@@ -0,0 +1 @@
+export { default } from './Deprecated';

src/pages/Version/DetailSidebar/DetailSidebar.tsx

@@ -8,6 +8,7 @@ import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { DetailContext } from '..';
 
+import Deprecated from './Deprecated';
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 import DetailSidebarTitle from './DetailSidebarTitle';
 import Developers, { DeveloperType } from './Developers';
@@ -33,6 +34,7 @@ const DetailSidebar: React.FC = () => {
         packageName={packageName}
         version={packageVersion || packageMeta.latest.version}
       />
+      {packageMeta?.latest?.deprecated && <Deprecated message={packageMeta?.latest?.deprecated} />}
       <ActionBar />
       <Install />
       <DetailSidebarFundButton />

types/packageMeta.ts

@@ -4,6 +4,7 @@ export interface PackageMetaInterface {
   time?: Time;
   latest: {
     author?: Author;
+    deprecated?: string;
     name: string;
     dist: {
       fileCount: number;