feat: add custom links dropdown, closes #520

felixmosh · Jan 22, 2023 · 4547dd9 · 4547dd9
1 parent 98327b6
commit 4547dd9
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 48 deletions.
diff --git a/packages/api/typings/app.ts b/packages/api/typings/app.ts
@@ -169,7 +169,13 @@ export type BoardOptions = {
   uiConfig: UIConfig;
 };
 
+export type IMiscLink = {
+  text: string;
+  url: string;
+};
+
 export type UIConfig = Partial<{
   boardTitle: string;
   boardLogo: { path: string; width?: number | string; height?: number | string };
+  miscLinks: Array<IMiscLink>;
 }>;
diff --git a/packages/ui/src/components/CustomLinksDropdown/CustomLinksDropdown.tsx b/packages/ui/src/components/CustomLinksDropdown/CustomLinksDropdown.tsx
@@ -0,0 +1,33 @@
+import { UIConfig } from '@bull-board/api/dist/typings/app';
+import { Item, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu';
+import React from 'react';
+import { DropdownContent } from '../DropdownContent/DropdownContent';
+import { UserIcon } from '../Icons/User';
+import { Button } from '../JobCard/Button/Button';
+
+type CustomLinksDropdownProps = {
+  options: UIConfig['miscLinks'];
+  className: string;
+};
+
+export const CustomLinksDropdown = ({ options = [], className }: CustomLinksDropdownProps) => {
+  return (
+    <Root>
+      <Trigger asChild>
+        <Button className={className}>
+          <UserIcon />
+        </Button>
+      </Trigger>
+
+      <Portal>
+        <DropdownContent align="end">
+          {options.map((option) => (
+            <Item key={option.url} asChild>
+              <a href={option.url}>{option.text}</a>
+            </Item>
+          ))}
+        </DropdownContent>
+      </Portal>
+    </Root>
+  );
+};
diff --git a/packages/ui/src/components/DropdownContent/DropdownContent.module.css b/packages/ui/src/components/DropdownContent/DropdownContent.module.css
@@ -0,0 +1,37 @@
+.content {
+  background: #fff;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  min-width: 150px;
+  z-index: 100;
+}
+
+.content > [role='menuitem'] {
+  display: block;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 0.5rem 1rem;
+  font-weight: 400;
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.content > [role='menuitem'] > svg {
+  float: none;
+  margin-right: 0.5rem;
+  width: 1.18em;
+  height: 1em;
+  vertical-align: middle;
+  fill: #718096;
+}
+
+.content > [role='menuitem']:hover {
+  color: rgba(0, 0, 0, 0.95);
+  background: #e2e8f0;
+}
diff --git a/packages/ui/src/components/DropdownContent/DropdownContent.tsx b/packages/ui/src/components/DropdownContent/DropdownContent.tsx
@@ -0,0 +1,7 @@
+import { Content, DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
+import React from 'react';
+import s from './DropdownContent.module.css';
+
+export const DropdownContent = React.forwardRef((props: DropdownMenuContentProps, ref: any) => (
+  <Content {...props} ref={ref} className={s.content} />
+));
diff --git a/packages/ui/src/components/HeaderActions/HeaderActions.tsx b/packages/ui/src/components/HeaderActions/HeaderActions.tsx
@@ -1,4 +1,6 @@
 import React, { useState, Suspense } from 'react';
+import { useUIConfig } from '../../hooks/useUIConfig';
+import { CustomLinksDropdown } from '../CustomLinksDropdown/CustomLinksDropdown';
 import { FullscreenIcon } from '../Icons/Fullscreen';
 import { RedisIcon } from '../Icons/Redis';
 import { Settings } from '../Icons/Settings';
@@ -32,6 +34,7 @@ const SettingsModalLazy = React.lazy(() =>
 
 export const HeaderActions = () => {
   const [openedModal, setModalOpen] = useState<AllModalTypes>(null);
+  const { miscLinks = [] } = useUIConfig();
 
   return (
     <>
@@ -51,6 +54,11 @@ export const HeaderActions = () => {
             <Settings />
           </Button>
         </li>
+        {miscLinks.length > 0 && (
+          <li>
+            <CustomLinksDropdown options={miscLinks} className={s.button} />
+          </li>
+        )}
       </ul>
       <Suspense fallback={null}>
         {(openedModal === 'redis' || openedModal === 'redisClosing') && (

diff --git a/packages/ui/src/components/Icons/User.tsx b/packages/ui/src/components/Icons/User.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const UserIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <path fill="none" d="M0 0h48v48H0z" />
+    <path d="M24 10a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 12a4 4 0 1 1 4-4 4 4 0 0 1-4 4Z" />
+    <path d="M24 2a22 22 0 1 0 22 22A21.9 21.9 0 0 0 24 2ZM11.8 37.2A26.4 26.4 0 0 1 24 34a26.4 26.4 0 0 1 12.2 3.2 17.9 17.9 0 0 1-24.4 0Zm27.1-3.1A30.7 30.7 0 0 0 24 30a30.7 30.7 0 0 0-14.9 4.1A17.7 17.7 0 0 1 6 24a18 18 0 0 1 36 0 17.7 17.7 0 0 1-3.1 10.1Z" />
+  </svg>
+);
diff --git a/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.module.css b/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.module.css
@@ -3,40 +3,3 @@
   margin-bottom: 0.25em;
   justify-self: flex-end;
 }
-
-.content {
-  background: #fff;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  min-width: 150px;
-  z-index: 100;
-}
-
-.item {
-  display: block;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0.5rem 1rem;
-  font-weight: 400;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.item > svg {
-  float: none;
-  margin-right: 0.5rem;
-  width: 1.18em;
-  height: 1em;
-  vertical-align: middle;
-  fill: #718096;
-}
-
-.item:hover {
-  color: rgba(0, 0, 0, 0.95);
-  background: #e2e8f0;
-}
diff --git a/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.tsx b/packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.tsx
@@ -1,11 +1,12 @@
 import { AppQueue } from '@bull-board/api/typings/app';
-import { Content, Item, Root, Trigger, Portal } from '@radix-ui/react-dropdown-menu';
+import { Item, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu';
 import React from 'react';
 import { Store } from '../../hooks/useStore';
+import { DropdownContent } from '../DropdownContent/DropdownContent';
 import { EllipsisVerticalIcon } from '../Icons/EllipsisVertical';
 import { PauseIcon } from '../Icons/Pause';
 import { PlayIcon } from '../Icons/Play';
-import { TrashIcon } from '../Icons/Trash'
+import { TrashIcon } from '../Icons/Trash';
 import { Button } from '../JobCard/Button/Button';
 import s from './QueueDropdownActions.module.css';
 
@@ -24,9 +25,8 @@ export const QueueDropdownActions = ({
     </Trigger>
 
     <Portal>
-      <Content className={s.content} align="end">
+      <DropdownContent align="end">
         <Item
-          className={s.item}
           onSelect={
             queue.isPaused ? actions.resumeQueue(queue.name) : actions.pauseQueue(queue.name)
           }
@@ -43,16 +43,11 @@ export const QueueDropdownActions = ({
             </>
           )}
         </Item>
-        <Item
-          className={s.item}
-          onSelect={
-            actions.emptyQueue(queue.name)
-          }
-        >          
+        <Item onSelect={actions.emptyQueue(queue.name)}>
           <TrashIcon />
           Empty
         </Item>
-      </Content>
+      </DropdownContent>
     </Portal>
   </Root>
 );