Add Link component

3 files changed, 30 insertions, 2 deletions

diff --git a/client/js/app/src/app/components/index.js b/client/js/app/src/app/components/index.js
index 7439cc0b6e7..79f659fa7b6 100644
--- a/client/js/app/src/app/components/index.js
+++ b/client/js/app/src/app/components/index.js
@@ -4,3 +4,4 @@ export { Message } from 'app/components/containers/message';
 export { Container } from 'app/components/containers/container';
 export { Content } from 'app/components/containers/content';
 export { Section } from 'app/components/containers/section';
+export { Link } from 'app/components/link/link';
diff --git a/client/js/app/src/app/components/link/link.jsx b/client/js/app/src/app/components/link/link.jsx
new file mode 100644
index 00000000000..6d72e95520f
--- /dev/null
+++ b/client/js/app/src/app/components/link/link.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link as InternalLink } from '@reach/router';
+import { Anchor } from '@mantine/core';
+
+export const isInternalLink = (link) => {
+  if (!link) return false;
+  return !/^[a-z]+:\/\//.test(link);
+};
+
+export function Link({ to, api = false, ...props }) {
+  const internal = !api && isInternalLink(to);
+  if (!props.download && to && internal)
+    return <Anchor component={InternalLink} to={to} {...props} />;
+
+  const fixedProps = Object.assign(
+    to ? { href: (api ? window.config.api : '') + to } : {},
+    to && !internal && { target: '_blank', rel: 'noopener noreferrer' },
+    props
+  );
+  delete fixedProps.getProps; // Callback to reach Link to detect active links, this is an external link so don't bother
+
+  return <Anchor {...fixedProps} />;
+}
diff --git a/client/js/app/src/app/pages/home/home.jsx b/client/js/app/src/app/pages/home/home.jsx
index 3e7699a7d5f..0c698a6ebc8 100644
--- a/client/js/app/src/app/pages/home/home.jsx
+++ b/client/js/app/src/app/pages/home/home.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { Container } from 'app/components';
+import { Container, Link } from 'app/components';
 
 export function Home() {
-  return <Container>home</Container>;
+  return (
+    <Container>
+      <Link to="/querybuilder">query builder</Link>
+    </Container>
+  );
 }