feat: rework web header for mobile, add new settings and raw manifest button (verdaccio#3129)

* feat: rework header, dialogs and new raw mode

* chore: add test for raw button and hide download tarball

* chore: add test hide footer

* chore: add docs to config files

* chore: add changeset

* chore: enable raw by default

Author: juanpicado

.changeset/orange-flowers-cover.md

@@ -0,0 +1,43 @@
+---
+'@verdaccio/config': minor
+'@verdaccio/types': minor
+'@verdaccio/ui-theme': minor
+---
+
+feat: rework web header for mobile, add new settings and raw manifest button
+
+### New set of variables to hide features
+
+Add set of new variables that allow hide different parts of the UI, buttons, footer or download tarballs. _All are
+enabled by default_.
+
+```yaml
+# login: true <-- already exist but worth the reminder
+# showInfo: true
+# showSettings: true
+# In combination with darkMode you can force specific theme
+# showThemeSwitch: true
+# showFooter: true
+# showSearch: true
+# showDownloadTarball: true
+```
+
+> If you disable `showThemeSwitch` and force `darkMode: true` the local storage settings would be
+> ignored and force all themes to the one in the configuration file.
+
+Future could be extended to
+
+### Raw button to display manifest package
+
+A new experimental feature (enabled by default), button named RAW to be able navigate on the package manifest directly on the ui, kudos to [react-json-view](https://www.npmjs.com/package/react-json-view) that allows an easy integration, not configurable yet until get more feedback.
+
+```yaml
+showRaw: true
+```
+
+#### Rework header buttons
+
+- The header has been rework, the mobile was not looking broken.
+- Removed info button in the header and moved to a dialog
+- Info dialog now contains more information about the project, license and the aid content for Ukrania now is inside of the info modal.
+- Separate settings and info to avoid collapse too much info (for mobile still need some work)

packages/config/src/conf/default.yaml

@@ -20,6 +20,16 @@ web:
   # convert your UI to the dark side
   # darkMode: true
   # html_cache: true
+  # by default all features are displayed
+  # login: true
+  # showInfo: true
+  # showSettings: true
+  # In combination with darkMode you can force specific theme
+  # showThemeSwitch: true
+  # showFooter: true
+  # showSearch: true
+  # showRaw: true
+  # showDownloadTarball: true
   #  HTML tags injected after manifest <scripts/>
   # scriptsBodyAfter:
   #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'

packages/config/src/conf/docker.yaml

@@ -26,6 +26,16 @@ web:
   # convert your UI to the dark side
   # darkMode: true
   # html_cache: true
+  # by default all features are displayed
+  # login: true
+  # showInfo: true
+  # showSettings: true
+  # In combination with darkMode you can force specific theme
+  # showThemeSwitch: true
+  # showFooter: true
+  # showSearch: true
+  # showRaw: true
+  # showDownloadTarball: true
   #  HTML tags injected after manifest <scripts/>
   # scriptsBodyAfter:
   #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'

packages/core/types/index.d.ts

@@ -43,6 +43,13 @@ declare module '@verdaccio/types' {
     // deprecated
     basename?: string;
     scope?: string;
+    showInfo?: boolean;
+    showSettings?: boolean;
+    showSearch?: boolean;
+    showFooter?: boolean;
+    showThemeSwitch?: boolean;
+    showDownloadTarball?: boolean;
+    showRaw?: boolean;
     base: string;
     primaryColor?: string;
     version?: string;

packages/plugins/ui-theme/jest/jest.config.js

@@ -30,6 +30,7 @@ module.exports = Object.assign({}, config, {
     '\\.(png)$': '<rootDir>/jest/identity.js',
     '\\.(svg)$': '<rootDir>/jest/unit/empty.ts',
     '\\.(jpg)$': '<rootDir>/jest/unit/empty.ts',
+    '\\.(md)$': '<rootDir>/jest/unit/empty-string.ts',
     'github-markdown-css': '<rootDir>/jest/identity.js',
     // note: this section has to be on sync with webpack configuration
     'verdaccio-ui/components/(.*)': '<rootDir>/src/components/$1',

packages/plugins/ui-theme/jest/unit/empty-string.ts

@@ -0,0 +1 @@
+export default 'empty string module';

packages/plugins/ui-theme/package.json

@@ -57,6 +57,7 @@
     "node-mocks-http": "1.11.0",
     "normalize.css": "8.0.1",
     "react-markdown": "8.0.0",
+    "react-json-view": "1.21.3",
     "remark-gfm": "3.0.1",
     "optimize-css-assets-webpack-plugin": "6.0.1",
     "ora": "5.4.1",
@@ -71,6 +72,7 @@
     "react-redux": "7.2.6",
     "redux": "4.1.2",
     "rimraf": "3.0.2",
+    "raw-loader": "4.0.2",
     "msw": "0.36.5",
     "style-loader": "3.3.1",
     "stylelint": "14.6.0",

packages/plugins/ui-theme/src/App/App.test.tsx

@@ -118,4 +118,19 @@ describe('<App />', () => {
       expect(store.getState().packages.response).toHaveLength(1);
     }, 10000);
   });
+
+  describe('footer', () => {
+    test('should display the Header component', () => {
+      renderWithStore(<App />, store);
+      expect(screen.getByTestId('footer')).toBeInTheDocument();
+    });
+
+    test('should not display the Header component', () => {
+      window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+        showFooter: false,
+      };
+      renderWithStore(<App />, store);
+      expect(screen.queryByTestId('footer')).toBeFalsy();
+    });
+  });
 });

packages/plugins/ui-theme/src/App/App.tsx

@@ -7,6 +7,7 @@ import Loading from 'verdaccio-ui/components/Loading';
 import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline';
 import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useConfig } from 'verdaccio-ui/providers/config';
 
 import '../i18n/config';
 import AppRoute, { history } from './AppRoute';
@@ -27,10 +28,11 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 }));
 
 const App: React.FC = () => {
+  const { configOptions } = useConfig();
+
   useEffect(() => {
     loadDayJSLocale();
   }, []);
-
   return (
     <Suspense fallback={<Loading />}>
       <StyleBaseline />
@@ -42,7 +44,7 @@ const App: React.FC = () => {
               <AppRoute />
             </StyledBoxContent>
           </Router>
-          <Footer />
+          {configOptions.showFooter && <Footer />}
         </>
       </StyledBox>
     </Suspense>

packages/plugins/ui-theme/src/App/Footer/Footer.tsx

@@ -18,7 +18,7 @@ const Footer = () => {
   const { t } = useTranslation();
   const { configOptions } = useConfig();
   return (
-    <Wrapper>
+    <Wrapper data-testid="footer">
       <Inner>
         <Left>
           <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />