From 9d079830ac49fd6c9e5386eb540ea92bffaff06e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Wed, 13 Apr 2022 15:25:17 +0200 Subject: [PATCH] refactor(dashboard-v2): fix typos, change copies, rename components --- packages/dashboard-v2/gatsby-config.js | 2 +- .../src/components/APIKeyList/APIKey.js | 4 +-- .../FileList/useFormattedFilesData.js | 3 ++- .../LatestActivity/ActivityTable.js | 4 +-- .../useFormattedActivityData.js | 26 ------------------- ...yForm.js => AddSkylinkToSponsorKeyForm.js} | 4 +-- ...blicAPIKeyForm.js => AddSponsorKeyForm.js} | 10 +++---- packages/dashboard-v2/src/lib/config.js | 1 + .../src/pages/settings/developer-settings.js | 9 +++---- 9 files changed, 18 insertions(+), 45 deletions(-) delete mode 100644 packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js rename packages/dashboard-v2/src/components/forms/{AddSkylinkToAPIKeyForm.js => AddSkylinkToSponsorKeyForm.js} (94%) rename packages/dashboard-v2/src/components/forms/{AddPublicAPIKeyForm.js => AddSponsorKeyForm.js} (96%) create mode 100644 packages/dashboard-v2/src/lib/config.js diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js index 6994f956..0e269557 100644 --- a/packages/dashboard-v2/gatsby-config.js +++ b/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", diff --git a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js index cadc2775..b90a539e 100644 --- a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js +++ b/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 }) => {
{error && {error}} - +
diff --git a/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js b/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js index f7895450..87bf1af6 100644 --- a/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js +++ b/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, diff --git a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js index 2ee95e0f..3bea206f 100644 --- a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js +++ b/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 ( diff --git a/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js b/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js deleted file mode 100644 index 6e378436..00000000 --- a/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js +++ /dev/null @@ -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; diff --git a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddSkylinkToSponsorKeyForm.js similarity index 94% rename from packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js rename to packages/dashboard-v2/src/components/forms/AddSkylinkToSponsorKeyForm.js index 60ed905c..71742096 100644 --- a/packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js +++ b/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 }) => ( ( ); -AddSkylinkToAPIKeyForm.propTypes = { +AddSkylinkToSponsorKeyForm.propTypes = { addSkylink: PropTypes.func.isRequired, }; diff --git a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js similarity index 96% rename from packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js rename to packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js index b9540ea1..0f8b8c62 100644 --- a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js +++ b/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, }; diff --git a/packages/dashboard-v2/src/lib/config.js b/packages/dashboard-v2/src/lib/config.js new file mode 100644 index 00000000..9c3beb35 --- /dev/null +++ b/packages/dashboard-v2/src/lib/config.js @@ -0,0 +1 @@ +export const DATE_FORMAT = "MMM D, YYYY HH:MM"; diff --git a/packages/dashboard-v2/src/pages/settings/developer-settings.js b/packages/dashboard-v2/src/pages/settings/developer-settings.js index 02f92e1b..cb58ab51 100644 --- a/packages/dashboard-v2/src/pages/settings/developer-settings.js +++ b/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 = () => {

{" "} {/* TODO: missing documentation link */}
- +
{error ? ( @@ -81,10 +81,7 @@ const DeveloperSettingsPage = () => {
API keys

- These keys provide full access to Accounts service and are equivalent to using a JWT token. -

-

- 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.