From 4b065fa1d7562eacbf6303039c7cd83ea3cb6955 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Sat, 5 Dec 2020 12:53:11 -0800 Subject: [PATCH 01/22] Removes Fela in favor of styled components --- doc/architecture/API.md | 25 +++++++++++++ link-admin/package.json | 2 - link-admin/src/App.jsx | 27 -------------- link-admin/src/app/App.jsx | 26 +++++++++++++ link-admin/src/{ => app}/App.test.js | 0 link-admin/src/{ => app}/index.css | 0 link-admin/src/app/styledTheme.js | 5 +++ link-admin/src/components/layout/Padded.js | 10 ++--- link-admin/src/components/layout/Row.js | 10 ++--- link-admin/src/components/layout/Spacer.js | 8 ++-- link-admin/src/index.js | 3 +- .../src/pages/Landing/AdminTopBar/index.jsx | 37 ++++++++----------- .../pages/Landing/OrganizationList/index.jsx | 25 +++++-------- link-admin/src/pages/Landing/index.jsx | 4 +- link-admin/src/{Router => router}/index.jsx | 0 package.json | 5 +++ yarn.lock | 11 +----- 17 files changed, 103 insertions(+), 95 deletions(-) create mode 100644 doc/architecture/API.md delete mode 100644 link-admin/src/App.jsx create mode 100644 link-admin/src/app/App.jsx rename link-admin/src/{ => app}/App.test.js (100%) rename link-admin/src/{ => app}/index.css (100%) create mode 100644 link-admin/src/app/styledTheme.js rename link-admin/src/{Router => router}/index.jsx (100%) diff --git a/doc/architecture/API.md b/doc/architecture/API.md new file mode 100644 index 0000000..04b33a9 --- /dev/null +++ b/doc/architecture/API.md @@ -0,0 +1,25 @@ +Contacts + +Locations + +Phones + +Postal Addresses + +Programs + +Holiday Schedules + +Languages + +Services + +Organizations + +Physical Addresses + +Regular Schedules + +Taxonomies + +Eligibilities diff --git a/link-admin/package.json b/link-admin/package.json index c9d1a84..482e37f 100644 --- a/link-admin/package.json +++ b/link-admin/package.json @@ -24,14 +24,12 @@ "@zendeskgarden/react-typography": "^8.21.2", "axios": "^0.20.0", "connected-react-router": "^6.8.0", - "fela": "^11.3.1", "global": "^4.3.2", "link-rest-client": "^1.0.0", "lodash": "^4.17.20", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-fela": "^11.3.1", "react-redux": "^7.2.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", diff --git a/link-admin/src/App.jsx b/link-admin/src/App.jsx deleted file mode 100644 index 9db5b52..0000000 --- a/link-admin/src/App.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' - -import { Provider } from 'react-redux' -import { RendererProvider as FelaProvider } from 'react-fela' -import { createRenderer } from 'fela' - -import { ConnectedRouter } from 'connected-react-router' -import { ThemeProvider } from '@zendeskgarden/react-theming' - -import store, { history } from 'store' -import Router from 'Router' - -const renderer = createRenderer() - -const App = () => ( - - - - - - - - - -) - -export default App diff --git a/link-admin/src/app/App.jsx b/link-admin/src/app/App.jsx new file mode 100644 index 0000000..845ad2e --- /dev/null +++ b/link-admin/src/app/App.jsx @@ -0,0 +1,26 @@ +import React from 'react' + +import { Provider } from 'react-redux' + +import './index.css' +import styledTheme from './styledTheme' +import { ThemeProvider as StyledThemeProvider } from 'styled-components' +import { ThemeProvider as ZengardenThemeProvider } from '@zendeskgarden/react-theming' + +import { ConnectedRouter } from 'connected-react-router' +import store, { history } from 'store' +import Router from 'router' + +const App = () => ( + + + + + + + + + +) + +export default App diff --git a/link-admin/src/App.test.js b/link-admin/src/app/App.test.js similarity index 100% rename from link-admin/src/App.test.js rename to link-admin/src/app/App.test.js diff --git a/link-admin/src/index.css b/link-admin/src/app/index.css similarity index 100% rename from link-admin/src/index.css rename to link-admin/src/app/index.css diff --git a/link-admin/src/app/styledTheme.js b/link-admin/src/app/styledTheme.js new file mode 100644 index 0000000..2084404 --- /dev/null +++ b/link-admin/src/app/styledTheme.js @@ -0,0 +1,5 @@ +const theme = { + bg: "white" +} + +export default theme \ No newline at end of file diff --git a/link-admin/src/components/layout/Padded.js b/link-admin/src/components/layout/Padded.js index f9c27a1..814c456 100644 --- a/link-admin/src/components/layout/Padded.js +++ b/link-admin/src/components/layout/Padded.js @@ -1,8 +1,8 @@ -import { createComponent } from 'react-fela' +import styled from 'styled-components' -const Padded = createComponent(() => ({ - padding: '1rem 0 1rem 0', - display: 'flex' -})); +const Padded = styled.div` + padding: 1rem 0 1rem 0; + display: flex; +` export default Padded diff --git a/link-admin/src/components/layout/Row.js b/link-admin/src/components/layout/Row.js index 50030bd..07dbfd0 100644 --- a/link-admin/src/components/layout/Row.js +++ b/link-admin/src/components/layout/Row.js @@ -1,8 +1,8 @@ -import { createComponent } from 'react-fela' +import styled from 'styled-components' -const Row = createComponent(() => ({ - justifyContent: 'flex-start', - display: 'flex' -})); +const Row = styled.div` + justify-content: flex-start; + display: flex; +` export default Row diff --git a/link-admin/src/components/layout/Spacer.js b/link-admin/src/components/layout/Spacer.js index d606794..6dadf74 100644 --- a/link-admin/src/components/layout/Spacer.js +++ b/link-admin/src/components/layout/Spacer.js @@ -1,7 +1,7 @@ -import { createComponent } from 'react-fela' +import styled from 'styled-components' -const Spacer = createComponent(({ space }) => ({ - width: `${space}rem` -})) +const Spacer = styled.div` + width: ${props => props.space ? props.space : 1}rem; +` export default Spacer diff --git a/link-admin/src/index.js b/link-admin/src/index.js index a582512..383d89f 100644 --- a/link-admin/src/index.js +++ b/link-admin/src/index.js @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom' -import './index.css' -import App from './App' +import App from './app/App' import registerServiceWorker from './registerServiceWorker' ReactDOM.render(, document.getElementById('root')) diff --git a/link-admin/src/pages/Landing/AdminTopBar/index.jsx b/link-admin/src/pages/Landing/AdminTopBar/index.jsx index 8b5903a..3c9f55f 100644 --- a/link-admin/src/pages/Landing/AdminTopBar/index.jsx +++ b/link-admin/src/pages/Landing/AdminTopBar/index.jsx @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { createComponent, createComponentWithProxy } from 'react-fela' +import styled from 'styled-components' import { Button } from '@zendeskgarden/react-buttons' import { Field, Input } from '@zendeskgarden/react-forms' import { useNavigation } from 'components/Routing' @@ -34,30 +34,23 @@ const AdminTopBar = ({ tags }) => { ) } -const AdminTopBarContainer = createComponent(() => ({})) +const AdminTopBarContainer = styled.div`` -const SailorImage = createComponent( - () => ({ - bottom: '-.5rem', - position: 'relative', - zIndex: '-1', - }), - 'img', - ['src'] -) +const SailorImage = styled.img` + bottom: -0.5rem; + position: relative; + z-index: -1; +` -const NewButton = createComponentWithProxy( - () => ({ - alignSelf: 'flex-end', - }), - Button -) +const NewButton = styled(Button)` + align-self: flex-end; +` -const SearchBarContainer = createComponent(() => ({ - minWidth: '500px', - display: 'flex', - flexDirection: 'column', -})) +const SearchBarContainer = styled.div` + min-width: 500px; + display: flex; + flex-direction: column; +` AdminTopBar.propTypes = { tags: PropTypes.array.isRequired diff --git a/link-admin/src/pages/Landing/OrganizationList/index.jsx b/link-admin/src/pages/Landing/OrganizationList/index.jsx index 2f094e3..d57a73f 100644 --- a/link-admin/src/pages/Landing/OrganizationList/index.jsx +++ b/link-admin/src/pages/Landing/OrganizationList/index.jsx @@ -1,6 +1,5 @@ import React from 'react' import PropTypes from 'prop-types' -import { createComponent } from 'react-fela' import partial from 'lodash/partial' import { Table, @@ -48,17 +47,15 @@ const OrganizationList = ({ organizations }) => { { organization.updatedAt } - - - - + + ) @@ -100,10 +97,6 @@ const onMenuChange = (onEdit, onDelete, selectedKey) => { } } -const OverflowMenuPadding = createComponent(() => ({ - paddingEnd: '4px', -})) - OrganizationList.propTypes = { organizations: PropTypes.array.isRequired } diff --git a/link-admin/src/pages/Landing/index.jsx b/link-admin/src/pages/Landing/index.jsx index b353bcb..d69b542 100644 --- a/link-admin/src/pages/Landing/index.jsx +++ b/link-admin/src/pages/Landing/index.jsx @@ -1,6 +1,6 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import { createComponent } from 'react-fela' +import styled from 'styled-components' import { updateTaxonomyFilters } from 'store/landing' import { fetchOrganizations } from 'store/organizations' @@ -49,6 +49,6 @@ const Landing = () => { ) } -const Viewport = createComponent(() => {}) +const Viewport = styled.div`` export default Landing diff --git a/link-admin/src/Router/index.jsx b/link-admin/src/router/index.jsx similarity index 100% rename from link-admin/src/Router/index.jsx rename to link-admin/src/router/index.jsx diff --git a/package.json b/package.json index 7c29dbb..cf24cfb 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,10 @@ "homepage": "https://github.com/zendesk/link_platform#readme", "bugs": { "url": "https://github.com/zendesk/link_platform/issues" + }, + "proxy": { + "/api/*":{ + "target": "http://blomp.localhost:3000" + } } } diff --git a/yarn.lock b/yarn.lock index bbcbee1..b4897d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13123,7 +13123,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -13472,15 +13472,6 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== -react-fela@^11.3.1: - version "11.3.1" - resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-11.3.1.tgz#217cbb76319482d7c68025600d4d3a3f6b94817d" - integrity sha512-HxnDngHkd4DZySJZWi62fAOBS+AgM700purbK3ZYXXFcGuPYFUNcOxm21QE0sNmBJDYMI7zznORbhJ/MrMCQ4w== - dependencies: - fela-bindings "^11.3.1" - fela-dom "^11.3.1" - prop-types "^15.5.8" - react-helmet-async@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.6.tgz#11c15c74e79b3f66670c73779bef3e0e352b1d4e" From 3adee4e70e611a35021f731b19566fe2a88eb133 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Sat, 5 Dec 2020 13:45:51 -0800 Subject: [PATCH 02/22] Adds linter and enforces rules on existing files --- link-admin/.eslintrc.js | 87 +++++++++++ link-admin/package.json | 1 + link-admin/src/app/App.jsx | 2 + link-admin/src/app/App.test.js | 14 +- link-admin/src/app/styledTheme.js | 18 ++- .../src/components/DataDependentComponent.jsx | 25 +-- link-admin/src/components/Error.jsx | 17 ++- link-admin/src/components/Loading.jsx | 8 +- link-admin/src/components/Routing/Link.jsx | 24 +-- .../src/components/Routing/Redirect.jsx | 6 +- link-admin/src/components/Routing/index.js | 2 +- .../src/components/Routing/useNavigation.js | 4 +- link-admin/src/components/layout/Container.js | 14 ++ link-admin/src/lib/formatUrl.js | 12 +- link-admin/src/lib/formatUrl.test.js | 14 +- link-admin/src/pages/FourOhFour.jsx | 10 +- .../AdminTopBar/AdminTopBar.stories.js | 10 +- .../Landing/AdminTopBar/AdminTopBar.test.js | 6 +- .../src/pages/Landing/AdminTopBar/index.jsx | 12 +- .../Landing/OrganizationList/OverflowMenu.jsx | 15 +- .../pages/Landing/OrganizationList/index.jsx | 6 +- .../pages/Landing/Taxonomy/Taxonomy.test.js | 22 +-- .../src/pages/Landing/Taxonomy/index.jsx | 8 +- link-admin/src/pages/Landing/actions.js | 2 +- link-admin/src/pages/Landing/index.jsx | 10 +- link-admin/src/pages/Landing/reducer.js | 8 +- .../Organization/AddOrganization/index.jsx | 10 +- .../pages/Organization/OrganizationForm.jsx | 4 +- .../src/pages/Organization/Tabs/index.jsx | 10 +- link-admin/src/pages/Organization/actions.js | 2 +- link-admin/src/pages/Organization/index.jsx | 2 +- link-admin/src/pages/Organization/reducer.js | 2 +- link-admin/src/registerServiceWorker.js | 48 +++--- link-admin/src/setupTests.js | 6 +- link-admin/src/store/index.js | 10 +- link-admin/src/store/landing.js | 20 +-- link-admin/src/store/organizations.js | 72 ++++----- link-admin/src/utils/testing/enzyme.js | 12 +- link-admin/src/utils/testing/fela.js | 18 +-- yarn.lock | 142 +++++++++++++++++- 40 files changed, 494 insertions(+), 221 deletions(-) create mode 100644 link-admin/.eslintrc.js create mode 100644 link-admin/src/components/layout/Container.js diff --git a/link-admin/.eslintrc.js b/link-admin/.eslintrc.js new file mode 100644 index 0000000..c945a0f --- /dev/null +++ b/link-admin/.eslintrc.js @@ -0,0 +1,87 @@ +const OFF = 0; +const WARN = 1; +const ERROR = 2; + +module.exports = { + root: true, + env: { + es6: true, + browser: true, + 'jest/globals': true, + node: true + }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended' + ], + parserOptions: { + ecmaVersion: 2018, + experimentalObjectRestSpread: true, + jsx: true, + sourceType: 'module' + }, + plugins: [ + 'react', + 'jest', + 'jsx-a11y', + 'import' + ], + settings: { + 'import/extensions': [ + '.js', + '.jsx', + '.css' + ], + 'react': { + 'version': 'detect' + } + }, + rules: { + 'indent': [ERROR, 2, { + 'SwitchCase': 1 + }], + 'semi': [ERROR, 'never'], + 'brace-style': [ERROR, '1tbs', { + allowSingleLine: true + }], + 'object-curly-spacing': [ERROR, 'always'], + 'array-bracket-spacing': [ERROR, 'never'], + 'space-before-blocks': [ERROR, 'always'], + 'class-methods-use-this': OFF, + 'comma-dangle': [ERROR, 'never'], + 'jest/no-disabled-tests': ERROR, + 'jest/no-focused-tests': ERROR, + 'jest/no-identical-title': ERROR, + 'jest/prefer-to-have-length': ERROR, + 'jest/valid-expect': ERROR, + 'jsx-a11y/anchor-is-valid': [ERROR, { + components: ['Link'], + specialLink: ['to'], + aspects: ['noHref', 'invalidHref', 'preferButton'] + }], + 'function-paren-newline': OFF, + 'import/extensions': [ERROR, 'never', { + 'css': 'ignorePackages', + 'svg': 'ignorePackages', + 'jpg': 'ignorePackages', + 'gif': 'ignorePackages' + }], + 'no-unused-expressions': [ERROR, { + allowShortCircuit: false, + allowTernary: false + }], + 'no-unused-vars': WARN, + 'object-curly-newline': OFF, + 'quotes': [ERROR, 'single', { + allowTemplateLiterals: true + }], + 'react/jsx-curly-spacing': [ERROR, 'always', { + spacing: { objectLiterals: 'never' } + }], + 'react/no-redundant-should-component-update': ERROR, + 'react/no-unused-prop-types': WARN, + 'react/no-typos': ERROR, + 'react/prefer-stateless-function': OFF, + 'eol-last': [ERROR, 'always'] + } +}; diff --git a/link-admin/package.json b/link-admin/package.json index 482e37f..ee58121 100644 --- a/link-admin/package.json +++ b/link-admin/package.json @@ -46,6 +46,7 @@ "@storybook/react": "^6.0.21", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.4", + "eslint-plugin-jest": "^24.1.3", "jest": "^26.4.2", "prettier": "^2.1.1", "react-test-renderer": "^16.13.1", diff --git a/link-admin/src/app/App.jsx b/link-admin/src/app/App.jsx index 845ad2e..66cac6e 100644 --- a/link-admin/src/app/App.jsx +++ b/link-admin/src/app/App.jsx @@ -11,6 +11,8 @@ import { ConnectedRouter } from 'connected-react-router' import store, { history } from 'store' import Router from 'router' +console.log({ styledTheme }) + const App = () => ( diff --git a/link-admin/src/app/App.test.js b/link-admin/src/app/App.test.js index a754b20..4bf1935 100644 --- a/link-admin/src/app/App.test.js +++ b/link-admin/src/app/App.test.js @@ -1,9 +1,9 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); + const div = document.createElement('div') + ReactDOM.render(, div) + ReactDOM.unmountComponentAtNode(div) +}) diff --git a/link-admin/src/app/styledTheme.js b/link-admin/src/app/styledTheme.js index 2084404..2b7e642 100644 --- a/link-admin/src/app/styledTheme.js +++ b/link-admin/src/app/styledTheme.js @@ -1,5 +1,19 @@ +const screenSizes = { + 'xs': 320, + 'sm': 640, + 'md': 768, + 'lg': 1024, + 'xl': 1280, + '2xl': 1536 +} + const theme = { - bg: "white" + sizes: screenSizes, + breakpoints: {} +} + +for(const [key, value] of Object.entries(screenSizes)) { + theme.breakpoints[key] = `(min-width: ${value}px)` } -export default theme \ No newline at end of file +export default theme diff --git a/link-admin/src/components/DataDependentComponent.jsx b/link-admin/src/components/DataDependentComponent.jsx index 968f05d..2cb444c 100644 --- a/link-admin/src/components/DataDependentComponent.jsx +++ b/link-admin/src/components/DataDependentComponent.jsx @@ -1,19 +1,24 @@ import React from 'react' +import PropTypes from 'prop-types' import { STATUS } from 'link-rest-client/api' import Loading from 'components/Loading' import Error from 'components/Error' const DataDependentComponent = ({ status, component: Component }) => { - - switch(status) { - case STATUS.SUCCESS: - return Component - case STATUS.ERROR: - return - case STATUS.LOADING: - default: - return - } + switch(status) { + case STATUS.SUCCESS: + return Component + case STATUS.ERROR: + return + case STATUS.LOADING: + default: + return + } +} + +DataDependentComponent.propTypes = { + status: PropTypes.string, + component: PropTypes.node } export default DataDependentComponent diff --git a/link-admin/src/components/Error.jsx b/link-admin/src/components/Error.jsx index 38dc942..f000e4d 100644 --- a/link-admin/src/components/Error.jsx +++ b/link-admin/src/components/Error.jsx @@ -1,12 +1,17 @@ import React from 'react' +import PropTypes from 'prop-types' const Error = ({ error }) => { - return ( -
-

Error:

-

{ error }

-
- ) + return ( +
+

Error:

+

{ error }

+
+ ) +} + +Error.propTypes = { + error: PropTypes.node } export default Error diff --git a/link-admin/src/components/Loading.jsx b/link-admin/src/components/Loading.jsx index cbd718c..b804cb5 100644 --- a/link-admin/src/components/Loading.jsx +++ b/link-admin/src/components/Loading.jsx @@ -1,11 +1,11 @@ import React from 'react' const Loading = () => { - return ( -
+ return ( +
Loading... -
- ) +
+ ) } export default Loading diff --git a/link-admin/src/components/Routing/Link.jsx b/link-admin/src/components/Routing/Link.jsx index dd095ec..01a9804 100644 --- a/link-admin/src/components/Routing/Link.jsx +++ b/link-admin/src/components/Routing/Link.jsx @@ -4,23 +4,23 @@ import { useDispatch } from 'react-redux' import { push } from 'connected-react-router' const Link = ({ to, children, ...rest }) => { - const dispatch = useDispatch() + const dispatch = useDispatch() - const doNavigation = e => { - e.preventDefault() - dispatch(push(to)) - } + const doNavigation = e => { + e.preventDefault() + dispatch(push(to)) + } - return { children } + return { children } } Link.propTypes = { - to: PropTypes.string.isRequired, - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]).isRequired, - rest: PropTypes.object + to: PropTypes.string.isRequired, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]).isRequired, + rest: PropTypes.object } export default Link diff --git a/link-admin/src/components/Routing/Redirect.jsx b/link-admin/src/components/Routing/Redirect.jsx index 8bff903..dbd2643 100644 --- a/link-admin/src/components/Routing/Redirect.jsx +++ b/link-admin/src/components/Routing/Redirect.jsx @@ -3,12 +3,12 @@ import { useDispatch } from 'react-redux' import { push } from 'connected-react-router' const Redirect = ({ to }) => { - const dispatch = useDispatch() - dispatch(push(to)) + const dispatch = useDispatch() + dispatch(push(to)) } Redirect.propTypes = { - to: PropTypes.string.isRequired + to: PropTypes.string.isRequired } export default Redirect diff --git a/link-admin/src/components/Routing/index.js b/link-admin/src/components/Routing/index.js index 972310e..2e8deee 100644 --- a/link-admin/src/components/Routing/index.js +++ b/link-admin/src/components/Routing/index.js @@ -2,4 +2,4 @@ import Link from './Link' import Redirect from './Redirect' import useNavigation from './useNavigation' -export { Link, Redirect, useNavigation } \ No newline at end of file +export { Link, Redirect, useNavigation } diff --git a/link-admin/src/components/Routing/useNavigation.js b/link-admin/src/components/Routing/useNavigation.js index 1f5ef19..ca72830 100644 --- a/link-admin/src/components/Routing/useNavigation.js +++ b/link-admin/src/components/Routing/useNavigation.js @@ -2,8 +2,8 @@ import { useDispatch } from 'react-redux' import { push } from 'connected-react-router' const useNavigation = (path) => { - const dispatch = useDispatch() - return path => dispatch(push(path)) + const dispatch = useDispatch() + return path => dispatch(push(path)) } export default useNavigation diff --git a/link-admin/src/components/layout/Container.js b/link-admin/src/components/layout/Container.js new file mode 100644 index 0000000..eb9cd8e --- /dev/null +++ b/link-admin/src/components/layout/Container.js @@ -0,0 +1,14 @@ +import styled from 'styled-components' +import propTypes from 'prop-types' + +const Container = styled.div` + margin: 0 auto; + width: 100%; + max-width: ${ props => props.theme.sizes[props.maxWidth ? props.maxWidth : 'xl'] }px; +` + +Container.propTypes = { + maxWidth: propTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']) +} + +export default Container diff --git a/link-admin/src/lib/formatUrl.js b/link-admin/src/lib/formatUrl.js index ee2f2e6..4754531 100644 --- a/link-admin/src/lib/formatUrl.js +++ b/link-admin/src/lib/formatUrl.js @@ -1,9 +1,9 @@ -import { format } from "prettier" +import { format } from 'prettier' const formatUrl = url => { - if(!url.match(/^http[s]?:\/\//)) { - return `http://${url}` - } - return url + if(!url.match(/^http[s]?:\/\//)) { + return `http://${url}` + } + return url } -export default formatUrl \ No newline at end of file +export default formatUrl diff --git a/link-admin/src/lib/formatUrl.test.js b/link-admin/src/lib/formatUrl.test.js index 20cff9c..2f3121d 100644 --- a/link-admin/src/lib/formatUrl.test.js +++ b/link-admin/src/lib/formatUrl.test.js @@ -2,10 +2,10 @@ import { forEach } from 'lodash' import formatUrl from './formatUrl' it('formats a url to include protocol', () => { - expect(formatUrl('example.com')).toEqual('http://example.com') - expect(formatUrl('www.example.com')).toEqual('http://www.example.com') - expect(formatUrl('http://example.com')).toEqual('http://example.com') - expect(formatUrl('http://www.example.com')).toEqual('http://www.example.com') - expect(formatUrl('https://example.com')).toEqual('https://example.com') - expect(formatUrl('https://www.example.com')).toEqual('https://www.example.com') -}) \ No newline at end of file + expect(formatUrl('example.com')).toEqual('http://example.com') + expect(formatUrl('www.example.com')).toEqual('http://www.example.com') + expect(formatUrl('http://example.com')).toEqual('http://example.com') + expect(formatUrl('http://www.example.com')).toEqual('http://www.example.com') + expect(formatUrl('https://example.com')).toEqual('https://example.com') + expect(formatUrl('https://www.example.com')).toEqual('https://www.example.com') +}) diff --git a/link-admin/src/pages/FourOhFour.jsx b/link-admin/src/pages/FourOhFour.jsx index d972e5d..27e09cb 100644 --- a/link-admin/src/pages/FourOhFour.jsx +++ b/link-admin/src/pages/FourOhFour.jsx @@ -1,11 +1,11 @@ import React from 'react' const FourOhFour = () => { - return ( -
-

Page Not Found

-
- ) + return ( +
+

Page Not Found

+
+ ) } export default FourOhFour diff --git a/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.stories.js b/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.stories.js index 1826594..281e75a 100644 --- a/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.stories.js +++ b/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.stories.js @@ -6,20 +6,20 @@ import * as Taxonomy from '../Taxonomy' import AdminTopBar from '.' export const actions = { - addNewOrganization: action('addNew'), + addNewOrganization: action('addNew') } const selectedTaxonomies = [1] const tags = Taxonomy.all.map((taxonomy, index) => ( )) storiesOf('AdminTopBar', module).add('default', () => ( - + )) diff --git a/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.test.js b/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.test.js index f427ec1..83bf9c3 100644 --- a/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.test.js +++ b/link-admin/src/pages/Landing/AdminTopBar/AdminTopBar.test.js @@ -5,9 +5,9 @@ import { Provider } from 'react-redux' import store from 'store' const DUMMY_TAGS = [ -
, -
, -
+
, +
, +
] const setShallowWrapper = (props = {}) => shallow( diff --git a/link-admin/src/pages/Landing/AdminTopBar/index.jsx b/link-admin/src/pages/Landing/AdminTopBar/index.jsx index 3c9f55f..1a7b1f7 100644 --- a/link-admin/src/pages/Landing/AdminTopBar/index.jsx +++ b/link-admin/src/pages/Landing/AdminTopBar/index.jsx @@ -18,18 +18,18 @@ const AdminTopBar = ({ tags }) => { - + - - navigate('/organizations/new') }>{strings.AdminTopBar_NewButton} + + navigate('/organizations/new') }>{ strings.AdminTopBar_NewButton } - {tags} + { tags } ) } diff --git a/link-admin/src/pages/Landing/OrganizationList/OverflowMenu.jsx b/link-admin/src/pages/Landing/OrganizationList/OverflowMenu.jsx index ca526cd..cd04ed2 100644 --- a/link-admin/src/pages/Landing/OrganizationList/OverflowMenu.jsx +++ b/link-admin/src/pages/Landing/OrganizationList/OverflowMenu.jsx @@ -5,10 +5,10 @@ import { OverflowButton } from '@zendeskgarden/react-tables' const menuPopperModifiers = { preventOverflow: { - boundariesElement: 'viewport', + boundariesElement: 'viewport' }, flip: { - enabled: false, + enabled: false }, offset: { fn: data => { @@ -17,8 +17,8 @@ const menuPopperModifiers = { **/ data.offsets.popper.top -= 2 return data - }, - }, + } + } } const OverflowMenu = ({ onSelectItem, menuItems }) => { @@ -33,7 +33,7 @@ const OverflowMenu = ({ onSelectItem, menuItems }) => { { menuItems.map(item => ( @@ -44,4 +44,9 @@ const OverflowMenu = ({ onSelectItem, menuItems }) => { ) } +OverflowMenu.propTypes = { + onSelectItem: PropTypes.func, + menuItems: PropTypes.array +} + export default OverflowMenu diff --git a/link-admin/src/pages/Landing/OrganizationList/index.jsx b/link-admin/src/pages/Landing/OrganizationList/index.jsx index d57a73f..31aa0ed 100644 --- a/link-admin/src/pages/Landing/OrganizationList/index.jsx +++ b/link-admin/src/pages/Landing/OrganizationList/index.jsx @@ -75,15 +75,15 @@ const overflowItems = () => [ key: EDIT_ITEM, label: 'edit', isDisabled: false, - isDanger: false, + isDanger: false }, { type: 'item', key: DELETE_ITEM, label: 'delete', isDisabled: false, - isDanger: false, - }, + isDanger: false + } ] const onMenuChange = (onEdit, onDelete, selectedKey) => { diff --git a/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js b/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js index bbc4f36..2736718 100644 --- a/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js +++ b/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js @@ -1,14 +1,14 @@ -import React from 'react'; -import * as Taxonomy from '.'; -import { shallow } from 'utils/testing/fela'; +import React from 'react' +import * as Taxonomy from '.' +import { shallow } from 'utils/testing/fela' const mockOnClick = jest.fn() const setShallowTagWrapper = (props = {}) => shallow( ) @@ -25,7 +25,7 @@ describe('', () => { }) it('renders as blue if active', () => { - const wrapper = setShallowTagWrapper({isActive: true}) + const wrapper = setShallowTagWrapper({ isActive: true }) expect(wrapper.find('Tag').prop('type')).toEqual('blue') }) @@ -33,14 +33,14 @@ describe('', () => { it('does not add a spacer if it is the first tag', () => { const wrapper = setShallowTagWrapper() - expect(wrapper.find('FelaComponent[space=".5"]').length).toEqual(0) + expect(wrapper.find('FelaComponent[space=".5"]')).toHaveLength(0) }) it('adds a spacer if not the first tag', () => { const wrapper = setShallowTagWrapper({ - taxonomy: {id: 1, index: 1, label: 'foobar'} + taxonomy: { id: 1, index: 1, label: 'foobar' } }) - expect(wrapper.find('FelaComponent[space=".5"]').length).toEqual(1) + expect(wrapper.find('FelaComponent[space=".5"]')).toHaveLength(1) }) }) diff --git a/link-admin/src/pages/Landing/Taxonomy/index.jsx b/link-admin/src/pages/Landing/Taxonomy/index.jsx index ff86b6b..5674ec3 100644 --- a/link-admin/src/pages/Landing/Taxonomy/index.jsx +++ b/link-admin/src/pages/Landing/Taxonomy/index.jsx @@ -2,15 +2,15 @@ import React from 'react' import PropTypes from 'prop-types' import { Tag as GardenTag } from '@zendeskgarden/react-tags' -import Spacer from '../../../components/layout/Spacer' -import Row from '../../../components/layout/Row' +import Spacer from 'components/layout/Spacer' +import Row from 'components/layout/Row' const all = [ { id: 1, label: 'Food' }, { id: 2, label: 'Housing' }, { id: 3, label: 'Hygiene' }, { id: 4, label: 'Medical' }, - { id: 5, label: 'Technology' }, + { id: 5, label: 'Technology' } ] const Tag = ({ onClick, isActive, taxonomy: { id, index, label } }) => ( @@ -25,7 +25,7 @@ const Tag = ({ onClick, isActive, taxonomy: { id, index, label } }) => ( Tag.propTypes = { onClick: PropTypes.func.isRequired, isActive: PropTypes.bool.isRequired, - taxonomy: PropTypes.object.isRequired, + taxonomy: PropTypes.object.isRequired } export { Tag, all } diff --git a/link-admin/src/pages/Landing/actions.js b/link-admin/src/pages/Landing/actions.js index 9529fc1..d05e5f1 100644 --- a/link-admin/src/pages/Landing/actions.js +++ b/link-admin/src/pages/Landing/actions.js @@ -2,5 +2,5 @@ export const UPDATE_TAXONOMY_FILTERS = 'UPDATE_TAXONOMY_FILTERS' export const updateTaxonomyFilters = taxonomy => ({ type: UPDATE_TAXONOMY_FILTERS, - taxonomy, + taxonomy }) diff --git a/link-admin/src/pages/Landing/index.jsx b/link-admin/src/pages/Landing/index.jsx index d69b542..4caebea 100644 --- a/link-admin/src/pages/Landing/index.jsx +++ b/link-admin/src/pages/Landing/index.jsx @@ -1,6 +1,5 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' -import styled from 'styled-components' import { updateTaxonomyFilters } from 'store/landing' import { fetchOrganizations } from 'store/organizations' @@ -10,6 +9,7 @@ import * as Taxonomy from './Taxonomy' import OrganizationList from './OrganizationList' import DataDependentComponent from 'components/DataDependentComponent' +import Container from 'components/layout/Container' import AdminTopBar from './AdminTopBar' const Landing = () => { @@ -28,14 +28,14 @@ const Landing = () => { }, [organizations.status, dispatch]) return ( - + ( )) } /> @@ -45,10 +45,8 @@ const Landing = () => { component={ } /> - + ) } -const Viewport = styled.div`` - export default Landing diff --git a/link-admin/src/pages/Landing/reducer.js b/link-admin/src/pages/Landing/reducer.js index 8381e44..038b228 100644 --- a/link-admin/src/pages/Landing/reducer.js +++ b/link-admin/src/pages/Landing/reducer.js @@ -5,7 +5,7 @@ import * as Client from 'link-rest-client' export const initialState = { initStarted: false, - activeTaxonomyFilters: [], + activeTaxonomyFilters: [] } export const update = (state, action) => { @@ -16,7 +16,7 @@ export const update = (state, action) => { { ...state, initStarted: true }, Cmd.run(Client.organizations.fetch(state.cache), { successActionCreator: Client.organizations.fetchSuccess, - failActionCreator: Client.organizations.fetchFailed, + failActionCreator: Client.organizations.fetchFailed }) ) } @@ -27,8 +27,8 @@ export const update = (state, action) => { return { ...state, activeTaxonomyFilters: xor(state.activeTaxonomyFilters, [ - action.taxonomy, - ]), + action.taxonomy + ]) } default: diff --git a/link-admin/src/pages/Organization/AddOrganization/index.jsx b/link-admin/src/pages/Organization/AddOrganization/index.jsx index 7206e62..63cf1c2 100644 --- a/link-admin/src/pages/Organization/AddOrganization/index.jsx +++ b/link-admin/src/pages/Organization/AddOrganization/index.jsx @@ -3,11 +3,11 @@ import OrganizationTabs from '../Tabs' import OrganizationForm from '../OrganizationForm' const AddOrganization = () => { - return ( - - - - ) + return ( + + + + ) } export default AddOrganization diff --git a/link-admin/src/pages/Organization/OrganizationForm.jsx b/link-admin/src/pages/Organization/OrganizationForm.jsx index 546a6eb..cb773ce 100644 --- a/link-admin/src/pages/Organization/OrganizationForm.jsx +++ b/link-admin/src/pages/Organization/OrganizationForm.jsx @@ -70,7 +70,7 @@ const OrganizationDetails = ({ organization = {} }) => { - + @@ -79,7 +79,7 @@ const OrganizationDetails = ({ organization = {} }) => { ) } -OrganizationDetails.argumentspropTypes = { +OrganizationDetails.propTypes = { organization: PropTypes.object } diff --git a/link-admin/src/pages/Organization/Tabs/index.jsx b/link-admin/src/pages/Organization/Tabs/index.jsx index d837637..9151ee4 100644 --- a/link-admin/src/pages/Organization/Tabs/index.jsx +++ b/link-admin/src/pages/Organization/Tabs/index.jsx @@ -6,13 +6,13 @@ import { Tabs, TabList, TabPanel, Tab } from '@zendeskgarden/react-tabs' import { Link, useNavigation } from 'components/Routing' import { useParams, useRouteMatch } from 'react-router-dom' -import { Span } from '@zendeskgarden/react-typography'; +import { Span } from '@zendeskgarden/react-typography' const OrganizationTabs = ({ children }) => { const { organizationId, tabId = 'details' } = useParams() - const navigate = useNavigation() + const navigate = useNavigation() - const { url } = useRouteMatch() + const { url } = useRouteMatch() return ( <> @@ -40,6 +40,10 @@ const OrganizationTabs = ({ children }) => { ) } +OrganizationTabs.propTypes = { + children: PropTypes.node +} + // Keeping as a reminder that AddOrganization should be a child of the tabbed interface // const newOrg = diff --git a/link-admin/src/pages/Organization/actions.js b/link-admin/src/pages/Organization/actions.js index 88fd4c2..732c6e6 100644 --- a/link-admin/src/pages/Organization/actions.js +++ b/link-admin/src/pages/Organization/actions.js @@ -2,5 +2,5 @@ export const FETCH_ORGANIZATION = 'FETCH_ORGANIZATION' export const fetchOrganization = id => ({ type: FETCH_ORGANIZATION, - id, + id }) diff --git a/link-admin/src/pages/Organization/index.jsx b/link-admin/src/pages/Organization/index.jsx index 4edd536..cbb3947 100644 --- a/link-admin/src/pages/Organization/index.jsx +++ b/link-admin/src/pages/Organization/index.jsx @@ -10,7 +10,7 @@ import { useDispatch, useSelector } from 'react-redux' import { STATUS } from 'link-rest-client/api' import { fetchOrganization } from 'store/organizations' -import { Span } from '@zendeskgarden/react-typography'; +import { Span } from '@zendeskgarden/react-typography' import DataDependentComponent from 'components/DataDependentComponent' import OrganizationTabs from './Tabs' diff --git a/link-admin/src/pages/Organization/reducer.js b/link-admin/src/pages/Organization/reducer.js index 77dfa9d..d5b7975 100644 --- a/link-admin/src/pages/Organization/reducer.js +++ b/link-admin/src/pages/Organization/reducer.js @@ -11,7 +11,7 @@ export const update = (state, action) => { state, Cmd.run(Client.organization.fetch(state.cache, action.id), { successActionCreator: Client.organization.fetchSuccess, - failActionCreator: Client.organization.fetchFailed, + failActionCreator: Client.organization.fetchFailed }) ) default: diff --git a/link-admin/src/registerServiceWorker.js b/link-admin/src/registerServiceWorker.js index a3e6c0c..d567aae 100644 --- a/link-admin/src/registerServiceWorker.js +++ b/link-admin/src/registerServiceWorker.js @@ -16,25 +16,25 @@ const isLocalhost = Boolean( window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) -); +) export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + const publicUrl = new URL(process.env.PUBLIC_URL, window.location) if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 - return; + return } window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` if (isLocalhost) { // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); + checkValidServiceWorker(swUrl) // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. @@ -42,13 +42,13 @@ export default function register() { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://goo.gl/SC7cgQ' - ); - }); + ) + }) } else { // Is not local host. Just register service worker - registerValidSW(swUrl); + registerValidSW(swUrl) } - }); + }) } } @@ -57,7 +57,7 @@ function registerValidSW(swUrl) { .register(swUrl) .then(registration => { registration.onupdatefound = () => { - const installingWorker = registration.installing; + const installingWorker = registration.installing installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { @@ -65,20 +65,20 @@ function registerValidSW(swUrl) { // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); + console.log('New content is available; please refresh.') } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log('Content is cached for offline use.') } } - }; - }; + } + } }) .catch(error => { - console.error('Error during service worker registration:', error); - }); + console.error('Error during service worker registration:', error) + }) } function checkValidServiceWorker(swUrl) { @@ -93,25 +93,25 @@ function checkValidServiceWorker(swUrl) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { - window.location.reload(); - }); - }); + window.location.reload() + }) + }) } else { // Service worker found. Proceed as normal. - registerValidSW(swUrl); + registerValidSW(swUrl) } }) .catch(() => { console.log( 'No internet connection found. App is running in offline mode.' - ); - }); + ) + }) } export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); + registration.unregister() + }) } } diff --git a/link-admin/src/setupTests.js b/link-admin/src/setupTests.js index 31b63f1..3fdeec4 100644 --- a/link-admin/src/setupTests.js +++ b/link-admin/src/setupTests.js @@ -1,6 +1,6 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import { configure } from 'enzyme' +import Adapter from 'enzyme-adapter-react-16' // Setup Enzyme -configure({ adapter: new Adapter() }); +configure({ adapter: new Adapter() }) diff --git a/link-admin/src/store/index.js b/link-admin/src/store/index.js index efb7e24..46b2779 100644 --- a/link-admin/src/store/index.js +++ b/link-admin/src/store/index.js @@ -9,14 +9,14 @@ import organizations from './organizations' const history = createBrowserHistory() const reducer = combineReducers({ - router: connectRouter(history), - landing, - organizations + router: connectRouter(history), + landing, + organizations }) const store = configureStore({ - reducer, - middleware: getDefaultMiddleware => getDefaultMiddleware().concat(routerMiddleware(history)) + reducer, + middleware: getDefaultMiddleware => getDefaultMiddleware().concat(routerMiddleware(history)) }) export default store diff --git a/link-admin/src/store/landing.js b/link-admin/src/store/landing.js index e01cd33..f0c0a9c 100644 --- a/link-admin/src/store/landing.js +++ b/link-admin/src/store/landing.js @@ -2,16 +2,16 @@ import { createSlice } from '@reduxjs/toolkit' import xor from 'lodash/xor' const slice = createSlice({ - name: 'landing', - initialState: { - initStarted: false, - activeTaxonomyFilters: [] - }, - reducers: { - updateTaxonomyFilters: (state, { payload }) => xor(state.activeTaxonomyFilters, [ - payload.taxonomy, - ]), - } + name: 'landing', + initialState: { + initStarted: false, + activeTaxonomyFilters: [] + }, + reducers: { + updateTaxonomyFilters: (state, { payload }) => xor(state.activeTaxonomyFilters, [ + payload.taxonomy + ]) + } }) export default slice.reducer diff --git a/link-admin/src/store/organizations.js b/link-admin/src/store/organizations.js index d9c3eeb..22945c6 100644 --- a/link-admin/src/store/organizations.js +++ b/link-admin/src/store/organizations.js @@ -2,50 +2,50 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' import Client, { STATUS } from 'link-rest-client/api' export const fetchOrganizations = createAsyncThunk('organizations/fetchOrganizations', async () => { - const response = await Client.fetchOrganizations() - return response.data + const response = await Client.fetchOrganizations() + return response.data }) export const fetchOrganization = createAsyncThunk('organizations/fetchOrganization', async orgId => { - const response = await Client.fetchOrganization(orgId) - return response.data + const response = await Client.fetchOrganization(orgId) + return response.data }) const slice = createSlice({ - name: 'organizations', - initialState: { - status: STATUS.IDLE, - data: [], - error: null - }, - reducers: { + name: 'organizations', + initialState: { + status: STATUS.IDLE, + data: [], + error: null + }, + reducers: { - }, - extraReducers: { - [fetchOrganizations.pending]: state => { - state.status = STATUS.LOADING - }, - [fetchOrganizations.fulfilled]: (state, { payload }) => { - state.status = STATUS.SUCCESS - state.data = Object.assign(state.data, payload) - }, - [fetchOrganizations.rejected]: (state, { error }) => { - state.status = STATUS.ERROR - state.error = error.message - }, + }, + extraReducers: { + [fetchOrganizations.pending]: state => { + state.status = STATUS.LOADING + }, + [fetchOrganizations.fulfilled]: (state, { payload }) => { + state.status = STATUS.SUCCESS + state.data = Object.assign(state.data, payload) + }, + [fetchOrganizations.rejected]: (state, { error }) => { + state.status = STATUS.ERROR + state.error = error.message + }, - [fetchOrganization.pending]: state => { - state.status = STATUS.LOADING - }, - [fetchOrganization.fulfilled]: (state, { payload }) => { - state.status = STATUS.SUCCESS - state.data = Object.assign(state.data, [payload]) - }, - [fetchOrganization.rejected]: (state, { error }) => { - state.status = STATUS.ERROR - state.error = error.message - } - } + [fetchOrganization.pending]: state => { + state.status = STATUS.LOADING + }, + [fetchOrganization.fulfilled]: (state, { payload }) => { + state.status = STATUS.SUCCESS + state.data = Object.assign(state.data, [payload]) + }, + [fetchOrganization.rejected]: (state, { error }) => { + state.status = STATUS.ERROR + state.error = error.message + } + } }) export default slice.reducer diff --git a/link-admin/src/utils/testing/enzyme.js b/link-admin/src/utils/testing/enzyme.js index 2fae9bc..6e9c6bc 100644 --- a/link-admin/src/utils/testing/enzyme.js +++ b/link-admin/src/utils/testing/enzyme.js @@ -1,13 +1,13 @@ export const diveTo = (shallowWrapper, selector, options) => { - let component = shallowWrapper; + let component = shallowWrapper while (!component.is(selector)) { - component = component.dive(options); + component = component.dive(options) } - return component; -}; + return component +} export const diveInto = (shallowWrapper, selector, options) => { - return diveTo(shallowWrapper, selector, options).dive(); -}; + return diveTo(shallowWrapper, selector, options).dive() +} diff --git a/link-admin/src/utils/testing/fela.js b/link-admin/src/utils/testing/fela.js index 76efd2c..4e5f261 100644 --- a/link-admin/src/utils/testing/fela.js +++ b/link-admin/src/utils/testing/fela.js @@ -1,16 +1,16 @@ -import PropTypes from 'prop-types'; -import { shallow as enzymeShallow } from 'enzyme'; -import { createRenderer } from 'fela'; +import PropTypes from 'prop-types' +import { shallow as enzymeShallow } from 'enzyme' +import { createRenderer } from 'fela' export const shallow = (node, options = {}) => { - const renderer = createRenderer(); + const renderer = createRenderer() const component = enzymeShallow(node, { context: { - renderer, + renderer }, - ...options, - }); + ...options + }) - return component; -}; + return component +} diff --git a/yarn.lock b/yarn.lock index b4897d2..33dd2e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1749,11 +1749,32 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@nodelib/fs.scandir@2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" + integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw== + dependencies: + "@nodelib/fs.stat" "2.0.3" + run-parallel "^1.1.9" + +"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3" + integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA== + "@nodelib/fs.stat@^1.1.2": version "1.1.3" resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@nodelib/fs.walk@^1.2.3": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976" + integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ== + dependencies: + "@nodelib/fs.scandir" "2.1.3" + fastq "^1.6.0" + "@npmcli/move-file@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464" @@ -2828,6 +2849,18 @@ eslint-scope "^5.0.0" eslint-utils "^2.0.0" +"@typescript-eslint/experimental-utils@^4.0.1": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.9.0.tgz#23a296b85d243afba24e75a43fd55aceda5141f0" + integrity sha512-0p8GnDWB3R2oGhmRXlEnCvYOtaBCijtA5uBfH5GxQKsukdSQyI4opC4NGTUb88CagsoNQ4rb/hId2JuMbzWKFQ== + dependencies: + "@types/json-schema" "^7.0.3" + "@typescript-eslint/scope-manager" "4.9.0" + "@typescript-eslint/types" "4.9.0" + "@typescript-eslint/typescript-estree" "4.9.0" + eslint-scope "^5.0.0" + eslint-utils "^2.0.0" + "@typescript-eslint/parser@^2.10.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8" @@ -2838,6 +2871,19 @@ "@typescript-eslint/typescript-estree" "2.34.0" eslint-visitor-keys "^1.1.0" +"@typescript-eslint/scope-manager@4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.9.0.tgz#5eefe305d6b71d1c85af6587b048426bfd4d3708" + integrity sha512-q/81jtmcDtMRE+nfFt5pWqO0R41k46gpVLnuefqVOXl4QV1GdQoBWfk5REcipoJNQH9+F5l+dwa9Li5fbALjzg== + dependencies: + "@typescript-eslint/types" "4.9.0" + "@typescript-eslint/visitor-keys" "4.9.0" + +"@typescript-eslint/types@4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.9.0.tgz#3fe8c3632abd07095c7458f7451bd14c85d0033c" + integrity sha512-luzLKmowfiM/IoJL/rus1K9iZpSJK6GlOS/1ezKplb7MkORt2dDcfi8g9B0bsF6JoRGhqn0D3Va55b+vredFHA== + "@typescript-eslint/typescript-estree@2.34.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5" @@ -2851,6 +2897,28 @@ semver "^7.3.2" tsutils "^3.17.1" +"@typescript-eslint/typescript-estree@4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.9.0.tgz#38a98df6ee281cfd6164d6f9d91795b37d9e508c" + integrity sha512-rmDR++PGrIyQzAtt3pPcmKWLr7MA+u/Cmq9b/rON3//t5WofNR4m/Ybft2vOLj0WtUzjn018ekHjTsnIyBsQug== + dependencies: + "@typescript-eslint/types" "4.9.0" + "@typescript-eslint/visitor-keys" "4.9.0" + debug "^4.1.1" + globby "^11.0.1" + is-glob "^4.0.1" + lodash "^4.17.15" + semver "^7.3.2" + tsutils "^3.17.1" + +"@typescript-eslint/visitor-keys@4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.9.0.tgz#f284e9fac43f2d6d35094ce137473ee321f266c8" + integrity sha512-sV45zfdRqQo1A97pOSx3fsjR+3blmwtdCt8LDrXgCX36v4Vmz4KHrhpV6Fo2cRdXmyumxx11AHw0pNJqCNpDyg== + dependencies: + "@typescript-eslint/types" "4.9.0" + eslint-visitor-keys "^2.0.0" + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359" @@ -3651,6 +3719,11 @@ array-union@^1.0.1: dependencies: array-uniq "^1.0.1" +array-union@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" + integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== + array-uniq@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" @@ -6191,6 +6264,13 @@ dir-glob@^2.0.0: dependencies: path-type "^3.0.0" +dir-glob@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f" + integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA== + dependencies: + path-type "^4.0.0" + discontinuous-range@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a" @@ -6838,6 +6918,13 @@ eslint-plugin-import@2.20.1: read-pkg-up "^2.0.0" resolve "^1.12.0" +eslint-plugin-jest@^24.1.3: + version "24.1.3" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz#fa3db864f06c5623ff43485ca6c0e8fc5fe8ba0c" + integrity sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg== + dependencies: + "@typescript-eslint/experimental-utils" "^4.0.1" + eslint-plugin-jsx-a11y@6.2.3: version "6.2.3" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa" @@ -6936,6 +7023,11 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ== +eslint-visitor-keys@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8" + integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ== + eslint@^6.6.0: version "6.8.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb" @@ -7315,6 +7407,18 @@ fast-glob@^2.0.2: merge2 "^1.2.3" micromatch "^3.1.10" +fast-glob@^3.1.1: + version "3.2.4" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3" + integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.0" + merge2 "^1.3.0" + micromatch "^4.0.2" + picomatch "^2.2.1" + fast-json-parse@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d" @@ -7335,6 +7439,13 @@ fast-loops@^1.0.0, fast-loops@^1.0.1: resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.2.tgz#2ee75ba943a08a9b1ffdf9b49f133322c99bda68" integrity sha512-ql8BgnHFryLogmmzR5O3uobe+3Zzaq6h6MWn/VtAyL9OXb51r5PSTbCm9f56fvEvMWWGjbdkr4xyhT0/vLJkKw== +fastq@^1.6.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947" + integrity sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w== + dependencies: + reusify "^1.0.4" + fault@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13" @@ -7945,7 +8056,7 @@ glob-parent@^3.1.0: is-glob "^3.1.0" path-dirname "^1.0.0" -glob-parent@^5.0.0, glob-parent@~5.1.0: +glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0: version "5.1.1" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== @@ -8039,6 +8150,18 @@ globby@8.0.2: pify "^3.0.0" slash "^1.0.0" +globby@^11.0.1: + version "11.0.1" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357" + integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" @@ -8564,6 +8687,11 @@ ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== +ignore@^5.1.4: + version "5.1.8" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" + integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== + immer@1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" @@ -10883,7 +11011,7 @@ merge-stream@^2.0.0: resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== -merge2@^1.2.3: +merge2@^1.2.3, merge2@^1.3.0: version "1.4.1" resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== @@ -14170,6 +14298,11 @@ retry@^0.12.0: resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b" integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs= +reusify@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" + integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== + rework-visit@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a" @@ -14275,6 +14408,11 @@ run-async@^2.2.0, run-async@^2.4.0: resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ== +run-parallel@^1.1.9: + version "1.1.10" + resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef" + integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw== + run-queue@^1.0.0, run-queue@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47" From 5e30db89b156dde768e3cd24d6bf37f28be48bc7 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Sat, 5 Dec 2020 14:02:04 -0800 Subject: [PATCH 03/22] Replaces Fela component tests with styled-components in test file --- link-admin/package.json | 1 + .../pages/Landing/Taxonomy/Taxonomy.test.js | 43 ++++++++++--------- yarn.lock | 9 +++- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/link-admin/package.json b/link-admin/package.json index ee58121..58b8869 100644 --- a/link-admin/package.json +++ b/link-admin/package.json @@ -48,6 +48,7 @@ "enzyme-adapter-react-16": "^1.15.4", "eslint-plugin-jest": "^24.1.3", "jest": "^26.4.2", + "jest-styled-components": "^7.0.3", "prettier": "^2.1.1", "react-test-renderer": "^16.13.1", "redux-devtools": "^3.6.1" diff --git a/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js b/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js index 2736718..3638246 100644 --- a/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js +++ b/link-admin/src/pages/Landing/Taxonomy/Taxonomy.test.js @@ -1,46 +1,47 @@ import React from 'react' +import { mount } from 'enzyme' +import 'jest-styled-components' import * as Taxonomy from '.' -import { shallow } from 'utils/testing/fela' +import { Tag as GardenTag } from '@zendeskgarden/react-tags' +import Spacer from 'components/layout/Spacer' const mockOnClick = jest.fn() -const setShallowTagWrapper = (props = {}) => shallow( - -) + +const Tag = (props = {}) => describe('', () => { it('renders correct taxonomy label', () => { - const wrapper = setShallowTagWrapper() - expect(wrapper.find('Tag').render().text()).toEqual('foobar') + const wrapper = mount() + + expect(wrapper.find(GardenTag).text()).toEqual('foobar') }) it('renders as grey if inactive', () => { - const wrapper = setShallowTagWrapper() + const wrapper = mount() - expect(wrapper.find('Tag').prop('type')).toEqual('grey') + expect(wrapper.find(GardenTag).prop('type')).toEqual('grey') }) it('renders as blue if active', () => { - const wrapper = setShallowTagWrapper({ isActive: true }) + const wrapper = mount() - expect(wrapper.find('Tag').prop('type')).toEqual('blue') + expect(wrapper.find(GardenTag).prop('type')).toEqual('blue') }) it('does not add a spacer if it is the first tag', () => { - const wrapper = setShallowTagWrapper() + const wrapper = mount() - expect(wrapper.find('FelaComponent[space=".5"]')).toHaveLength(0) + expect(wrapper.find(Spacer)).toHaveLength(0) }) it('adds a spacer if not the first tag', () => { - const wrapper = setShallowTagWrapper({ - taxonomy: { id: 1, index: 1, label: 'foobar' } - }) + const wrapper = mount() - expect(wrapper.find('FelaComponent[space=".5"]')).toHaveLength(1) + expect(wrapper.find(Spacer)).toHaveLength(1) }) }) diff --git a/yarn.lock b/yarn.lock index 33dd2e4..16785bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5833,7 +5833,7 @@ css-what@^3.2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39" integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg== -css@^2.0.0, css@^2.2.1: +css@^2.0.0, css@^2.2.1, css@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== @@ -10106,6 +10106,13 @@ jest-snapshot@^26.4.2: pretty-format "^26.4.2" semver "^7.3.2" +jest-styled-components@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.3.tgz#cc0b031f910484e68f175568682f3969ff774b2c" + integrity sha512-jj9sWyshehUnB0P9WFUaq9Bkh6RKYO8aD8lf3gUrXRwg/MRddTFk7U9D9pC4IAI3v9fbz4vmrMxwaecTpG8NKA== + dependencies: + css "^2.2.4" + jest-util@^24.0.0, jest-util@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162" From bc82b093c8c2d11ac2d3450b8001cf210d08f1b4 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Sat, 5 Dec 2020 14:20:24 -0800 Subject: [PATCH 04/22] Updates storybook config for styled components --- link-admin/.storybook/main.js | 2 +- link-admin/.storybook/preview.js | 28 ++++++++++++++++------------ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/link-admin/.storybook/main.js b/link-admin/.storybook/main.js index 05984d8..925097d 100644 --- a/link-admin/.storybook/main.js +++ b/link-admin/.storybook/main.js @@ -12,4 +12,4 @@ module.exports = { ) return config } -} \ No newline at end of file +} diff --git a/link-admin/.storybook/preview.js b/link-admin/.storybook/preview.js index 6f9f164..b8bf917 100644 --- a/link-admin/.storybook/preview.js +++ b/link-admin/.storybook/preview.js @@ -1,21 +1,16 @@ import React from 'react' -import { RendererProvider as FelaProvider } from 'react-fela' +// import { RendererProvider as FelaProvider } from 'react-fela' +import { ThemeProvider as StyledThemeProvider } from 'styled-components' +import styledTheme from '../src/app/styledTheme' import { configure, addDecorator } from '@storybook/react' -import { Provider } from 'react-redux' +import { Provider as ReduxProvider } from 'react-redux' import store from 'store' -import { createRenderer } from 'fela' -import '../src/index.css' - -const renderer = createRenderer() - -const withFelaProvider = story => ( - { story() } -) +import '../src/app/index.css' const withReduxProvider = story => ( - { story() } + { story() } ) const req = require.context('../src', true, /\.stories.js$/) @@ -24,6 +19,15 @@ function loadStories() { req.keys().forEach(filename => req(filename)) } -addDecorator(withFelaProvider) addDecorator(withReduxProvider) configure(loadStories, module) + +export const decorators = [ + (Story) => ( + + + + + + ) +] From 90ee460742dc9eaf7b601879f18c33f82c38ad37 Mon Sep 17 00:00:00 2001 From: Avram Walden Date: Sat, 5 Dec 2020 18:46:08 -0800 Subject: [PATCH 05/22] Adds support for zendeskgarden svg icons --- doc/architecture/API.md | 4 +- link-admin/config-overrides.js | 15 + link-admin/package.json | 10 +- link-admin/src/app/layout/Footer/index.jsx | 11 + link-admin/src/app/layout/Sidebar/index.jsx | 10 + link-admin/src/app/layout/Topbar/index.jsx | 11 + link-admin/src/app/layout/index.jsx | 30 + link-admin/src/pages/Organization/index.jsx | 15 +- link-admin/src/router/index.jsx | 49 +- yarn.lock | 866 +++++++++++++++++++- 10 files changed, 986 insertions(+), 35 deletions(-) create mode 100644 link-admin/config-overrides.js create mode 100644 link-admin/src/app/layout/Footer/index.jsx create mode 100644 link-admin/src/app/layout/Sidebar/index.jsx create mode 100644 link-admin/src/app/layout/Topbar/index.jsx create mode 100644 link-admin/src/app/layout/index.jsx diff --git a/doc/architecture/API.md b/doc/architecture/API.md index 04b33a9..d50a354 100644 --- a/doc/architecture/API.md +++ b/doc/architecture/API.md @@ -1,3 +1,5 @@ +Organizations + Contacts Locations @@ -14,8 +16,6 @@ Languages Services -Organizations - Physical Addresses Regular Schedules diff --git a/link-admin/config-overrides.js b/link-admin/config-overrides.js new file mode 100644 index 0000000..f88930f --- /dev/null +++ b/link-admin/config-overrides.js @@ -0,0 +1,15 @@ +const { addWebpackModuleRule } = require('customize-cra') + +const { + override +} = require('customize-cra') +const path = require('path') + +module.exports = { + webpack: override( + addWebpackModuleRule({ + test: /@zendeskgarden\/.*\.svg$/, + use: ['@svgr/webpack'] + }) + ) +} diff --git a/link-admin/package.json b/link-admin/package.json index 58b8869..2d8cd2a 100644 --- a/link-admin/package.json +++ b/link-admin/package.json @@ -3,9 +3,9 @@ "version": "0.1.0", "private": true, "scripts": { - "start": "HOST=blomp.localhost PORT=3001 react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", + "start": "HOST=blomp.localhost PORT=3001 react-app-rewired start", + "build": "react-app-rewired build", + "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject", "storybook": "start-storybook -p 9009 -s public", "build-storybook": "build-storybook -s public" @@ -22,6 +22,7 @@ "@zendeskgarden/react-tags": "^8.21.2", "@zendeskgarden/react-theming": "^8.21.2", "@zendeskgarden/react-typography": "^8.21.2", + "@zendeskgarden/svg-icons": "^6.27.0", "axios": "^0.20.0", "connected-react-router": "^6.8.0", "global": "^4.3.2", @@ -44,12 +45,15 @@ "@storybook/addons": "^6.0.21", "@storybook/preset-create-react-app": "^3.1.4", "@storybook/react": "^6.0.21", + "@svgr/webpack": "^5.5.0", + "customize-cra": "^1.0.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.4", "eslint-plugin-jest": "^24.1.3", "jest": "^26.4.2", "jest-styled-components": "^7.0.3", "prettier": "^2.1.1", + "react-app-rewired": "^2.1.7", "react-test-renderer": "^16.13.1", "redux-devtools": "^3.6.1" }, diff --git a/link-admin/src/app/layout/Footer/index.jsx b/link-admin/src/app/layout/Footer/index.jsx new file mode 100644 index 0000000..0be16a7 --- /dev/null +++ b/link-admin/src/app/layout/Footer/index.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Footer = () => { + return ( +
+ Footer +
+ ) +} + +export default Footer diff --git a/link-admin/src/app/layout/Sidebar/index.jsx b/link-admin/src/app/layout/Sidebar/index.jsx new file mode 100644 index 0000000..f72bf1f --- /dev/null +++ b/link-admin/src/app/layout/Sidebar/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' + +const Sidebar = () => { + return ( +
+
+ ) +} + +export default Sidebar diff --git a/link-admin/src/app/layout/Topbar/index.jsx b/link-admin/src/app/layout/Topbar/index.jsx new file mode 100644 index 0000000..9ce90af --- /dev/null +++ b/link-admin/src/app/layout/Topbar/index.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Topbar = () => { + return ( +
+ Top Bar +
+ ) +} + +export default Topbar diff --git a/link-admin/src/app/layout/index.jsx b/link-admin/src/app/layout/index.jsx new file mode 100644 index 0000000..c065b71 --- /dev/null +++ b/link-admin/src/app/layout/index.jsx @@ -0,0 +1,30 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' + +import Topbar from './Topbar' +import Sidebar from './Sidebar' +import Footer from './Footer' + +const AdminLayout = ({ children }) => { + return ( + <> + + + + + { children } + + +