feat: add actions menu for api keys page (#1659)

nftstorage · Mar 17, 2022 · 034bc3a · 034bc3a
1 parent 043049e
commit 034bc3a
Showing 1 changed file with 85 additions and 40 deletions.
diff --git a/packages/website/pages/manage.js b/packages/website/pages/manage.js
@@ -6,6 +6,7 @@ import Button from '../components/button.js'
 import Loading from '../components/loading.js'
 import countly from '../lib/countly.js'
 import { VscMail } from 'react-icons/vsc'
+import { Popover, ArrowContainer } from 'react-tiny-popover'
 
 /**
  *
@@ -32,6 +33,7 @@ export function getStaticProps() {
 export default function ManageKeys({ user }) {
   const [deleting, setDeleting] = useState('')
   const [copied, setCopied] = useState('')
+  const [isActionMenuOpen, setIsActionMenuOpen] = useState('')
   const queryClient = useQueryClient()
   const { status, data } = useQuery('get-tokens', () => getTokens(), {
     enabled: !!user,
@@ -139,47 +141,90 @@ export default function ManageKeys({ user }) {
                           />
                         </td>
                         <td className="shrink-cell center-cell">
-                          <div className="flex">
-                            <form
-                              data-value={t[1]}
-                              onSubmit={handleCopyToken}
-                              className="mr2"
-                            >
-                              <Button
-                                className="bg-white black"
-                                type="submit"
-                                id="copy-key"
-                                tracking={{
-                                  event: countly.events.TOKEN_COPY,
-                                  ui: countly.ui.TOKENS,
-                                }}
-                              >
-                                {copied === t[1] ? 'Copied!' : 'Copy'}
-                              </Button>
-                            </form>
-                            <form onSubmit={handleDeleteToken}>
-                              <input
-                                type="hidden"
-                                name="name"
-                                id={`token-${t[0]}`}
-                                value={`${t[2]}`}
-                              />
-                              <Button
-                                type="submit"
-                                variant="caution"
-                                disabled={Boolean(deleting)}
-                                id={`delete-key-${t[0]}`}
-                                tracking={{
-                                  event: countly.events.TOKEN_DELETE,
-                                  ui: countly.ui.TOKENS,
-                                }}
+                          <Popover
+                            isOpen={isActionMenuOpen === t[0]}
+                            onClickOutside={(e) => {
+                              if (e.currentTarget !== null) {
+                                if (
+                                  e.target instanceof Element &&
+                                  e.target.getAttribute('data-key')
+                                ) {
+                                  const keyname =
+                                    e.target.getAttribute('data-key')
+                                  setIsActionMenuOpen(keyname || '')
+                                } else {
+                                  setIsActionMenuOpen('')
+                                }
+                              }
+                            }}
+                            positions={['bottom', 'left', 'top', 'right']} // preferred positions by priority
+                            padding={2}
+                            content={({ position, childRect, popoverRect }) => (
+                              <ArrowContainer
+                                position={position}
+                                childRect={childRect}
+                                popoverRect={popoverRect}
+                                arrowColor={'black'}
+                                arrowSize={6}
+                                className="popover-arrow-container"
+                                arrowClassName="popover-arrow"
                               >
-                                {deleting === `${t[2]}`
-                                  ? 'Deleting...'
-                                  : 'Delete'}
-                              </Button>
-                            </form>
-                          </div>
+                                <div className="actions-menu">
+                                  <form
+                                    data-value={t[1]}
+                                    onSubmit={handleCopyToken}
+                                  >
+                                    <Button
+                                      type="submit"
+                                      id="copy-key"
+                                      hologram={false}
+                                      tracking={{
+                                        event: countly.events.TOKEN_COPY,
+                                        ui: countly.ui.TOKENS,
+                                      }}
+                                    >
+                                      {copied === t[1] ? 'Copied!' : 'Copy'}
+                                    </Button>
+                                  </form>
+                                  <form onSubmit={handleDeleteToken}>
+                                    <input
+                                      type="hidden"
+                                      name="name"
+                                      id={`token-${t[0]}`}
+                                      value={`${t[2]}`}
+                                    />
+                                    <Button
+                                      type="submit"
+                                      variant="caution"
+                                      hologram={false}
+                                      disabled={Boolean(deleting)}
+                                      id={`delete-key-${t[0]}`}
+                                      tracking={{
+                                        event: countly.events.TOKEN_DELETE,
+                                        ui: countly.ui.TOKENS,
+                                      }}
+                                    >
+                                      {deleting === `${t[2]}`
+                                        ? 'Deleting...'
+                                        : 'Delete'}
+                                    </Button>
+                                  </form>
+                                </div>
+                              </ArrowContainer>
+                            )}
+                          >
+                            <button
+                              onClick={() => setIsActionMenuOpen(t[0])}
+                              className={`${
+                                isActionMenuOpen === t[0]
+                                  ? 'actions-trigger--active'
+                                  : ''
+                              } btn small actions-trigger`}
+                              data-key={t[0]}
+                            >
+                              Actions
+                            </button>
+                          </Popover>
                         </td>
                       </tr>
                     ))}