Dashboard v2 - fixes + publishing under /v2 path (#2008)

* fix(dashboard-v2): fix current usage graph on portals without Stripe configured * ops(dashboard-v2): publish new dashboard under /v2 prefix * ops(dashboard-v2): fix SkynetClient on multi-server portals * fix(dashboard-v2): fix skylinks validation for sponsor keys * ops(dashboard-v2): don't actually launch the new dashboard yet :) * chore(dashboard-v2): cleanup console.log call * fix(dashboard-v2): always set portal domain for SkynetClient
2022-04-19 13:16:57 +02:00 · 2022-04-19 13:16:57 +02:00 · f433287bb6
parent 16c7e0bafa
commit f433287bb6
14 changed files with 55 additions and 22 deletions
--- a/docker/nginx/conf.d/server/server.account
+++ b/docker/nginx/conf.d/server/server.account
@ -3,6 +3,11 @@ listen 443 ssl http2;
 include /etc/nginx/conf.d/include/ssl-settings;
 include /etc/nginx/conf.d/include/init-optional-variables;

+# Uncomment to launch new Dashboard under /v2 path 
+# location /v2 {
+#   proxy_pass http://dashboard-v2:9000;
+# }
+
 location / {
    proxy_pass http://dashboard:3000;
 }
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@ -11,6 +11,7 @@ module.exports = {
    title: `Account Dashboard`,
    siteUrl: `https://account.${GATSBY_PORTAL_DOMAIN}`,
  },
+  pathPrefix: "/v2",
  trailingSlash: "never",
  plugins: [
    "gatsby-plugin-image",
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@ -11,8 +11,8 @@
    "develop": "gatsby develop",
    "develop:secure": "dotenv -e .env.development -- gatsby develop --https -p=443",
    "start": "gatsby develop",
-    "build": "gatsby build",
-    "serve": "gatsby serve",
+    "build": "gatsby build --prefix-paths",
+    "serve": "gatsby serve --prefix-paths",
    "clean": "gatsby clean",
    "lint": "eslint .",
    "prettier": "prettier .",
--- a/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
+++ b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
 import { useUser } from "../../contexts/user";
 // import { SimpleUploadIcon } from "../Icons";

-const AVATAR_PLACEHOLDER = "/images/avatar-placeholder.svg";
+import avatarPlaceholder from "../../../static/images/avatar-placeholder.svg";

 export const AvatarUploader = (props) => {
  const { user } = useUser();
-  const [imageUrl, setImageUrl] = useState(AVATAR_PLACEHOLDER);
+  const [imageUrl, setImageUrl] = useState(avatarPlaceholder);

  useEffect(() => {
-    setImageUrl(user.avatarUrl ?? AVATAR_PLACEHOLDER);
+    setImageUrl(user.avatarUrl ?? avatarPlaceholder);
  }, [user]);

  return (
--- a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js
@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import fileSize from "pretty-bytes";
 import { Link } from "gatsby";
+import cn from "classnames";
 import useSWR from "swr";

 import { useUser } from "../../contexts/user";
@ -62,7 +63,9 @@ const ErrorMessage = () => (
 );

 export default function CurrentUsage() {
+  const { activePlan, plans } = useActivePlan();
  const { usage, error, loading } = useUsageData();
+  const nextPlan = useMemo(() => plans.find(({ tier }) => tier > activePlan?.tier), [plans, activePlan]);
  const storageUsage = size(usage.storageUsed);
  const storageLimit = size(usage.storageLimit);
  const filesUsedLabel = useMemo(() => ({ value: usage.filesUsed, unit: "files" }), [usage.filesUsed]);
@ -89,7 +92,7 @@ export default function CurrentUsage() {
          <span>{storageLimit.text}</span>
        </div>
        <UsageGraph>
-          <GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} />
+          <GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} className="normal-case" />
          <GraphBar value={usage.filesUsed} limit={usage.filesLimit} label={filesUsedLabel} />
        </UsageGraph>
        <div className="flex place-content-between">
@ -97,7 +100,10 @@ export default function CurrentUsage() {
          <span className="inline-flex place-content-between w-[37%]">
            <Link
              to="/upgrade"
-              className="text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline"
+              className={cn(
+                "text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline",
+                { invisible: !nextPlan }
+              )}
            >
              UPGRADE
            </Link>{" "}
--- a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js
@ -21,11 +21,11 @@ const BarLabel = styled.span.attrs({
  `}
 `;

-export const GraphBar = ({ value, limit, label }) => {
+export const GraphBar = ({ value, limit, label, className }) => {
  const percentage = typeof limit !== "number" || limit === 0 ? 0 : (value / limit) * 100;

  return (
-    <div className="relative flex items-center">
+    <div className={`relative flex items-center ${className}`}>
      <Bar $percentage={percentage}>
        <BarTip />
      </Bar>
--- a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
@ -1,9 +1,11 @@
 import styled from "styled-components";

+import usageGraphBg from "../../../static/images/usage-graph-bg.svg";
+
 export const UsageGraph = styled.div.attrs({
  className: "w-full my-3 grid grid-flow-row grid-rows-2",
 })`
  height: 146px;
-  background: url(/images/usage-graph-bg.svg) no-repeat;
+  background: url(${usageGraphBg}) no-repeat;
  background-size: cover;
 `;
--- a/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js
+++ b/packages/dashboard-v2/src/components/forms/AddSponsorKeyForm.js
@ -80,7 +80,7 @@ export const AddSponsorKeyForm = forwardRef(({ onSuccess }, ref) => {
                json: {
                  name,
                  public: "true",
-                  skylinks: [...skylinks, nextSkylink].filter(Boolean).map(parseSkylink),
+                  skylinks: [...skylinks, nextSkylink].filter(Boolean).map((skylink) => parseSkylink(skylink)),
                },
              })
              .json();
--- a/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
+++ b/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
@ -19,7 +19,14 @@ const aggregatePlansAndLimits = (plans, limits, { includeFreePlan }) => {

  // Decorate each plan with its corresponding limits data, if available.
  if (limits?.length) {
-    return sortedPlans.map((plan) => ({ ...plan, limits: limits[plan.tier] || null }));
+    return limits.map((limitsDescriptor, index) => {
+      const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};
+
+      return {
+        ...asssociatedPlan,
+        limits: limitsDescriptor || null,
+      };
+    });
  }

  // If we don't have the limits data yet, set just return the plans.
@ -40,10 +47,12 @@ export const PlansProvider = ({ children }) => {
    if (plansError || limitsError) {
      setLoading(false);
      setError(plansError || limitsError);
-    } else if (rawPlans) {
+    } else if (rawPlans || limits) {
      setLoading(false);
      setPlans(
-        aggregatePlansAndLimits(rawPlans, limits?.userLimits, { includeFreePlan: !settings.isSubscriptionRequired })
+        aggregatePlansAndLimits(rawPlans || [], limits?.userLimits, {
+          includeFreePlan: !settings.isSubscriptionRequired,
+        })
      );
    }
  }, [rawPlans, limits, plansError, limitsError, settings.isSubscriptionRequired]);
--- a/packages/dashboard-v2/src/layouts/AuthLayout.js
+++ b/packages/dashboard-v2/src/layouts/AuthLayout.js
@ -3,10 +3,13 @@ import styled from "styled-components";

 import { UserProvider } from "../contexts/user";

+import skynetLogo from "../../static/images/logo-black-text.svg";
+import authBg from "../../static/images/auth-bg.svg";
+
 const Layout = styled.div.attrs({
  className: "min-h-screen w-screen bg-black flex",
 })`
-  background-image: url(/images/auth-bg.svg);
+  background-image: url(${authBg});
  background-repeat: no-repeat;
  background-position: center center;
 `;
@ -36,7 +39,7 @@ const AuthLayout =
            <Content>
              <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
                <div className="mb-4 md:mb-16">
-                  <img src="/images/logo-black-text.svg" alt="Skynet" className="-ml-2" />
+                  <img src={skynetLogo} alt="Skynet" className="-ml-2" />
                </div>
                {children}
              </div>
--- a/packages/dashboard-v2/src/layouts/DashboardLayout.js
+++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js
@ -7,10 +7,12 @@ import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
 import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";

+import dashboardBg from "../../static/images/dashboard-bg.svg";
+
 const Wrapper = styled.div.attrs({
  className: "min-h-screen overflow-hidden",
 })`
-  background-image: url(/images/dashboard-bg.svg);
+  background-image: url(${dashboardBg});
  background-position: center -280px;
  background-repeat: no-repeat;
 `;
--- a/packages/dashboard-v2/src/pages/settings/developer-settings.js
+++ b/packages/dashboard-v2/src/pages/settings/developer-settings.js
@ -10,6 +10,8 @@ import { AddSponsorKeyForm } from "../../components/forms/AddSponsorKeyForm";
 import { Metadata } from "../../components/Metadata";
 import HighlightedLink from "../../components/HighlightedLink";

+import apiKeysImg from "../../../static/images/api-keys.svg";
+
 const DeveloperSettingsPage = () => {
  const { data: allKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys");
  const apiKeys = allKeys.filter(({ public: isPublic }) => isPublic === "false");
@ -103,7 +105,7 @@ const DeveloperSettingsPage = () => {
          </section>
        </div>
        <div className="hidden xl:block w-full text-right pt-16 pr-5">
-          <img src="/images/api-keys.svg" alt="" className="inline-block h-[150px]" />
+          <img src={apiKeysImg} alt="" className="inline-block h-[150px]" />
        </div>
      </div>
    </>
--- a/packages/dashboard-v2/src/pages/settings/export.js
+++ b/packages/dashboard-v2/src/pages/settings/export.js
@ -6,6 +6,8 @@ import { Switch } from "../../components/Switch";
 import { Button } from "../../components/Button";
 import { Metadata } from "../../components/Metadata";

+import exportImg from "../../../static/images/import-export.svg";
+
 const useExportOptions = () => {
  const [pinnedFiles, setPinnedFiles] = useState(false);
  const [uploadHistory, setUploadHistory] = useState(false);
@ -65,7 +67,7 @@ const ExportPage = () => {
          </section>
        </div>
        <div className="hidden xl:block w-full text-right pt-20 pr-6">
-          <img src="/images/import-export.svg" alt="" className="inline-block w-[200px]" />
+          <img src={exportImg} alt="" className="inline-block w-[200px]" />
        </div>
      </div>
    </>
--- a/packages/dashboard-v2/src/pages/settings/notifications.js
+++ b/packages/dashboard-v2/src/pages/settings/notifications.js
@ -1,11 +1,12 @@
 import * as React from "react";
-import { StaticImage } from "gatsby-plugin-image";

 import UserSettingsLayout from "../../layouts/UserSettingsLayout";

 import { Switch } from "../../components/Switch";
 import { Metadata } from "../../components/Metadata";

+import inboxImg from "../../../static/images/inbox.svg";
+
 const NotificationsPage = () => {
  return (
    <>
@ -37,8 +38,8 @@ const NotificationsPage = () => {
            </ul>
          </section>
        </div>
-        <div className="hidden xl:block text-right w-full pr-14 pt-20">
-          <StaticImage src="../../../static/images/inbox.svg" alt="" placeholder="none" />
+        <div className="hidden xl:block text-right w-full pl-12 pt-20">
+          <img src={inboxImg} alt="" className="w-[200px]" />
        </div>
      </div>
    </>