Merge pull request tone-row#341 from tone-row/dev

v1.13.0
meeki-ai · Sep 21, 2022 · 017f016 · 017f016
2 parents 9e6e274 + c527db2
commit 017f016
Show file tree

Hide file tree

Showing 24 changed files with 1,536 additions and 305 deletions.
diff --git a/app/e2e/auth.spec.ts b/app/e2e/auth.spec.ts
@@ -3,25 +3,25 @@ import { expect, test } from "@playwright/test";
 import { getTempEmail, getTempEmailMessage, goToPath, goToTab } from "./utils";
 
 const SPONSOR_PLANS = ["$5 / Month", "$50 / Year"] as const;
-const EMAILS: Record<typeof SPONSOR_PLANS[number], string> = {
+const EMAIL_ADDRESSES: Record<typeof SPONSOR_PLANS[number], string> = {
   "$5 / Month": "",
   "$50 / Year": "",
 };
-test.describe("Sign Up", () => {
+test.describe.skip("Sign Up", () => {
   test.beforeEach(async ({ page }) => {
     await goToPath(page);
   });
 
   for (const plan of SPONSOR_PLANS) {
     test(`Sponsors > Become a ${plan} Sponsor`, async ({ page }) => {
-      test.setTimeout(60000);
+      test.setTimeout(240000);
 
       const email = await getTempEmail();
 
       // expect email not to be null
       expect(email).toBeTruthy();
 
-      EMAILS[plan] = email;
+      EMAIL_ADDRESSES[plan] = email;
 
       await goToTab(page, "Sponsors");
 
@@ -67,17 +67,18 @@ test.describe("Sign Up", () => {
         )
       ).toBeVisible({ timeout: 60000 });
 
-      // Wait 5 seconds
-      await new Promise((resolve) => setTimeout(resolve, 5000));
-
-      // Make Sure Log in Email is sent
-      let emails = await getTempEmailMessage(EMAILS[plan]);
-
-      if (!emails.length) {
+      let emails = [],
+        i = 0;
+      while (emails.length === 0 && i < 20) {
         // Wait 5 seconds
-        await new Promise((resolve) => setTimeout(resolve, 5000));
+        await new Promise((resolve) => setTimeout(resolve, 10000));
+
+        const response = await getTempEmailMessage(EMAIL_ADDRESSES[plan]);
 
-        emails = await getTempEmailMessage(EMAILS[plan]);
+        if (!("error" in response)) {
+          emails = response;
+        }
+        i++;
       }
 
       expect(emails.length).toBeGreaterThanOrEqual(1);

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "module/module.js",
   "license": "MIT",
   "scripts": {

diff --git a/app/playwright.config.ts b/app/playwright.config.ts
@@ -7,7 +7,7 @@ const isDebug = !!process.env.DEBUG;
 const config: PlaywrightTestConfig = {
   testDir: "e2e",
   workers: 6,
-  timeout: 90000,
+  timeout: 120000,
   use: {
     acceptDownloads: true,
     viewport: {
@@ -23,9 +23,9 @@ const config: PlaywrightTestConfig = {
   projects: isDebug
     ? [
         {
-          name: "Chromium",
+          name: "Firefox",
           use: {
-            browserName: "chromium",
+            browserName: "firefox",
           },
         },
       ]

diff --git a/app/src/components/ClearTextButton.tsx b/app/src/components/ClearTextButton.tsx
@@ -29,7 +29,7 @@ export function ClearTextButton({ handleClear }: { handleClear: () => void }) {
         dialogProps={{
           isOpen: dialogOpen,
           onDismiss: () => setDialogOpen(false),
-          "aria-label": t`Clear text`,
+          "aria-label": t`Clear text?`,
         }}
       >
         <Trans>Clear text?</Trans>

diff --git a/app/src/components/Router.tsx b/app/src/components/Router.tsx
@@ -20,7 +20,7 @@ export default function Router() {
       <LayoutRoute path="/h" exact>
         <Help />
       </LayoutRoute>
-      <Route path="/n" exact>
+      <Route path="/n/:graphText?">
         <New />
       </Route>
       <LayoutRoute path="/u/:id">

diff --git a/app/src/components/ShareDialog.tsx b/app/src/components/ShareDialog.tsx
@@ -27,7 +27,8 @@ export default function ShareDialog() {
   const { shareModal, setShareModal, shareLink } = useContext(AppContext);
   const close = useCallback(() => setShareModal(false), [setShareModal]);
   const fullscreen = `${new URL(window.location.href).origin}/f#${shareLink}`;
-  const withEditor = `${new URL(window.location.href).origin}/c#${shareLink}`;
+  const readOnly = `${new URL(window.location.href).origin}/c#${shareLink}`;
+  const editable = `${new URL(window.location.href).origin}/n/${shareLink}`;
   const makePublic = useMutation(
     "makeChartPublic",
     async (isPublic: boolean) => {
@@ -132,10 +133,11 @@ export default function ShareDialog() {
             title={t`Fullscreen`}
             rawTitle="Fullscreen"
           />
+          <LinkCopy value={editable} title={t`Editable`} rawTitle="Editable" />
           <LinkCopy
-            value={withEditor}
-            title={t`With Editor`}
-            rawTitle="With Editor"
+            value={readOnly}
+            title={t`Read-only`}
+            rawTitle="Read-only"
           />
         </Box>
       </Column>

diff --git a/app/src/lib/hooks.ts b/app/src/lib/hooks.ts
@@ -134,7 +134,11 @@ export function useReadOnlyText() {
   const { public_id = "" } = useParams<{ public_id: string }>();
   const { data } = usePublicChart(public_id);
   const { path } = useRouteMatch();
-  const isCompressed = ["/c/:graphText?", "/f/:graphText?"].includes(path);
+  const isCompressed = [
+    "/c/:graphText?",
+    "/f/:graphText?",
+    "/n/:graphText?",
+  ].includes(path);
   const { graphText = window.location.hash.slice(1) } = useParams<{
     graphText: string;
   }>();

diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js
@@ -1 +1,164 @@
-/*eslint-disable*/module.exports={messages:{"$5 / Month":"5 $ / Monat","$50 / Year":"50 $ / Jahr","Access these charts from anywhere.<0/>Share/embed charts that stay in sync with your edits.":"Greifen Sie von überall auf diese Diagramme zu.<0/>Teilen/Einbetten von Diagrammen, die mit Ihren Bearbeitungen synchronisiert bleiben.","Already a sponsor? Log in here":"Sind Sie schon ein Sponsor? Hier anmelden","Amount":"Betrag","An error occurred. Try resubmitting or email {0} directly.":["Es ist ein Fehler aufgetreten. Versuchen Sie, es erneut einzureichen oder senden Sie eine E-Mail direkt an ",["0"],"."],"Appearance":"Erscheinungsbild","Back To Editor":"Zurück zum Editor","Become a Sponsor":"Werden Sie zum Sponsoren","Bottom to Top":"Von unten nach oben","Breadthfirst":"In die Breite","Cancel":"Abbrechen","Cancel your subscription. Your hosted charts will become read-only.":"Kündigen Sie Ihr Abonnement. Ihre gehosteten Diagramme werden schreibgeschützt.","Charts":"Diagramme","Check your email for a link to log in. You can close this window.":"Prüfen Sie Ihre E-Mail auf einen Link zum Einloggen. Sie können dieses Fenster schließen.","Circle":"Kreis","Clay":"Ton","Clear":"Löschen","Clear text":"Clear text","Clear text?":"Text löschen?","Clone":"Klon","Close":"Schließen","Comic Book":"Comic-Buch","Concentric":"Konzentrisch","Contract":"Zusammenziehen","Convert to hosted chart?":"In gehostetes Diagramm konvertieren?","Copy":"Kopieren","Copy PNG Image":"PNG-Bild kopieren","Copy SVG Code":"Kopieren Sie den SVG-Code","Create":"Erstellen","Create a link directly using the exact label text":"Erstellen Sie direkt einen Link mit dem genauen Beschriftungstext","Created":"Erstellt","Dark":"Dunkel","Dark Mode":"Dunkelmodus","Date":"Datum","Delete":"Löschen","Direction":"Richtung","Do you want to cancel your subscription?":"Möchten Sie Ihr Abonnement kündigen?","Do you want to delete this?":"Möchten Sie dies löschen?","Download":"Herunterladen","Download JPG":"JPG herunterladen","Download PNG":"PNG herunterladen","Download SVG":"SVG herunterladen","Duplicate":"Duplizieren","Edit your charts on any device. Share them with anyone. Publish your charts once and they remain up to date with your changes.":"Bearbeiten Sie Ihre Diagramme auf jedem Gerät. Teilen Sie diese mit jedem. Veröffentlichen Sie Ihre Diagramme einmal und sie bleiben mit Ihren Änderungen auf dem neuesten Stand.","Editor":"Editor","Eggs":"Eier","Email":"E-Mail","Enter a title":"Titel eingeben","Excalidraw":"Excalidraw","Expand":"Erweitern","Export":"Exportieren","Feedback":"Feedback","Follow Us":"Folgen Sie uns","Freeze Layout":"Layout einfrieren","Freezing your chart allows you to customize the layout by disabling automatic layout.":"Wenn Sie Ihr Diagramm einfrieren, können Sie das Layout anpassen, indem Sie das automatische Layout deaktivieren.","Fullscreen":"Vollbild","Futuristic":"Futuristisch","Get More Layouts":"Mehr Layouts erhalten","Get More Themes":"Weitere Themen erhalten","Get access to alternative styles for your flowcharts":"Erhalten Sie Zugriff auf alternative Stile für Ihre Flussdiagramme","Graph":"Diagramm","Grid":"Raster","Have fun! 🎉":"Viel Spaß! 🎉","Help":"Hilfe","History":"Verlauf","Home":"Startseite","Hosted Charts":"Gehostete Diagramme","Indenting creates a link to the current line":"Durch das Einrücken wird eine Verbindung zur aktuellen Zeile hergestellt","Language":"Sprache","Layout":"Layout","Learn More":"Mehr erfahren","Left to Right":"Von links nach rechts","Light":"Hell","Light Mode":"Heller Modus","Link":"Link","Local Charts":"Lokale Diagramme","Log Out":"Abmelden","Made by <0>Tone Row</0>":"Gemacht von <0>Tone Row</0>","Make a Donation":"Spenden","Make publicly accessible":"Öffentlich zugänglich machen","Monospace":"Monospace","More Layouts":"Weitere Layouts","More Themes":"Weitere Themen","Museum":"Museum","Name":"Name","Need Help? <0>Check out our documentation.</0>":"Brauchen Sie Hilfe? <0>Sehen Sie sich unsere Dokumentation an.</0>","New":"Neues","Next charge":"Nächste Gebühr","Playbook":"Spielbuch","Powerful layout algorithms that bring order to graphs of all shapes and sizes":"Leistungsstarke Layout-Algorithmen, die Ordnung in Diagramme aller Formen und Größen bringen","Public":"Öffentlich","Random":"Zufällig","Rename":"Umbenennen","Reset":"Zurücksetzen","Resume Subscription":"Abonnement fortsetzen","Retro":"Retro","Return":"Zurückkehren","Right to Left":"Von rechts nach links","Settings":"Einstellungen","Sign In":"Einloggen","Sign Up":"Registrieren","Sponsor flowchart.fun for $5 a month to access hosted flowcharts and the newest styles and features":"Sponsern Sie flowchart.fun für 5 $ pro Monat, um Zugang zu gehosteten Flussdiagrammen und den neuesten Stilen und Funktionen zu erhalten","Sponsor flowchart.fun for <0>$5/month</0> or <1>$50/year</1> to get access to...":"Sponsern Sie flowchart.fun für <0>$5 / Monat</0> oder <1>$50 / Jahr</1>, um Zugang zu...","Sponsors":"Sponsoren","Start":"Start","Status":"Status","Submit":"Einsenden","Subscription":"Abonnement","Subscription will end":"Abonnement wird beendet","Thank you for your feedback!":"Danke für Ihr Feedback!","Theme":"Thema","These charts are only available in this browser on this device.<0/>Clearing your browser local storage will erase these.":"Diese Diagramme sind nur in diesem Browser auf diesem Gerät verfügbar.<0/>Wenn Sie Ihren Browser-local storage leeren, werden sie gelöscht.","This app works by typing":"Diese App funktioniert durch Tippen","Top to Bottom":"Von oben nach unten","Try again":"Erneut versuchen","Updated":"Aktualisiert","User":"Benutzer","View on Github":"Auf Github ansehen","We appreciate all of your feedback, suggestions, bugs, and feature requests!":"Wir freuen uns über Ihr Feedback, Ihre Vorschläge, Fehler und Funktionsanfragen!","We use cookies to keep you logged in.":"Wir verwenden Cookies, um Sie eingeloggt zu halten.","What would you like to name this copy?":"Wie möchten Sie diese Kopie nennen?","What would you like to share with us?":"Was möchten Sie uns mitteilen?","With Editor":"Mit Editor","Your subscription is no longer active. If you want to create and edit hosted charts become a sponsor.":"Ihr Abonnement ist nicht mehr aktiv. Wenn Sie gehostete Diagramme erstellen und bearbeiten möchten, werden Sie Sponsor.","[custom ID] or":"[benutzerdefinierte ID] oder","any text: before a colon creates a label":"Jeder beliebige Text: vor einem Doppelpunkt wird zu einer Beschriftung","by adding an %5BID%5D and referencing that":"indem man ein %5BID%5D hinzufügt und darauf verweist","comments":"Kommentare","like this: (This app works by typing)":"so wie hier: (Diese App funktioniert durch Tippen)","like this: (custom ID) // You can also use single-line comments":"so wie hier: (benutzerdefinierte ID) // Sie können auch einzeilige Kommentare verwenden","multiline":"mehrzeilige","or":"oder"}};
+/*eslint-disable*/ module.exports = {
+  messages: {
+    "$5 / Month": "5 $ / Monat",
+    "$50 / Year": "50 $ / Jahr",
+    "Access these charts from anywhere.<0/>Share/embed charts that stay in sync with your edits.":
+      "Greifen Sie von überall auf diese Diagramme zu.<0/>Teilen/Einbetten von Diagrammen, die mit Ihren Bearbeitungen synchronisiert bleiben.",
+    "Already a sponsor? Log in here":
+      "Sind Sie schon ein Sponsor? Hier anmelden",
+    Amount: "Betrag",
+    "An error occurred. Try resubmitting or email {0} directly.": [
+      "Es ist ein Fehler aufgetreten. Versuchen Sie, es erneut einzureichen oder senden Sie eine E-Mail direkt an ",
+      ["0"],
+      ".",
+    ],
+    Appearance: "Erscheinungsbild",
+    "Back To Editor": "Zurück zum Editor",
+    "Become a Sponsor": "Werden Sie zum Sponsoren",
+    "Bottom to Top": "Von unten nach oben",
+    Breadthfirst: "In die Breite",
+    Cancel: "Abbrechen",
+    "Cancel your subscription. Your hosted charts will become read-only.":
+      "Kündigen Sie Ihr Abonnement. Ihre gehosteten Diagramme werden schreibgeschützt.",
+    Charts: "Diagramme",
+    "Check your email for a link to log in. You can close this window.":
+      "Prüfen Sie Ihre E-Mail auf einen Link zum Einloggen. Sie können dieses Fenster schließen.",
+    Circle: "Kreis",
+    Clay: "Ton",
+    Clear: "Löschen",
+    "Clear text?": "Text löschen?",
+    Clone: "Klon",
+    Close: "Schließen",
+    "Comic Book": "Comic-Buch",
+    Concentric: "Konzentrisch",
+    Contract: "Zusammenziehen",
+    "Convert to hosted chart?": "In gehostetes Diagramm konvertieren?",
+    Copy: "Kopieren",
+    "Copy PNG Image": "PNG-Bild kopieren",
+    "Copy SVG Code": "Kopieren Sie den SVG-Code",
+    Create: "Erstellen",
+    "Create a link directly using the exact label text":
+      "Erstellen Sie direkt einen Link mit dem genauen Beschriftungstext",
+    Created: "Erstellt",
+    Dark: "Dunkel",
+    "Dark Mode": "Dunkelmodus",
+    Date: "Datum",
+    Delete: "Löschen",
+    Direction: "Richtung",
+    "Do you want to cancel your subscription?":
+      "Möchten Sie Ihr Abonnement kündigen?",
+    "Do you want to delete this?": "Möchten Sie dies löschen?",
+    Download: "Herunterladen",
+    "Download JPG": "JPG herunterladen",
+    "Download PNG": "PNG herunterladen",
+    "Download SVG": "SVG herunterladen",
+    Duplicate: "Duplizieren",
+    "Edit your charts on any device. Share them with anyone. Publish your charts once and they remain up to date with your changes.":
+      "Bearbeiten Sie Ihre Diagramme auf jedem Gerät. Teilen Sie diese mit jedem. Veröffentlichen Sie Ihre Diagramme einmal und sie bleiben mit Ihren Änderungen auf dem neuesten Stand.",
+    Editable: "Editierbar",
+    Editor: "Editor",
+    Eggs: "Eier",
+    Email: "E-Mail",
+    "Enter a title": "Titel eingeben",
+    Excalidraw: "Excalidraw",
+    Expand: "Erweitern",
+    Export: "Exportieren",
+    Feedback: "Feedback",
+    "Follow Us": "Folgen Sie uns",
+    "Freeze Layout": "Layout einfrieren",
+    "Freezing your chart allows you to customize the layout by disabling automatic layout.":
+      "Wenn Sie Ihr Diagramm einfrieren, können Sie das Layout anpassen, indem Sie das automatische Layout deaktivieren.",
+    Fullscreen: "Vollbild",
+    Futuristic: "Futuristisch",
+    "Get More Layouts": "Mehr Layouts erhalten",
+    "Get More Themes": "Weitere Themen erhalten",
+    "Get access to alternative styles for your flowcharts":
+      "Erhalten Sie Zugriff auf alternative Stile für Ihre Flussdiagramme",
+    Graph: "Diagramm",
+    Grid: "Raster",
+    "Have fun! 🎉": "Viel Spaß! 🎉",
+    Help: "Hilfe",
+    History: "Verlauf",
+    Home: "Startseite",
+    "Hosted Charts": "Gehostete Diagramme",
+    "Indenting creates a link to the current line":
+      "Durch das Einrücken wird eine Verbindung zur aktuellen Zeile hergestellt",
+    Language: "Sprache",
+    Layout: "Layout",
+    "Learn More": "Mehr erfahren",
+    "Left to Right": "Von links nach rechts",
+    Light: "Hell",
+    "Light Mode": "Heller Modus",
+    Link: "Link",
+    "Local Charts": "Lokale Diagramme",
+    "Log Out": "Abmelden",
+    "Made by <0>Tone Row</0>": "Gemacht von <0>Tone Row</0>",
+    "Make a Donation": "Spenden",
+    "Make publicly accessible": "Öffentlich zugänglich machen",
+    Monospace: "Monospace",
+    "More Layouts": "Weitere Layouts",
+    "More Themes": "Weitere Themen",
+    Museum: "Museum",
+    Name: "Name",
+    "Need Help? <0>Check out our documentation.</0>":
+      "Brauchen Sie Hilfe? <0>Sehen Sie sich unsere Dokumentation an.</0>",
+    New: "Neues",
+    "Next charge": "Nächste Gebühr",
+    Playbook: "Spielbuch",
+    "Powerful layout algorithms that bring order to graphs of all shapes and sizes":
+      "Leistungsstarke Layout-Algorithmen, die Ordnung in Diagramme aller Formen und Größen bringen",
+    Public: "Öffentlich",
+    Random: "Zufällig",
+    "Read-only": "Schreibgeschützt",
+    Rename: "Umbenennen",
+    Reset: "Zurücksetzen",
+    "Resume Subscription": "Abonnement fortsetzen",
+    Retro: "Retro",
+    Return: "Zurückkehren",
+    "Right to Left": "Von rechts nach links",
+    Settings: "Einstellungen",
+    "Sign In": "Einloggen",
+    "Sign Up": "Registrieren",
+    "Sponsor flowchart.fun for $5 a month to access hosted flowcharts and the newest styles and features":
+      "Sponsern Sie flowchart.fun für 5 $ pro Monat, um Zugang zu gehosteten Flussdiagrammen und den neuesten Stilen und Funktionen zu erhalten",
+    "Sponsor flowchart.fun for <0>$5/month</0> or <1>$50/year</1> to get access to...":
+      "Sponsern Sie flowchart.fun für <0>$5 / Monat</0> oder <1>$50 / Jahr</1>, um Zugang zu...",
+    Sponsors: "Sponsoren",
+    Start: "Start",
+    Status: "Status",
+    Submit: "Einsenden",
+    Subscription: "Abonnement",
+    "Subscription will end": "Abonnement wird beendet",
+    "Thank you for your feedback!": "Danke für Ihr Feedback!",
+    Theme: "Thema",
+    "These charts are only available in this browser on this device.<0/>Clearing your browser local storage will erase these.":
+      "Diese Diagramme sind nur in diesem Browser auf diesem Gerät verfügbar.<0/>Wenn Sie Ihren Browser-local storage leeren, werden sie gelöscht.",
+    "This app works by typing": "Diese App funktioniert durch Tippen",
+    "Top to Bottom": "Von oben nach unten",
+    "Try again": "Erneut versuchen",
+    Updated: "Aktualisiert",
+    User: "Benutzer",
+    "View on Github": "Auf Github ansehen",
+    "We appreciate all of your feedback, suggestions, bugs, and feature requests!":
+      "Wir freuen uns über Ihr Feedback, Ihre Vorschläge, Fehler und Funktionsanfragen!",
+    "We use cookies to keep you logged in.":
+      "Wir verwenden Cookies, um Sie eingeloggt zu halten.",
+    "What would you like to name this copy?":
+      "Wie möchten Sie diese Kopie nennen?",
+    "What would you like to share with us?": "Was möchten Sie uns mitteilen?",
+    "Your subscription is no longer active. If you want to create and edit hosted charts become a sponsor.":
+      "Ihr Abonnement ist nicht mehr aktiv. Wenn Sie gehostete Diagramme erstellen und bearbeiten möchten, werden Sie Sponsor.",
+    "[custom ID] or": "[benutzerdefinierte ID] oder",
+    "any text: before a colon creates a label":
+      "Jeder beliebige Text: vor einem Doppelpunkt wird zu einer Beschriftung",
+    "by adding an %5BID%5D and referencing that":
+      "indem man ein %5BID%5D hinzufügt und darauf verweist",
+    comments: "Kommentare",
+    "like this: (This app works by typing)":
+      "so wie hier: (Diese App funktioniert durch Tippen)",
+    "like this: (custom ID) // You can also use single-line comments":
+      "so wie hier: (benutzerdefinierte ID) // Sie können auch einzeilige Kommentare verwenden",
+    multiline: "mehrzeilige",
+    or: "oder",
+  },
+};