diff --git a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js index 086dc493..257797f3 100644 --- a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js +++ b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js @@ -1,12 +1,16 @@ import dayjs from "dayjs"; +import cn from "classnames"; import { useCallback, useState } from "react"; + import { Alert } from "../Alert"; import { Button } from "../Button"; import { AddSkylinkToAPIKeyForm } from "../forms/AddSkylinkToAPIKeyForm"; -import { CogIcon, TrashIcon } from "../Icons"; +import { CogIcon, ImportantNoteIcon, TrashIcon } from "../Icons"; import { Modal } from "../Modal"; + import { useAPIKeyEdit } from "./useAPIKeyEdit"; import { useAPIKeyRemoval } from "./useAPIKeyRemoval"; +import { Tooltip } from "../Tooltip/Tooltip"; export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => { const { id, name, createdAt, skylinks } = apiKey; @@ -49,9 +53,23 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => { abortEdit(); }, [abortEdit]); + const needsAttention = isPublic && skylinks?.length === 0; + return ( -
  • - {name || id} +
  • + + {name || "unnamed key"} + {needsAttention && ( + + + + )} + {dayjs(createdAt).format("MMM DD, YYYY")} diff --git a/packages/dashboard-v2/src/components/Icons/icons/ImportantNoteIcon.js b/packages/dashboard-v2/src/components/Icons/icons/ImportantNoteIcon.js new file mode 100644 index 00000000..94514716 --- /dev/null +++ b/packages/dashboard-v2/src/components/Icons/icons/ImportantNoteIcon.js @@ -0,0 +1,11 @@ +import { withIconProps } from "../withIconProps"; + +export const ImportantNoteIcon = withIconProps(({ size, ...props }) => ( + + + + + + + +)); diff --git a/packages/dashboard-v2/src/components/Icons/index.js b/packages/dashboard-v2/src/components/Icons/index.js index e2af85e9..0bb96694 100644 --- a/packages/dashboard-v2/src/components/Icons/index.js +++ b/packages/dashboard-v2/src/components/Icons/index.js @@ -14,3 +14,4 @@ export * from "./icons/CopyIcon"; export * from "./icons/ShareIcon"; export * from "./icons/SimpleUploadIcon"; export * from "./icons/TrashIcon"; +export * from "./icons/ImportantNoteIcon"; diff --git a/packages/dashboard-v2/src/components/Tooltip/Tooltip.js b/packages/dashboard-v2/src/components/Tooltip/Tooltip.js new file mode 100644 index 00000000..7344bf01 --- /dev/null +++ b/packages/dashboard-v2/src/components/Tooltip/Tooltip.js @@ -0,0 +1,29 @@ +import React, { Children, cloneElement, useState } from "react"; +import styled, { keyframes } from "styled-components"; + +const fadeIn = keyframes` + 0% { opacity: 0; } + 100% { opacity: 1; } +`; + +const Popper = styled.div.attrs({ + className: `absolute left-full top-1/2 z-10 px-2 py-1 text-xs + bg-black/90 text-white rounded`, +})` + transform: translateY(-50%); + animation: ${fadeIn} 0.2s ease-in-out; +`; + +export const Tooltip = ({ message, children, className }) => { + const [visible, setVisible] = useState(false); + + const show = () => setVisible(true); + const hide = () => setVisible(false); + + return ( + + {children} + {visible && {message}} + + ); +}; diff --git a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js index fd9fe54b..55f27a01 100644 --- a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js +++ b/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js @@ -39,6 +39,7 @@ export const AddSkylinkToAPIKeyForm = ({ addSkylink }) => ( id="skylink" name="skylink" label="New Skylink" + placeholder="Paste a new Skylink here" error={errors.skylink} touched={touched.skylink} />