fix: Creating API token reloads app

fix: API keys unselectable in list
closes #2604

app/components/List/Item.js

@@ -56,7 +56,6 @@ const ListItem = (
 
 const Wrapper = styled.div`
   display: flex;
-  user-select: none;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
   border-bottom: 1px solid

app/scenes/APITokenNew.js

@@ -19,19 +19,23 @@ function APITokenNew({ onSubmit }: Props) {
   const { showToast } = useToasts();
   const { t } = useTranslation();
 
-  const handleSubmit = React.useCallback(async () => {
+  const handleSubmit = React.useCallback(
-    setIsSaving(true);
+    async (ev: SyntheticEvent<>) => {
+      ev.preventDefault();
+      setIsSaving(true);
 
-    try {
+      try {
-      await apiKeys.create({ name });
+        await apiKeys.create({ name });
-      showToast(t("API token created", { type: "success" }));
+        showToast(t("API token created", { type: "success" }));
-      onSubmit();
+        onSubmit();
-    } catch (err) {
+      } catch (err) {
-      showToast(err.message, { type: "error" });
+        showToast(err.message, { type: "error" });
-    } finally {
+      } finally {
-      setIsSaving(false);
+        setIsSaving(false);
-    }
+      }
-  }, [t, showToast, name, onSubmit, apiKeys]);
+    },
+    [t, showToast, name, onSubmit, apiKeys]
+  );
 
   const handleNameChange = React.useCallback((event) => {
     setName(event.target.value);

server/presenters/apiKey.js

@@ -6,5 +6,6 @@ export default function present(key: ApiKey) {
     id: key.id,
     name: key.name,
     secret: key.secret,
+    createdAt: key.createdAt,
   };
 }