feat: add studio footer for studio mfes

Co-authored-by: Muhammad Abdullah Waheed <42172960+abdullahwaheed@users.noreply.github.com>

.env.development

@@ -8,6 +8,11 @@ LMS_BASE_URL=http://localhost:18000
 LOGIN_URL=http://localhost:18000/login
 LOGOUT_URL=http://localhost:18000/login
 MARKETING_SITE_BASE_URL=http://localhost:18000
+TERMS_OF_SERVICE_URL=null
+PRIVACY_POLICY_URL=null
+SUPPORT_EMAIL=null
+STUDIO_BASE_URL=http://localhost:18010
+SHOW_ACCESSIBILITY_PAGE=false
 ORDER_HISTORY_URL=localhost:1996/orders
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SEGMENT_KEY=null

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -16,4 +16,4 @@ jobs:
     secrets:
       GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
       GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.github/workflows/release.yml

@@ -12,10 +12,12 @@ jobs:
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.nvmrc

@@ -0,0 +1 @@
+18

Makefile

@@ -1,11 +1,9 @@
-transifex_resource = frontend-component-footer
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
+export TRANSIFEX_RESOURCE = frontend-component-footer
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
@@ -42,15 +40,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

package.json

@@ -33,34 +33,38 @@
   },
   "homepage": "https://github.com/openedx/frontend-component-footer#readme",
   "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "12.3.0",
-    "@edx/frontend-platform": "^3.0.1",
-    "@edx/paragon": "19.25.3",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "12.9.17",
+    "@edx/frontend-platform": "5.4.0",
+    "@edx/reactifex": "^2.1.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "husky": "7.0.4",
+    "husky": "8.0.3",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "5.3.3",
-    "react-test-renderer": "16.14.0",
-    "reactifex": "1.1.1",
-    "redux": "4.2.0",
-    "semantic-release": "19.0.3"
+    "react-router-dom": "6.15.0",
+    "react-test-renderer": "17.0.2",
+    "redux": "4.2.1",
+    "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-brands-svg-icons": "5.15.4",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.2.0"
+    "@edx/paragon": "^21.3.1",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^3.0.0",
+    "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
   }
 }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx"],
+      "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

src/components/studio-footer/StudioFooter.jsx

@@ -0,0 +1,146 @@
+import React, { useContext, useState } from 'react';
+import _ from 'lodash';
+import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  Hyperlink,
+  Image,
+  TransitionReplace,
+} from '@edx/paragon';
+import { ExpandLess, ExpandMore, Help } from '@edx/paragon/icons';
+import messages from './messages';
+
+ensureConfig([
+  'LMS_BASE_URL',
+  'MARKETING_SITE_BASE_URL',
+  'TERMS_OF_SERVICE_URL',
+  'PRIVACY_POLICY_URL',
+  'SUPPORT_EMAIL',
+  'SITE_NAME',
+  'STUDIO_BASE_URL',
+  'SHOW_ACCESSIBILITY_PAGE',
+], 'Studio Footer component');
+
+const StudioFooter = ({
+  // injected
+  intl,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { config } = useContext(AppContext);
+
+  return (
+    <>
+      <div className="m-0 mt-6 row align-items-center justify-content-center">
+        <div className="col border-top mr-2" />
+        <Button
+          data-testid="helpToggleButton"
+          variant="outline-primary"
+          onClick={() => setIsOpen(!isOpen)}
+          iconBefore={Help}
+          iconAfter={isOpen ? ExpandLess : ExpandMore}
+          size="sm"
+        >
+          {isOpen ? intl.formatMessage(messages.closeHelpButtonLabel)
+            : intl.formatMessage(messages.openHelpButtonLabel)}
+        </Button>
+        <div className="col border-top ml-2" />
+      </div>
+      <Container size="xl" className="px-4">
+        <TransitionReplace>
+          {isOpen ? (
+            <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
+              <ActionRow.Spacer />
+              <Button as="a" href="https://docs.edx.org/" size="sm">
+                <FormattedMessage {...messages.edxDocumentationButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://open.edx.org/"
+                size="sm"
+                data-testid="openEdXPortalButton"
+              >
+                <FormattedMessage {...messages.openEdxPortalButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://www.edx.org/course/edx101-overview-of-creating-an-edx-course#.VO4eaLPF-n1"
+                size="sm"
+              >
+                <FormattedMessage {...messages.edx101ButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://www.edx.org/course/studiox-creating-a-course-with-edx-studio"
+                size="sm"
+              >
+                <FormattedMessage {...messages.studioXButtonLabel} />
+              </Button>
+              {!_.isEmpty(config.SUPPORT_EMAIL) && (
+                <Button
+                  as="a"
+                  href={`mailto:${config.SUPPORT_EMAIL}`}
+                  size="sm"
+                  data-testid="contactUsButton"
+                >
+                  <FormattedMessage {...messages.contactUsButtonLabel} />
+                </Button>
+              )}
+              <ActionRow.Spacer />
+            </ActionRow>
+          ) : null}
+        </TransitionReplace>
+        <ActionRow className="pt-3 m-0 x-small">
+          © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
+          <ActionRow.Spacer />
+          {!_.isEmpty(config.TERMS_OF_SERVICE_URL) && (
+            <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
+              {intl.formatMessage(messages.termsOfServiceLinkLabel)}
+            </Hyperlink>
+          )}{!_.isEmpty(config.PRIVACY_POLICY_URL) && (
+            <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
+              {intl.formatMessage(messages.privacyPolicyLinkLabel)}
+            </Hyperlink>
+          )}
+          {config.SHOW_ACCESSIBILITY_PAGE === 'true' && (
+            <Hyperlink
+              destination={`${config.STUDIO_BASE_URL}/accessibility`}
+              data-testid="accessibilityRequest"
+            >
+              {intl.formatMessage(messages.accessibilityRequestLinkLabel)}
+            </Hyperlink>
+          )}
+          <Hyperlink destination={config.LMS_BASE_URL}>LMS</Hyperlink>
+        </ActionRow>
+        <ActionRow className="mt-3 pb-4 x-small">
+          {/*
+            Site operators: Please do not remove this paragraph! this attributes back to edX and
+              makes your acknowledgement of edX's trademarks clear.
+            Translators: 'edX' and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate
+              any of these trademarks and company names.
+          */}
+          <FormattedMessage {...messages.trademarkMessage} />
+          <Hyperlink className="ml-1" destination="https://www.edx.org">edX Inc</Hyperlink>.
+          <ActionRow.Spacer />
+          <Hyperlink destination="https://open.edx.org" className="float-right">
+            <Image
+              width="120px"
+              alt="Powered by Open edX"
+              src="https://logos.openedx.org/open-edx-logo-tag.png"
+            />
+          </Hyperlink>
+        </ActionRow>
+      </Container>
+    </>
+  );
+};
+
+StudioFooter.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(StudioFooter);

src/components/studio-footer/StudioFooter.test.jsx

@@ -0,0 +1,121 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import StudioFooter from './StudioFooter';
+import messages from './messages';
+
+const config = {
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  MARKETING_SITE_BASE_URL: process.env.MARKETING_SITE_BASE_URL,
+  TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
+  PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+  SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
+  SITE_NAME: process.env.SITE_NAME,
+  STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+  SHOW_ACCESSIBILITY_PAGE: process.env.SHOW_ACCESSIBILITY_PAGE,
+};
+
+let currentConfig = config;
+const Component = ({ updateVariable }) => {
+  if (updateVariable) {
+    const [variable, value] = updateVariable;
+    currentConfig = {
+      ...config,
+      [variable]: value,
+    };
+  }
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: currentConfig,
+  }), []);
+
+  return (
+    <IntlProvider locale="en">
+      <AppContext.Provider value={contextValue}>
+        <StudioFooter />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+jest.unmock('@edx/paragon');
+
+describe('Footer', () => {
+  describe('help section default view', () => {
+    it('help button should read Looking for help with Studio?', () => {
+      render(<Component />);
+      expect(screen.getByText(messages.openHelpButtonLabel.defaultMessage))
+        .toBeVisible();
+    });
+    it('help button link row should not be visible', () => {
+      render(<Component />);
+      expect(screen.queryByTestId('helpButtonRow')).toBeNull();
+    });
+  });
+  describe('help section expanded view', () => {
+    it('help button should read Hide Studio help', () => {
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      fireEvent.click(helpToggleButton);
+      expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
+        .toBeVisible();
+    });
+    it('help button link row should be visible', () => {
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      fireEvent.click(helpToggleButton);
+      expect(screen.getByTestId('helpButtonRow')).toBeVisible();
+    });
+    it('Open edX portal button should be visible', () => {
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      fireEvent.click(helpToggleButton);
+      expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
+    });
+    it('should not show contact us button', () => {
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      fireEvent.click(helpToggleButton);
+      expect(screen.queryByTestId('contactUsButton')).toBeNull();
+    });
+    it('should show contact us button', () => {
+      render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      fireEvent.click(helpToggleButton);
+      expect(screen.getByTestId('contactUsButton')).toBeVisible();
+    });
+  });
+  describe('policy link row', () => {
+    it('should only show LMS link', () => {
+      render(<Component />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show terms of service link', () => {
+      render(<Component updateVariable={['TERMS_OF_SERVICE_URL', 'termsofserviceurl']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeVisible();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show privacy policy link', () => {
+      render(<Component updateVariable={['PRIVACY_POLICY_URL', 'privacypolicyurl']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeVisible();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show accessibilty request link', () => {
+      render(<Component updateVariable={['SHOW_ACCESSIBILITY_PAGE', 'true']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeVisible();
+    });
+  });
+});

src/components/studio-footer/index.jsx

@@ -0,0 +1,3 @@
+import StudioFooter from './StudioFooter';
+
+export default StudioFooter;

src/components/studio-footer/messages.js

@@ -0,0 +1,61 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  openHelpButtonLabel: {
+    id: 'authoring.footer.help.openHelp.button.label',
+    defaultMessage: 'Looking for help with Studio?',
+    description: 'Label for button that opens the collapsed section with help buttons',
+  },
+  closeHelpButtonLabel: {
+    id: 'authoring.footer.help.closeHelp.button.label',
+    defaultMessage: 'Hide Studio help',
+    description: 'Label for button that closes the collapsed section with help buttons',
+  },
+  edxDocumentationButtonLabel: {
+    id: 'authoring.footer.help.edxDocumentation.button.label',
+    defaultMessage: 'edX documentation',
+    description: 'Label for button that links to the edX documentation site',
+  },
+  openEdxPortalButtonLabel: {
+    id: 'authoring.footer.help.openEdxPortal.button.label',
+    defaultMessage: 'Open edX portal',
+    description: 'Label for button that links to the Open edX portal',
+  },
+  edx101ButtonLabel: {
+    id: 'authoring.footer.help.edx101.button.label',
+    defaultMessage: 'Enroll in edX 101',
+    description: 'Label for button that links to the edX 101 course',
+  },
+  studioXButtonLabel: {
+    id: 'authoring.footer.help.studioX.button.label',
+    defaultMessage: 'Enroll in StudioX',
+    description: 'Label for button that links to the edX StudioX course',
+  },
+  contactUsButtonLabel: {
+    id: 'authoring.footer.help.contactUs.button.label',
+    defaultMessage: 'Contact us',
+    description: 'Label for button that links to the email for partner support',
+  },
+  termsOfServiceLinkLabel: {
+    id: 'authoring.footer.termsOfService.link.label',
+    defaultMessage: 'Terms of Service',
+    description: 'Label for button that links to the terms of service page',
+  },
+  privacyPolicyLinkLabel: {
+    id: 'authoring.footer.privacyPolicy.link.label',
+    defaultMessage: 'Privacy Policy',
+    description: 'Label for button that links to the privacy policy page',
+  },
+  accessibilityRequestLinkLabel: {
+    id: 'authoring.footer.accessibilityRequest.link.label',
+    defaultMessage: 'Accessibility Accomodation Request',
+    description: 'Label for button that links to the accessibility accomodation requests page',
+  },
+  trademarkMessage: {
+    id: 'authoring.footer.trademark.message',
+    defaultMessage: 'edX and Open edX, and the edX and Open edX logos are registered trademarks of',
+    description: 'Message about the use of logos and names edX and Open edX',
+  },
+});
+
+export default messages;

src/i18n/index.js

@@ -9,6 +9,9 @@ import deMessages from './messages/de.json';
 import ruMessages from './messages/ru.json';
 import hiMessages from './messages/hi.json';
 import frCAMessages from './messages/fr_CA.json';
+import dedeCAMessages from './messages/de_DE.json';
+import ititCAMessages from './messages/it_IT.json';
+import ptptCAMessages from './messages/pt_PT.json';
 // no need to import en messages-- they are in the defaultMessage field
 
 const messages = {
@@ -23,6 +26,9 @@ const messages = {
   'fr-ca': frCAMessages,
   ru: ruMessages,
   uk: ukMessages,
+  'de-de': dedeCAMessages,
+  'it-it': ititCAMessages,
+  'pt-pt': ptptCAMessages,
 };
 
 export default messages;

src/i18n/messages/de_DE.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/it_IT.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pt_PT.json

@@ -0,0 +1 @@
+{}

src/index.js

@@ -1,5 +1,6 @@
 import Footer, { EVENT_NAMES } from './components/Footer';
 import messages from './i18n/index';
+import StudioFooter from './components/studio-footer';
 
 export default Footer;
-export { messages, EVENT_NAMES };
+export { messages, EVENT_NAMES, StudioFooter };

src/setupTest.js

@@ -1,5 +1,5 @@
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });