From 45dc78ed193b2fc44ed6e1c9836cbdfbccfa10e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?=
Date: Fri, 25 Mar 2022 17:47:44 +0100
Subject: [PATCH] feat(dashboard-v2): add dedicated form for public api keys
---
packages/dashboard-v2/gatsby-config.js | 1 +
.../src/components/APIKeyList/APIKey.js | 39 ++--
.../components/forms/AddPublicAPIKeyForm.js | 194 ++++++++++++++++++
.../src/pages/settings/api-keys.js | 3 +-
4 files changed, 217 insertions(+), 20 deletions(-)
create mode 100644 packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js
diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js
index 160a7784..ce35de3a 100644
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@@ -5,6 +5,7 @@ module.exports = {
title: `Accounts Dashboard`,
siteUrl: `https://www.yourdomain.tld`,
},
+ trailingSlash: "never",
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-provide-react",
diff --git a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
index 257797f3..a11d1808 100644
--- a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
+++ b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js
@@ -5,12 +5,11 @@ import { useCallback, useState } from "react";
import { Alert } from "../Alert";
import { Button } from "../Button";
import { AddSkylinkToAPIKeyForm } from "../forms/AddSkylinkToAPIKeyForm";
-import { CogIcon, ImportantNoteIcon, TrashIcon } from "../Icons";
+import { CogIcon, 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;
@@ -53,22 +52,28 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
abortEdit();
}, [abortEdit]);
- const needsAttention = isPublic && skylinks?.length === 0;
+ const skylinksNumber = skylinks?.length ?? 0;
+ const isNotConfigured = isPublic && skylinksNumber === 0;
return (
- {name || "unnamed key"}
- {needsAttention && (
-
-
-
- )}
+
+ {name || "unnamed key"}
+
+
{dayjs(createdAt).format("MMM DD, YYYY")}
@@ -77,16 +82,12 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
)}
-
{error ? (