feat: add deprecation label to redoc-cli (#2172)

---------

Co-authored-by: Adam Altman <adam@redoc.ly>

README.md

@@ -84,7 +84,7 @@ Refer to the Redocly's documentation for more information on these products:
 - [Simple integration with `create-react-app`](https://redocly.com/docs/redoc/quickstart/react/)
 
   [Example repo](https://github.com/APIs-guru/create-react-app-redoc)
-- [Command-line interface to bundle your docs into a **zero-dependency** HTML file](https://redoc.ly/docs/redoc/quickstart/cli/)
+- [Command-line interface to bundle your docs into a **zero-dependency** HTML file](https://redocly.com/docs/cli/commands/build-docs/)
 - Neat **interactive** documentation for nested objects <br>
   ![](docs/images/nested-demo.gif)
 

cli/README.md

@@ -1,5 +1,7 @@
 # redoc-cli
 
+**DEPRECATED: this package is deprecated. Use `npx @redocly/cli build-docs <api>` instead.**
+
 **[ReDoc](https://github.com/Redocly/redoc)'s Command Line Interface**
 
 ## Installation

cli/index.ts

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 /* tslint:disable:no-implicit-dependencies */
-import * as React from 'react';
+import { createElement } from 'react';
-import * as updateNotifier from 'update-notifier';
 import { renderToString } from 'react-dom/server';
 import { ServerStyleSheet } from 'styled-components';
 
@@ -10,6 +9,7 @@ import { createServer, IncomingMessage, ServerResponse } from 'http';
 import { dirname, join, resolve, extname as getExtName } from 'path';
 
 import * as zlib from 'zlib';
+import * as boxen from 'boxen';
 
 // @ts-ignore
 import { createStore, loadAndBundleSpec, Redoc } from 'redoc';
@@ -66,6 +66,14 @@ export const mimeTypes = {
 
 const BUNDLES_DIR = dirname(require.resolve('redoc'));
 
+const boxenOptions = {
+  title: 'DEPRECATED',
+  titleAlignment: 'center',
+  padding: 1,
+  margin: 1,
+  borderColor: 'red',
+} as boxen.Options;
+
 const builderForBuildCommand = yargs => {
   yargs.positional('spec', {
     describe: 'path or URL to your spec',
@@ -112,7 +120,6 @@ const handlerForBuildCommand = async (argv: any) => {
   };
 
   try {
-    notifyUpdateCliVersion();
     await bundle(argv.spec, config);
   } catch (e) {
     handleError(e);
@@ -121,7 +128,7 @@ const handlerForBuildCommand = async (argv: any) => {
 
 YargsParser.command(
   'serve <spec>',
-  'start the server',
+  'start the server [deprecated]',
   yargs => {
     yargs.positional('spec', {
       describe: 'path or URL to your spec',
@@ -176,7 +183,6 @@ YargsParser.command(
     };
 
     try {
-      notifyUpdateCliVersion();
       await serve(argv.host as string, argv.port as number, argv.spec as string, config);
     } catch (e) {
       handleError(e);
@@ -184,30 +190,31 @@ YargsParser.command(
   },
   [
     res => {
-      console.log(
+      console.log(`
-        `\n⚠️ This command is deprecated. Use "npx @redocly/cli preview-docs petstore.yaml"\n`,
+        ${boxen(
-      );
+          'This package is deprecated.\n\nUse `npx @redocly/cli preview-docs <api>` instead.',
+          boxenOptions,
+        )}`);
       return res;
     },
   ],
+  true,
 )
   .command(
     'build <spec>',
-    'build definition into zero-dependency HTML-file',
+    'build definition into zero-dependency HTML-file [deprecated]',
     builderForBuildCommand,
     handlerForBuildCommand,
+    [notifyDeprecation],
+    true,
   )
   .command(
     'bundle <spec>',
     'bundle spec into zero-dependency HTML-file [deprecated]',
     builderForBuildCommand,
     handlerForBuildCommand,
-    [
+    [notifyDeprecation],
-      res => {
+    true,
-        console.log(`\n⚠️ This command is deprecated. Use "build" command instead.\n`);
-        return res;
-      },
-    ],
   )
   .demandCommand()
   .options('t', {
@@ -344,7 +351,7 @@ async function getPageHTML(
     const store = await createStore(spec, specUrl, redocOptions);
     const sheet = new ServerStyleSheet();
     // @ts-ignore
-    html = renderToString(sheet.collectStyles(React.createElement(Redoc, { store })));
+    html = renderToString(sheet.collectStyles(createElement(Redoc, { store })));
     css = sheet.getStyleTags();
     state = await store.toJS();
 
@@ -472,15 +479,12 @@ function getObjectOrJSON(options) {
   }
 }
 
-function notifyUpdateCliVersion() {
+function notifyDeprecation(res: YargsParser.Arguments): YargsParser.Arguments {
-  const pkg = require('./package.json');
+  console.log(
-  const notifier = updateNotifier({
+    boxen(
-    pkg,
+      'This package is deprecated.\n\nUse `npx @redocly/cli build-docs <api>` instead.',
-    updateCheckInterval: 0,
+      boxenOptions,
-    shouldNotifyInNpmScript: true,
+    ),
-  });
+  );
-  notifier.notify({
+  return res;
-    message:
-      'Run `{updateCommand}` to update.\nChangelog: https://github.com/Redocly/redoc/releases/tag/{latestVersion}',
-  });
 }

cli/package.json

@@ -11,6 +11,7 @@
     "node": ">=12.0.0"
   },
   "dependencies": {
+    "boxen": "5.1.2",
     "chokidar": "^3.5.1",
     "handlebars": "^4.7.7",
     "mkdirp": "^1.0.4",
@@ -20,7 +21,6 @@
     "react-dom": "^17.0.1",
     "redoc": "2.0.0-rc.77",
     "styled-components": "^5.3.0",
-    "update-notifier": "^5.0.1",
     "yargs": "^17.3.1"
   },
   "publishConfig": {

e2e/integration/search.e2e.ts

@@ -1,7 +1,7 @@
 describe('Search', () => {
   const getSearchInput = () => cy.get('[role="search"] input');
   const getSearchResults = () => cy.get('[data-role="search:results"]');
-  const getResult = i => cy.get('[role=search] [role=menuitem]').eq(i);
+  const getResult = i => cy.get('[role=search] label').eq(i);
 
   beforeEach(() => {
     cy.visit('e2e/standalone.html');
@@ -45,7 +45,7 @@ describe('Search', () => {
 
     getSearchInput().type('{enter}', { force: true });
 
-    cy.contains('[role=menu] [role=menuitem]', 'Introduction').should('have.class', 'active');
+    cy.contains('[role=menu] label', 'Introduction').should('have.class', 'active');
   });
 
   it('should mark search results', () => {