use ExternalLink

Author: lorenzo-cavazzi

client/src/components/ExternalLinks.tsx

@@ -135,7 +135,7 @@ export function ExternalLink({
     const iconNode = props.customIcon ? (
       props.customIcon
     ) : (
-      <BoxArrowUpRight className={cx("bi", "me-1")} />
+      <BoxArrowUpRight className="bi" />
     );
     const icon = iconSup ? <sup>{iconNode}</sup> : <>{iconNode}</>;
     displayTitle = iconAfter ? (

client/src/features/ProjectPageV2/ProjectPageContent/DataConnectors/ProjectConnectDataConnectorsModal.tsx

@@ -53,6 +53,8 @@ import dataConnectorFormSlice from "../../../dataConnectorsV2/state/dataConnecto
 import type { Project } from "../../../projectsV2/api/projectV2.api";
 import { projectV2Api } from "../../../projectsV2/api/projectV2.enhanced-api";
 import styles from "../../../dataConnectorsV2/components/DataConnectorModal/DataConnectorModal.module.scss";
+import { ExternalLink } from "../../../../components/ExternalLinks";
+import { DATA_CONNECTORS_DOI_DOCS_URL } from "../../../dataConnectorsV2/components/dataConnector.constants";
 
 interface ProjectConnectDataConnectorsModalProps
   extends Omit<
@@ -501,13 +503,12 @@ function ProjectDoiDataConnectorBodyAndFooter({
         <p className="text-body-secondary">
           Connect to data on Zenodo, Dataverse, and similar data repositories.
           More information{" "}
-          <a
-            href="https://renku.notion.site/How-to-connect-data-from-data-repositories-such-as-Zenodo-1eb0df2efafc802ab3bef1c47c8c45b4"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            in our documentation
-          </a>
+          <ExternalLink
+            iconAfter={true}
+            role="link"
+            title="in our documentation"
+            url={DATA_CONNECTORS_DOI_DOCS_URL}
+          />
           .
         </p>
         <div className="mb-3">

client/src/features/dataConnectorsV2/components/dataConnector.constants.ts

@@ -1,2 +1,5 @@
 export const DATA_CONNECTORS_VISIBILITY_WARNING =
   "Some members of this project may not be able to access this data connector";
+
+export const DATA_CONNECTORS_DOI_DOCS_URL =
+  "https://renku.notion.site/How-to-connect-data-from-data-repositories-such-as-Zenodo-1eb0df2efafc802ab3bef1c47c8c45b4";