[MM-50467] Change usage of anchor tag in favour of new ExternalLink (#…

…12277)

* Add ExternalLink component, update references to <a target='_blank' to use ExternalLink

* fix linter

* fix duplicate type

* use proper dep version for eslint-plugin-mattermost

* More fixes

* Various fixes for test cases

* Add some tests for the external link component

* Add snapshot

* Revert change to package.json

* add a few more tests

* PR Feedback

* Add a rudderTrack. Always attach query parameters, regardless of telemetry settings. Change server_id and user_id to sid and uid respectively

* Only emit rudderTrack when the link is actually clicked

* Fix a slew of tests

* Fix linter

* Update package version for eslint-plugin-mattermost to point at tip of master

* PR Feedback

* Feedback that didn't make it into last commit

* Fix test, missed occurence of anchor tag

* Fix linter

.eslintrc.json

@@ -34,6 +34,7 @@
  2
  ],
  "no-duplicate-imports": 0,
+ "mattermost/use-external-link": 2,
  "import/no-duplicates": 2,
  "max-nested-callbacks": ["error", 10],
  "no-unused-expressions": 0,

components/about_build_modal/__snapshots__/about_build_modal.test.tsx.snap

@@ -198,13 +198,12 @@ exports[`components/AboutBuildModal should match snapshot for enterprise edition
  defaultMessage="Learn more about Enterprise Edition at "
  id="about.enterpriseEditionLearn"
  />
- <a
+ <ExternalLink
  href="https://mattermost.com/"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  mattermost.com
- </a>
+ </ExternalLink>
  </div>
  <div
  className="form-group"
@@ -225,29 +224,27 @@ exports[`components/AboutBuildModal should match snapshot for enterprise edition
  <div
  className="about-modal__links"
  >
- <a
+ <ExternalLink
  href="https://mattermost.com/terms-of-use/"
  id="tosLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Terms of Use"
  id="about.tos"
  />
- </a>
+ </ExternalLink>
  - 
- <a
+ <ExternalLink
  href="https://mattermost.com/privacy-policy/"
  id="privacyLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Privacy Policy"
  id="about.privacy"
  />
- </a>
+ </ExternalLink>
  </div>
  </div>
  </div>
@@ -433,13 +430,12 @@ exports[`components/AboutBuildModal should match snapshot for team edition 1`] =
  defaultMessage="Join the Mattermost community at "
  id="about.teamEditionLearn"
  />
- <a
+ <ExternalLink
  href="https://mattermost.com/community/"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  mattermost.com/community/
- </a>
+ </ExternalLink>
  </div>
  <div
  className="form-group"
@@ -460,29 +456,27 @@ exports[`components/AboutBuildModal should match snapshot for team edition 1`] =
  <div
  className="about-modal__links"
  >
- <a
+ <ExternalLink
  href="https://mattermost.com/terms-of-use/"
  id="tosLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Terms of Use"
  id="about.tos"
  />
- </a>
+ </ExternalLink>
  - 
- <a
+ <ExternalLink
  href="https://mattermost.com/privacy-policy/"
  id="privacyLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Privacy Policy"
  id="about.privacy"
  />
- </a>
+ </ExternalLink>
  </div>
  </div>
  </div>
@@ -678,13 +672,12 @@ exports[`components/AboutBuildModal should show ci if a ci build 1`] = `
  defaultMessage="Join the Mattermost community at "
  id="about.teamEditionLearn"
  />
- <a
+ <ExternalLink
  href="https://mattermost.com/community/"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  mattermost.com/community/
- </a>
+ </ExternalLink>
  </div>
  <div
  className="form-group"
@@ -705,29 +698,27 @@ exports[`components/AboutBuildModal should show ci if a ci build 1`] = `
  <div
  className="about-modal__links"
  >
- <a
+ <ExternalLink
  href="https://mattermost.com/terms-of-use/"
  id="tosLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Terms of Use"
  id="about.tos"
  />
- </a>
+ </ExternalLink>
  - 
- <a
+ <ExternalLink
  href="https://mattermost.com/privacy-policy/"
  id="privacyLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Privacy Policy"
  id="about.privacy"
  />
- </a>
+ </ExternalLink>
  </div>
  </div>
  </div>
@@ -912,13 +903,12 @@ exports[`components/AboutBuildModal should show dev if this is a dev build 1`] =
  defaultMessage="Join the Mattermost community at "
  id="about.teamEditionLearn"
  />
- <a
+ <ExternalLink
  href="https://mattermost.com/community/"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  mattermost.com/community/
- </a>
+ </ExternalLink>
  </div>
  <div
  className="form-group"
@@ -939,29 +929,27 @@ exports[`components/AboutBuildModal should show dev if this is a dev build 1`] =
  <div
  className="about-modal__links"
  >
- <a
+ <ExternalLink
  href="https://mattermost.com/terms-of-use/"
  id="tosLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Terms of Use"
  id="about.tos"
  />
- </a>
+ </ExternalLink>
  - 
- <a
+ <ExternalLink
  href="https://mattermost.com/privacy-policy/"
  id="privacyLink"
- rel="noopener noreferrer"
- target="_blank"
+ location="about_build_modal"
  >
  <MemoizedFormattedMessage
  defaultMessage="Privacy Policy"
  id="about.privacy"
  />
- </a>
+ </ExternalLink>
  </div>
  </div>
  </div>

components/about_build_modal/about_build_modal.test.tsx

@@ -134,34 +134,74 @@ describe('components/AboutBuildModal', () => {
 
  test('should call onExited callback when the modal is hidden', () => {
  const onExited = jest.fn();
+ const store = mockStore({
+ entities: {
+ general: {
+ config: {},
+ license: {
+ Cloud: 'false',
+ },
+ },
+ users: {
+ currentUserId: 'currentUserId',
+ },
+ },
+ });
 
  const wrapper = mountWithIntl(
- <AboutBuildModal
- config={config}
- license={license}
- webappBuildHash='0a1b2c3d4f'
- onExited={onExited}
- />,
+ <Provider store={store}>
+ <AboutBuildModal
+ config={config}
+ license={license}
+ webappBuildHash='0a1b2c3d4f'
+ onExited={onExited}
+ />
+ </Provider>,
  );
 
  wrapper.find(Modal).first().props().onExited?.(document.createElement('div'));
  expect(onExited).toHaveBeenCalledTimes(1);
  });
 
  test('should show default tos and privacy policy links and not the config links', () => {
+ const store = mockStore({
+ entities: {
+ general: {
+ config: {},
+ license: {
+ Cloud: 'false',
+ },
+ },
+ users: {
+ currentUserId: 'currentUserId',
+ },
+ },
+ });
  const wrapper = mountWithIntl(
- <AboutBuildModal
- config={config}
- license={license}
- onExited={jest.fn()}
- />,
+ <Provider store={store}>
+ <AboutBuildModal
+ config={config}
+ license={license}
+ onExited={jest.fn()}
+ />
+ </Provider>,
  );
 
- expect(wrapper.find('#tosLink').props().href).toBe(AboutLinks.TERMS_OF_SERVICE);
- expect(wrapper.find('#privacyLink').props().href).toBe(AboutLinks.PRIVACY_POLICY);
+ expect(
+ wrapper.find(AboutBuildModal).find('a#tosLink').props().href,
+ ).toBe(
+ AboutLinks.TERMS_OF_SERVICE +
+ '?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=',
+ );
+ expect(
+ wrapper.find(AboutBuildModal).find('a#privacyLink').props().href,
+ ).toBe(
+ AboutLinks.PRIVACY_POLICY +
+ '?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=',
+ );
 
- expect(wrapper.find('#tosLink').props().href).not.toBe(config?.TermsOfServiceLink);
- expect(wrapper.find('#privacyLink').props().href).not.toBe(config?.PrivacyPolicyLink);
+ expect(wrapper.find(AboutBuildModal).find('a#tosLink').props().href).not.toBe(config?.TermsOfServiceLink);
+ expect(wrapper.find(AboutBuildModal).find('a#privacyLink').props().href).not.toBe(config?.PrivacyPolicyLink);
  });
 
  function shallowAboutBuildModal(props = {}) {