feat: add external links menu button (#245)

Author: KyleTryon

src/components/containers/ExternalLinks.tsx

@@ -0,0 +1,33 @@
+import MoreIcon from '../../icons/ui/MoreIcon';
+import DropdownContainer from '../containers/DropdownContainer';
+
+export const ExternalLinks = () => {
+  const links = [
+    {
+      name: 'Report an Issue',
+      url: 'https://github.com/CircleCI-Public/visual-config-editor/issues/new/choose',
+    },
+    {
+      name: 'Contribute',
+      url: 'https://github.com/CircleCI-Public/visual-config-editor',
+    },
+  ];
+  return (
+    <DropdownContainer
+      alignLeft
+      className="flex flex-1 rounded-md w-10 bg-white items-center justify-center px-2 border border-circle-gray-300 hover:bg-circle-gray-250"
+    >
+      <MoreIcon className="w-5 h-6" />
+      <div className="rounded border border-circle-gray-300 p-2 z-30 bg-white flex flex-col">
+        {links.map((link) => (
+          <a
+            href={link.url}
+            className="rounded flex w-full hover:bg-circle-gray-250 border-b border-circle-gray-300 p-2"
+          >
+            {link.name}
+          </a>
+        ))}
+      </div>
+    </DropdownContainer>
+  );
+};

src/components/containers/HeaderMenu.tsx

@@ -0,0 +1,11 @@
+import { ExternalLinks } from "./ExternalLinks";
+import PreviewToolbox from "./PreviewToolbox";
+
+export default function HeaderMenu() {
+  return (
+    <div className="absolute z-50 flex flex-row p-4 space-x-2">
+      <PreviewToolbox />
+      <ExternalLinks />
+    </div>
+  );
+}

src/components/containers/PreviewToolbox.tsx

@@ -24,7 +24,6 @@ export default function PreviewToolbox() {
 
   return (
     <DropdownContainer
-      className="absolute p-2 z-50"
       space={-2}
       dontCollapse
       onClick={() => {

src/components/containers/WorkflowContainer.tsx

@@ -21,6 +21,8 @@ import ConnectionLine from '../atoms/ConnectionLine';
 import Edge from '../atoms/Edge';
 import { JobMapping } from '../../mappings/components/JobMapping';
 import PreviewToolbox from './PreviewToolbox';
+import { ExternalLinks } from './ExternalLinks';
+import HeaderMenu from './HeaderMenu';
 
 export interface ElementProps {
   className?: string;
@@ -253,7 +255,7 @@ const WorkflowContainer = ({ bgClassName, className }: ElementProps) => {
         }
       }}
     >
-      <PreviewToolbox />
+      <HeaderMenu />
       <ReactFlow
         elements={elements}
         className={className}

src/icons/ui/MoreIcon.tsx

@@ -0,0 +1,14 @@
+import { IconProps } from '../IconProps';
+
+const MoreIcon = (props: IconProps) => (
+  <svg viewBox="0 0 22 20" className={props.className}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm14 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+      fill={props.color}
+    />
+  </svg>
+);
+
+export default MoreIcon;