refactor(dashboard-v2): fix typos, change copies, rename components

packages/dashboard-v2/gatsby-config.js

@@ -8,7 +8,7 @@ const { GATSBY_PORTAL_DOMAIN } = process.env;
 
 module.exports = {
   siteMetadata: {
-    title: `Accounts Dashboard`,
+    title: `Account Dashboard`,
     siteUrl: `https://account.${GATSBY_PORTAL_DOMAIN}`,
   },
   trailingSlash: "never",

packages/dashboard-v2/src/components/APIKeyList/APIKey.js

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 
 import { Alert } from "../Alert";
 import { Button } from "../Button";
-import { AddSkylinkToAPIKeyForm } from "../forms/AddSkylinkToAPIKeyForm";
+import { AddSkylinkToSponsorKeyForm } from "../forms/AddSkylinkToSponsorKeyForm";
 import { CogIcon, TrashIcon } from "../Icons";
 import { Modal } from "../Modal";
 
@@ -145,7 +145,7 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
 
           <div className="flex flex-col gap-4">
             {error && <Alert $variant="error">{error}</Alert>}
-            <AddSkylinkToAPIKeyForm addSkylink={addSkylink} />
+            <AddSkylinkToSponsorKeyForm addSkylink={addSkylink} />
           </div>
           <div className="flex gap-4 justify-center mt-4">
             <Button onClick={closeEditModal}>Close</Button>

packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import prettyBytes from "pretty-bytes";
 import dayjs from "dayjs";
+import { DATE_FORMAT } from "../../lib/config";
 
 const parseFileName = (fileName) => {
   const lastDotIndex = Math.max(0, fileName.lastIndexOf(".")) || Infinity;
@@ -10,7 +11,7 @@ const parseFileName = (fileName) => {
 
 const formatItem = ({ size, name: rawFileName, uploadedOn, downloadedOn, ...rest }) => {
   const [name, type] = parseFileName(rawFileName);
-  const date = dayjs(uploadedOn || downloadedOn).format("MMM D, YYYY HH:MM");
+  const date = dayjs(uploadedOn || downloadedOn).format(DATE_FORMAT);
 
   return {
     ...rest,

packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js

@@ -3,13 +3,13 @@ import useSWR from "swr";
 
 import { Table, TableBody, TableCell, TableRow } from "../Table";
 import { ContainerLoadingIndicator } from "../LoadingIndicator";
+import useFormattedFilesData from "../FileList/useFormattedFilesData";
 
 import { ViewAllLink } from "./ViewAllLink";
-import useFormattedActivityData from "./useFormattedActivityData";
 
 export default function ActivityTable({ type }) {
   const { data, error } = useSWR(`user/${type}?pageSize=3`);
-  const items = useFormattedActivityData(data?.items || []);
+  const items = useFormattedFilesData(data?.items || []);
 
   if (!items.length) {
     return (

packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js

@@ -1,26 +0,0 @@
-import { useMemo } from "react";
-import prettyBytes from "pretty-bytes";
-import dayjs from "dayjs";
-
-const parseFileName = (fileName) => {
-  const lastDotIndex = Math.max(0, fileName.lastIndexOf(".")) || Infinity;
-
-  return [fileName.substr(0, lastDotIndex), fileName.substr(lastDotIndex)];
-};
-
-const formatItem = ({ size, name: rawFileName, uploadedOn, downloadedOn, ...rest }) => {
-  const [name, type] = parseFileName(rawFileName);
-  const date = dayjs(uploadedOn || downloadedOn).format("MMM D, YYYY HH:MM");
-
-  return {
-    ...rest,
-    date,
-    size: prettyBytes(size),
-    type,
-    name,
-  };
-};
-
-const useFormattedActivityData = (items) => useMemo(() => items.map(formatItem), [items]);
-
-export default useFormattedActivityData;

packages/dashboard-v2/src/components/forms/AddSkylinkToSponsorKeyForm.js

@@ -19,7 +19,7 @@ const newSkylinkSchema = Yup.object().shape({
     }),
 });
 
-export const AddSkylinkToAPIKeyForm = ({ addSkylink }) => (
+export const AddSkylinkToSponsorKeyForm = ({ addSkylink }) => (
   <Formik
     initialValues={{
       skylink: "",
@@ -58,6 +58,6 @@ export const AddSkylinkToAPIKeyForm = ({ addSkylink }) => (
   </Formik>
 );
 
-AddSkylinkToAPIKeyForm.propTypes = {
+AddSkylinkToSponsorKeyForm.propTypes = {
   addSkylink: PropTypes.func.isRequired,
 };

packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js

@@ -25,7 +25,7 @@ const skylinkValidator = (optional) => (value) => {
   }
 };
 
-const newPublicAPIKeySchema = Yup.object().shape({
+const newSponsorKeySchema = Yup.object().shape({
   name: Yup.string(),
   skylinks: Yup.array().of(Yup.string().test("skylink", "Provide a valid Skylink", skylinkValidator(false))),
   nextSkylink: Yup.string().when("skylinks", {
@@ -41,7 +41,7 @@ const State = {
   Failure: "FAILURE",
 };
 
-export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
+export const AddSponsorKeyForm = forwardRef(({ onSuccess }, ref) => {
   const [state, setState] = useState(State.Pure);
   const [generatedKey, setGeneratedKey] = useState(null);
 
@@ -72,7 +72,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
           skylinks: [],
           nextSkylink: "",
         }}
-        validationSchema={newPublicAPIKeySchema}
+        validationSchema={newSponsorKeySchema}
         onSubmit={async ({ name, skylinks, nextSkylink }, { resetForm }) => {
           try {
             const { key } = await accountsService
@@ -192,8 +192,8 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => {
   );
 });
 
-AddPublicAPIKeyForm.displayName = "AddPublicAPIKeyForm";
+AddSponsorKeyForm.displayName = "AddSponsorKeyForm";
 
-AddPublicAPIKeyForm.propTypes = {
+AddSponsorKeyForm.propTypes = {
   onSuccess: PropTypes.func.isRequired,
 };

packages/dashboard-v2/src/lib/config.js

@@ -0,0 +1 @@
+export const DATE_FORMAT = "MMM D, YYYY HH:MM";

packages/dashboard-v2/src/pages/settings/developer-settings.js

@@ -6,7 +6,7 @@ import UserSettingsLayout from "../../layouts/UserSettingsLayout";
 import { AddAPIKeyForm, APIKeyType } from "../../components/forms/AddAPIKeyForm";
 import { APIKeyList } from "../../components/APIKeyList/APIKeyList";
 import { Alert } from "../../components/Alert";
-import { AddPublicAPIKeyForm } from "../../components/forms/AddPublicAPIKeyForm";
+import { AddSponsorKeyForm } from "../../components/forms/AddSponsorKeyForm";
 import { Metadata } from "../../components/Metadata";
 import HighlightedLink from "../../components/HighlightedLink";
 
@@ -59,7 +59,7 @@ const DeveloperSettingsPage = () => {
             </p>{" "}
             {/* TODO: missing documentation link */}
             <div className="mt-4">
-              <AddPublicAPIKeyForm ref={publicFormRef} onSuccess={refreshState} />
+              <AddSponsorKeyForm ref={publicFormRef} onSuccess={refreshState} />
             </div>
             {error ? (
               <Alert $variant="error" className="mt-4">
@@ -81,10 +81,7 @@ const DeveloperSettingsPage = () => {
           <section className="flex flex-col gap-2">
             <h5>API keys</h5>
             <p className="text-palette-500">
-              These keys provide full access to <b>Accounts</b> service and are equivalent to using a JWT token.
-            </p>
-            <p className="font-bold">
-              This type of API keys needs to be kept secret and should never be shared with anyone.
+              These keys allow uploading and downloading skyfiles, as well as reading and writing to the registry.
             </p>
             <div className="mt-4">
               <AddAPIKeyForm ref={generalFormRef} onSuccess={refreshState} type={APIKeyType.General} />