feat: api provider and config provider

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": [
     "@verdaccio",
+    "prettier",
     "plugin:react/recommended",
     "plugin:jest/recommended",
     "plugin:prettier/recommended",

jest/jest.config.js

@@ -28,6 +28,7 @@ module.exports = {
     // note: this section has to be on sync with webpack configuration
     'verdaccio-ui/components/(.*)': '<rootDir>/src/components/$1',
     'verdaccio-ui/utils/(.*)': '<rootDir>/src/utils/$1',
+    'verdaccio-ui/providers/(.*)': '<rootDir>/src/providers/$1',
     'verdaccio-ui/design-tokens/(.*)': '<rootDir>/src/design-tokens/$1',
   },
 };

package.json

@@ -90,11 +90,11 @@
     "emotion": "10.0.27",
     "emotion-theming": "10.0.27",
     "eslint": "7.15.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-codeceptjs": "1.3.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.2.0",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-verdaccio": "9.6.1",
@@ -212,11 +212,9 @@
   },
   "lint-staged": {
     "*.{js,tsx,ts}": [
-      "eslint . --ext .js,.ts,.tsx",
-      "prettier --write"
+      "eslint . --ext .js,.ts,.tsx"
     ],
     "*": [
-      "detect-secrets-launcher --baseline .secrets-baseline --word-list",
       "git add"
     ]
   },

partials/storage/jquery/package.json

@@ -4981,7 +4981,7 @@
 			"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
 		}
 	},
-	"_rev": "61-e6be890a78963127",
+	"_rev": "62-040142a7508cf597",
 	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
 	"_id": "jquery"
-}
+}

src/App/App.test.tsx

@@ -30,7 +30,7 @@ jest.mock('verdaccio-ui/utils/storage', () => {
   return new LocalStorageMock();
 });
 
-jest.mock('verdaccio-ui/utils/api', () => ({
+jest.mock('verdaccio-ui/providers/API/api', () => ({
   // eslint-disable-next-line jest/no-mocks-import
   request: require('../../jest/unit/components/__mocks__/api').default.request,
 }));

src/App/App.tsx

@@ -35,7 +35,7 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
-  const [user, setUser] = useState<undefined | { username: string }>();
+  const [user, setUser] = useState<undefined | { username: string | null }>();
   /**
    * Logout user
    * Required by: <Header />

src/App/AppContext.ts

@@ -6,7 +6,7 @@ export interface AppProps {
 }
 
 export interface User {
-  username: string;
+  username: string | null;
 }
 
 export interface AppContextProps extends AppProps {

src/App/AppRoute.tsx

@@ -23,7 +23,7 @@ enum Route {
 
 export const history = createBrowserHistory({
   // @ts-ignore
-  basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
+  basename: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.url_prefix,
 });
 
 const AppRoute: React.FC = () => {
@@ -36,7 +36,7 @@ const AppRoute: React.FC = () => {
 
   const { user } = appContext;
 
-  const isUserLoggedIn = user && user.username;
+  const isUserLoggedIn = user?.username;
 
   return (
     <Router history={history}>

src/App/Header/Header.tsx

@@ -52,7 +52,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
             onToggleLogin={() => setShowLoginModal(!showLoginModal)}
             onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
-            username={user && user.username}
+            username={user?.username}
             withoutSearch={withoutSearch}
           />
         </InnerNavBar>

src/App/Header/HeaderRight.tsx

@@ -11,7 +11,7 @@ import { RightSide } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
-  username?: string;
+  username?: string | null;
   onToggleLogin: () => void;
   onOpenRegistryInfoDialog: () => void;
   onToggleMobileNav: () => void;

src/App/Header/LoginDialog/LoginDialog.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import api from 'verdaccio-ui/utils/api';
+import api from 'verdaccio-ui/providers/API/api';
 import { render, waitFor, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import AppContext, { AppContextProps } from '../../AppContext';

src/App/Header/LoginDialog/LoginDialog.tsx

@@ -1,9 +1,12 @@
+import i18next from 'i18next';
+import isEmpty from 'lodash/isEmpty';
 import React, { useState, useContext, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Dialog from 'verdaccio-ui/components/Dialog';
 import DialogContent from 'verdaccio-ui/components/DialogContent';
-import { makeLogin, LoginError } from 'verdaccio-ui/utils/login';
+import { useAPI, LoginBody } from 'verdaccio-ui/providers/API/APIProvider';
+import { LoginError } from 'verdaccio-ui/utils/login';
 import storage from 'verdaccio-ui/utils/storage';
 
 import AppContext from '../../../App/AppContext';
@@ -20,6 +23,35 @@ interface Props {
 const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
   const { t } = useTranslation();
   const appContext = useContext(AppContext);
+  const { doLogin } = useAPI();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const makeLogin = useCallback(
+    async (username?: string, password?: string): Promise<LoginBody> => {
+      // checks isEmpty
+      if (isEmpty(username) || isEmpty(password)) {
+        const error = {
+          type: 'error',
+          description: i18next.t('form-validation.username-or-password-cant-be-empty'),
+        };
+        return { error };
+      }
+
+      try {
+        const response: LoginBody = await doLogin(username as string, password as string);
+
+        return response;
+      } catch (e) {
+        console.error('login error', e.message);
+        const error = {
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        };
+        return { error };
+      }
+    },
+    [doLogin]
+  );
 
   if (!appContext) {
     throw Error(t('app-context-not-correct-used'));
@@ -42,7 +74,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
         onClose();
       }
     },
-    [appContext, onClose]
+    [appContext, onClose, makeLogin]
   );
 
   return (

src/App/Header/Search/Search.test.tsx

@@ -2,15 +2,29 @@ import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import '@testing-library/jest-dom/extend-expect';
-import api from 'verdaccio-ui/utils/api';
+
+import api from 'verdaccio-ui/providers/API/api';
+import APIProvider from 'verdaccio-ui/providers/API/APIProvider';
+import AppConfigurationProvider from 'verdaccio-ui/providers/config';
 import { render, fireEvent, waitFor } from 'verdaccio-ui/utils/test-react-testing-library';
 
+jest.mock('lodash/debounce', () =>
+  jest.fn(fn => {
+    fn.cancel = jest.fn();
+    return fn;
+  })
+);
+
 import Search from './Search';
 
 /* eslint-disable verdaccio/jsx-spread */
 const ComponentToBeRendered: React.FC = () => (
   <Router>
-    <Search />
+    <AppConfigurationProvider>
+      <APIProvider>
+        <Search />
+      </APIProvider>
+    </AppConfigurationProvider>
   </Router>
 );
 

src/App/Header/Search/Search.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { RouteComponentProps, withRouter } from 'react-router';
 
 import AutoComplete from 'verdaccio-ui/components/AutoComplete';
-import { callSearch } from 'verdaccio-ui/utils/calls';
+import { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
 
 import SearchAdornment from './SearchAdornment';
 
@@ -23,6 +23,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   const [loading, setLoading] = useState(false);
   const mountedRef = useRef(true);
   const [requestList, setRequestList] = useState<Array<{ abort: () => void }>>([]);
+  const { callSearch } = useAPI();
 
   /**
    * Cancel all the requests which are in pending state.
@@ -138,7 +139,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
         }
       }
     },
-    [requestList, setRequestList, setSuggestions, setLoaded, setError, setLoading]
+    [requestList, setRequestList, setSuggestions, setLoaded, setError, setLoading, callSearch]
   );
 
   useEffect(() => {

src/components/ActionBar/ActionBarAction.tsx

@@ -2,17 +2,17 @@ import styled from '@emotion/styled';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
+import { extractFileName, downloadFile } from 'verdaccio-ui/utils/url';
 
 import FloatingActionButton from '../FloatingActionButton';
 import Link from '../Link';
 import Tooltip from '../Tooltip';
 
-import downloadTarball from './download-tarball';
-
 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
@@ -33,6 +33,14 @@ export interface ActionBarActionProps {
 /* eslint-disable react/jsx-no-bind */
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
   const { t } = useTranslation();
+  const { getResource } = useAPI();
+
+  const handleDownload = useCallback(async () => {
+    const fileStream = await getResource(link);
+    const fileName = extractFileName(link);
+    downloadFile(fileStream, fileName);
+  }, [getResource, link]);
+
   switch (type) {
     case 'VISIT_HOMEPAGE':
       return (
@@ -57,7 +65,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
     case 'DOWNLOAD_TARBALL':
       return (
         <Tooltip title={t('action-bar-action.download-tarball')}>
-          <Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
+          <Fab data-testid="download-tarball-btn" onClick={handleDownload} size="small">
             <DownloadIcon />
           </Fab>
         </Tooltip>

src/components/ActionBar/index.ts

@@ -1,2 +1 @@
 export { default } from './ActionBar';
-export { default as downloadTarball } from './download-tarball';

src/index.tsx

@@ -4,18 +4,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 
+import APIProvider from 'verdaccio-ui/providers/API/APIProvider';
+import AppConfigurationContext from 'verdaccio-ui/providers/config';
+
 import App from './App';
 import StyleBaseline from './design-tokens/StyleBaseline';
 import ThemeProvider from './design-tokens/ThemeProvider';
 
 const rootNode = document.getElementById('root');
-
 const renderApp = (Component: React.ElementType): void => {
   ReactDOM.render(
     <AppContainer>
       <ThemeProvider>
         <StyleBaseline />
-        <Component />
+        <AppConfigurationContext>
+          <APIProvider>
+            <Component />
+          </APIProvider>
+        </AppConfigurationContext>
       </ThemeProvider>
     </AppContainer>,
     rootNode