diff --git a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js index 3269bb9f..cadc2775 100644 --- a/packages/dashboard-v2/src/components/APIKeyList/APIKey.js +++ b/packages/dashboard-v2/src/components/APIKeyList/APIKey.js @@ -13,7 +13,7 @@ import { useAPIKeyRemoval } from "./useAPIKeyRemoval"; export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => { const { id, name, createdAt, skylinks } = apiKey; - const isPublic = apiKey.public === "true"; + const isSponsorKey = apiKey.public === "true"; const [error, setError] = useState(null); const onSkylinkListEdited = useCallback(() => { @@ -53,9 +53,9 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => { }, [abortEdit]); const skylinksNumber = skylinks?.length ?? 0; - const isNotConfigured = isPublic && skylinksNumber === 0; + const isNotConfigured = isSponsorKey && skylinksNumber === 0; const skylinksPhrasePrefix = skylinksNumber === 0 ? "No" : skylinksNumber; - const skylinksPhrase = `${skylinksPhrasePrefix} ${skylinksNumber === 1 ? "skylink" : "skylinks"} configured`; + const skylinksPhrase = `${skylinksPhrasePrefix} ${skylinksNumber === 1 ? "skylink" : "skylinks"} sponsored`; return (
  • { {name || "unnamed key"} - + {isSponsorKey && ( + + )} {dayjs(createdAt).format("MMM DD, YYYY")} - {isPublic && ( + {isSponsorKey && ( - )} + + +
    +
    )} @@ -110,5 +104,5 @@ AddAPIKeyForm.displayName = "AddAPIKeyForm"; AddAPIKeyForm.propTypes = { onSuccess: PropTypes.func.isRequired, - type: PropTypes.oneOf([APIKeyType.Public, APIKeyType.General]).isRequired, + type: PropTypes.oneOf([APIKeyType.Sponsor, APIKeyType.General]).isRequired, }; diff --git a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js b/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js index c98daac9..b9540ea1 100644 --- a/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js +++ b/packages/dashboard-v2/src/components/forms/AddPublicAPIKeyForm.js @@ -52,10 +52,10 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => { return (
    {state === State.Success && ( - + Success!

    Please copy your new API key below. We'll never show it again!

    -
    +
    {generatedKey} @@ -101,14 +101,14 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => { type="text" id="name" name="name" - label="Public API Key Name" + label="Sponsor API Key Name" placeholder="my_applications_statistics" error={errors.name} touched={touched.name} />
    -
    Skylinks accessible with the new key
    +
    Skylinks sponsored by the new key
    { @@ -182,7 +182,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => { className={cn("px-2.5", { "cursor-wait": isSubmitting })} disabled={!isValid || isSubmitting} > - {isSubmitting ? "Generating" : "Generate"} your public key + {isSubmitting ? "Generating your sponsor key..." : "Generate your sponsor key"}
    @@ -192,7 +192,7 @@ export const AddPublicAPIKeyForm = forwardRef(({ onSuccess }, ref) => { ); }); -AddPublicAPIKeyForm.displayName = "AddAPIKeyForm"; +AddPublicAPIKeyForm.displayName = "AddPublicAPIKeyForm"; AddPublicAPIKeyForm.propTypes = { onSuccess: PropTypes.func.isRequired, diff --git a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js index 81820021..f008ee40 100644 --- a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js +++ b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js @@ -16,8 +16,8 @@ const Sidebar = () => ( Export - - API Keys + + Developer settings diff --git a/packages/dashboard-v2/src/pages/settings/api-keys.js b/packages/dashboard-v2/src/pages/settings/developer-settings.js similarity index 57% rename from packages/dashboard-v2/src/pages/settings/api-keys.js rename to packages/dashboard-v2/src/pages/settings/developer-settings.js index 03486248..02f92e1b 100644 --- a/packages/dashboard-v2/src/pages/settings/api-keys.js +++ b/packages/dashboard-v2/src/pages/settings/developer-settings.js @@ -8,11 +8,12 @@ import { APIKeyList } from "../../components/APIKeyList/APIKeyList"; import { Alert } from "../../components/Alert"; import { AddPublicAPIKeyForm } from "../../components/forms/AddPublicAPIKeyForm"; import { Metadata } from "../../components/Metadata"; +import HighlightedLink from "../../components/HighlightedLink"; -const APIKeysPage = () => { - const { data: apiKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys"); - const generalKeys = apiKeys.filter(({ public: isPublic }) => isPublic === "false"); - const publicKeys = apiKeys.filter(({ public: isPublic }) => isPublic === "true"); +const DeveloperSettingsPage = () => { + const { data: allKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys"); + const apiKeys = allKeys.filter(({ public: isPublic }) => isPublic === "false"); + const sponsorKeys = allKeys.filter(({ public: isPublic }) => isPublic === "true"); const publicFormRef = useRef(); const generalFormRef = useRef(); @@ -31,53 +32,60 @@ const APIKeysPage = () => { return ( <> - API Keys + Developer settings
    -
    +
    -

    API Keys

    -

    There are two types of API keys that you can generate for your account.

    -

    Make sure to use the appropriate type.

    +

    Developer settings

    +

    API keys allow developers and applications to extend the functionality of your portal account.

    +

    Skynet uses two types of API keys, explained below.


    -
    Public keys
    -

    - Public keys provide read access to a selected list of skylinks. You can share them publicly. +

    Sponsor keys
    +
    +

    + Sponsor keys allow users without an account on this portal to download skylinks covered by the API key.

    - +

    + Learn more about sponsoring content with Sponsor API Keys{" "} + + here + + . +

    {" "} + {/* TODO: missing documentation link */}
    - {error ? ( - An error occurred while loading your API keys. Please try again later. + An error occurred while loading your sponsor keys. Please try again later. ) : (
    - {publicKeys?.length > 0 ? ( - refreshState(true)} /> + {sponsorKeys?.length > 0 ? ( + refreshState(true)} /> ) : ( - No public API keys found. + No sponsor keys found. )}
    )}
    +
    -
    General keys
    +
    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.

    -
    @@ -88,10 +96,10 @@ const APIKeysPage = () => { ) : (
    - {generalKeys?.length > 0 ? ( - refreshState(true)} /> + {apiKeys?.length > 0 ? ( + refreshState(true)} /> ) : ( - No general API keys found. + No API keys found. )}
    )} @@ -105,6 +113,6 @@ const APIKeysPage = () => { ); }; -APIKeysPage.Layout = UserSettingsLayout; +DeveloperSettingsPage.Layout = UserSettingsLayout; -export default APIKeysPage; +export default DeveloperSettingsPage;