chore(release): 0.3.11

* fix: remove prevent default and use react context

* chore: remove string check

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.11](https://github.com/verdaccio/ui/compare/v0.3.10...v0.3.11) (2020-01-08)
+
+
+### Bug Fixes
+
+* remove prevent default and use react context ([#411](https://github.com/verdaccio/ui/issues/411)) ([6bd38b8](https://github.com/verdaccio/ui/commit/6bd38b812032857bb19af8978d48f6f8969af6cf))
+* removed unused style file ([#406](https://github.com/verdaccio/ui/issues/406)) ([6eeae63](https://github.com/verdaccio/ui/commit/6eeae630ef441a871d06b888b6a21178e36e0db7))
+
 ### [0.3.10](https://github.com/verdaccio/ui/compare/v0.3.9...v0.3.10) (2019-12-30)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",
@@ -30,7 +30,7 @@
     "@types/js-base64": "2.3.1",
     "@types/lodash": "4.14.149",
     "@types/node": "12.12.21",
-    "@types/react": "16.9.16",
+    "@types/react": "16.9.17",
     "@types/react-autosuggest": "9.3.13",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "5.1.3",
@@ -85,7 +85,7 @@
     "localstorage-memory": "1.0.3",
     "lockfile-lint": "3.0.3",
     "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "0.8.2",
+    "mini-css-extract-plugin": "0.9.0",
     "mutationobserver-shim": "0.3.3",
     "node-mocks-http": "1.8.1",
     "normalize.css": "8.0.1",
@@ -105,7 +105,7 @@
     "rimraf": "3.0.0",
     "source-map-loader": "0.2.4",
     "standard-version": "7.0.1",
-    "style-loader": "1.0.2",
+    "style-loader": "1.1.2",
     "stylelint": "12.0.0",
     "stylelint-config-recommended": "3.0.0",
     "stylelint-config-styled-components": "0.1.1",
@@ -125,7 +125,7 @@
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-bundle-size-analyzer": "3.1.0",
     "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.9.0",
+    "webpack-dev-server": "3.10.1",
     "webpack-merge": "4.2.2",
     "whatwg-fetch": "3.0.0",
     "xss": "1.0.6"

src/App/styles.ts

@@ -1,18 +0,0 @@
-import { css } from '@emotion/core';
-
-import { theme } from '../design-tokens/theme';
-
-export const alertError = css({
-  backgroundColor: `${theme.palette.red} !important`,
-  minWidth: 'inherit !important',
-});
-
-export const alertErrorMsg = css({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const alertIcon = css({
-  opacity: 0.9,
-  marginRight: '8px',
-});

src/components/DetailSidebar/DetailSidebar.tsx

@@ -38,7 +38,7 @@ const DetailSidebar: React.FC = () => {
       />
       <ActionBar />
       <Install />
-      {packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
+      <DetailSidebarFundButton />
       <Repository />
       <Engines />
       <Dist />

src/components/DetailSidebar/DetailSidebarFundButton.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { render } from '../../utils/test-react-testing-library';
+import { DetailContext, DetailContextProps } from '../../pages/Version';
+
+import DetailSidebarFundButton from './DetailSidebarFundButton';
+
+const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({ contextValue }) => (
+  <DetailContext.Provider value={contextValue}>
+    <DetailSidebarFundButton />
+  </DetailContext.Provider>
+);
+
+const detailContextValue: DetailContextProps = {
+  packageName: 'foo',
+  readMe: 'test',
+  enableLoading: () => {},
+  isLoading: false,
+  hasNotBeenFound: false,
+  packageMeta: {
+    _uplinks: {},
+    latest: {
+      name: '@verdaccio/local-storage',
+      version: '8.0.1-next.1',
+      dist: { fileCount: 0, unpackedSize: 0, tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz' },
+      homepage: 'https://verdaccio.org',
+      bugs: {
+        url: 'https://github.com/verdaccio/monorepo/issues',
+      },
+    },
+  },
+};
+
+describe('test DetailSidebarFundButton', () => {
+  test('should not display the button if fund is missing', () => {
+    const wrapper = render(<ComponentToBeRendered contextValue={detailContextValue} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is missing', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {},
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not a string', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: null,
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should not display the button if url is not an url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'somethign different as url',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.queryByText('Fund')).toBeNull();
+  });
+
+  test('should display the button if url is a valid url', () => {
+    const value = _.merge(detailContextValue, {
+      packageMeta: {
+        latest: {
+          funding: {
+            url: 'https://opencollective.com/verdaccio',
+          },
+        },
+      },
+    });
+
+    const wrapper = render(<ComponentToBeRendered contextValue={value} />);
+
+    expect(wrapper.getByText('Fund')).toBeTruthy();
+  });
+});

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,10 +1,12 @@
-import React, { MouseEvent } from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
 
 import Button from '../../muiComponents/Button';
 import Link from '../Link';
+import { isURL } from '../../utils/url';
 import { Theme } from '../../design-tokens/theme';
+import { DetailContext } from '../../pages/Version';
 
 const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
   marginTop: theme && theme.spacing(1),
@@ -21,21 +23,21 @@ const StyledFundStrong = styled('strong')({
   marginRight: 3,
 });
 
-interface Props {
-  to: string;
-}
-
 /* eslint-disable react/jsx-no-bind */
-const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
-  const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
+const DetailSidebarFundButton: React.FC = () => {
+  const detailContext = useContext(DetailContext);
+
+  const { packageMeta } = detailContext;
+
+  const fundingUrl = packageMeta?.latest?.funding?.url as string;
+
+  if (!isURL(fundingUrl)) {
+    return null;
+  }
+
   return (
-    <StyledLink external={true} to={to}>
-      <Button
-        color="primary"
-        fullWidth={true}
-        onClick={preventDefault}
-        startIcon={<StyledFavoriteIcon />}
-        variant="outlined">
+    <StyledLink external={true} to={fundingUrl}>
+      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
         <StyledFundStrong>{'Fund'}</StyledFundStrong>
         {'this package'}
       </Button>

yarn.lock

@@ -1977,10 +1977,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.9.16":
-  version "16.9.16"
-  resolved "https://registry.verdaccio.org/@types%2freact/-/react-16.9.16.tgz#4f12515707148b1f53a8eaa4341dae5dfefb066d"
-  integrity sha512-dQ3wlehuBbYlfvRXfF5G+5TbZF3xqgkikK7DWAsQXe2KnzV+kjD4W2ea+ThCrKASZn9h98bjjPzoTYzfRqyBkw==
+"@types/react@*", "@types/react@16.9.17":
+  version "16.9.17"
+  resolved "https://registry.verdaccio.org/@types%2freact/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
+  integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -9130,10 +9130,10 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loglevel@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.verdaccio.org/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56"
-  integrity sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g==
+loglevel@^1.6.6:
+  version "1.6.6"
+  resolved "https://registry.verdaccio.org/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
+  integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
 
 longest-streak@^2.0.1:
   version "2.0.3"
@@ -9500,10 +9500,10 @@ mini-create-react-context@^0.3.0:
     gud "^1.0.0"
     tiny-warning "^1.0.2"
 
-mini-css-extract-plugin@0.8.2:
-  version "0.8.2"
-  resolved "https://registry.verdaccio.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz#a875e169beb27c88af77dd962771c9eedc3da161"
-  integrity sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==
+mini-css-extract-plugin@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.verdaccio.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
+  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "1.9.1"
@@ -13131,10 +13131,10 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.verdaccio.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-style-loader@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.verdaccio.org/style-loader/-/style-loader-1.0.2.tgz#433d72eab8d1dd7d64c648b8ad7d9cbff3184111"
-  integrity sha512-xehHGWeCPrr+R/bU82To0j7L7ENzH30RHYmMhmAumbuIpQ/bHmv3SAj1aTRfBSszkXoqNtpKnJyWXEDydS+KeA==
+style-loader@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.verdaccio.org/style-loader/-/style-loader-1.1.2.tgz#1b519c19faf548df6182b93e72ea1a4156022c2f"
+  integrity sha512-0Mpq1ZHFDCNq1F+6avNBgv+7q8V+mWRuzehxyJT+aKgzyN/yfKTwjYqaYwBgx+11UpQxL21zNQfzzlz+JcGURw==
   dependencies:
     loader-utils "^1.2.3"
     schema-utils "^2.0.1"
@@ -14294,10 +14294,10 @@ webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.9.0:
-  version "3.9.0"
-  resolved "https://registry.verdaccio.org/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
-  integrity sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==
+webpack-dev-server@3.10.1:
+  version "3.10.1"
+  resolved "https://registry.verdaccio.org/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz#1ff3e5cccf8e0897aa3f5909c654e623f69b1c0e"
+  integrity sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -14314,7 +14314,7 @@ webpack-dev-server@3.9.0:
     ip "^1.1.5"
     is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.4"
+    loglevel "^1.6.6"
     opn "^5.5.0"
     p-retry "^3.0.1"
     portfinder "^1.0.25"