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}
/>