feat: Add indication that user is editing published chart

app/components/chart-selection-tabs.tsx

@@ -1,6 +1,8 @@
-import { Trans } from "@lingui/macro";
-import { Box, Button, Popover, Tab, Tabs, Theme } from "@mui/material";
+import { Trans, t } from "@lingui/macro";
+import { Box, Button, Popover, Tab, Tabs, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import React from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 
@@ -23,7 +25,9 @@ import {
 } from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
+import { fetchChartConfig } from "@/utils/chart-config/api";
 import { createChartId } from "@/utils/create-chart-id";
+import { getRouterChartId } from "@/utils/router/helpers";
 import useEvent from "@/utils/use-event";
 
 type TabsState = {
@@ -277,16 +281,58 @@ const PublishChartButton = () => {
     }
   });
 
-  return (
+  const [editingPublishedChart, setEditingPublishedChart] =
+    React.useState(false);
+  const [loaded, setLoaded] = React.useState(false);
+  const { asPath } = useRouter();
+  const session = useSession();
+  const chartId = getRouterChartId(asPath);
+
+  React.useEffect(() => {
+    const run = async () => {
+      if (session.data?.user && chartId) {
+        const config = await fetchChartConfig(chartId);
+
+        if (config?.user_id === session.data.user.id) {
+          setEditingPublishedChart(true);
+        }
+      }
+
+      if (session.status !== "loading") {
+        setLoaded(true);
+      }
+    };
+
+    run();
+  }, [chartId, session]);
+
+  return loaded ? (
     <Button
       color="primary"
       variant="contained"
       onClick={metadata && components ? goNext : undefined}
       sx={{ minWidth: "fit-content" }}
     >
-      <Trans id="button.publish">Publish this visualization</Trans>
+      {editingPublishedChart ? (
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <Tooltip
+            title={t({
+              id: "button.update.warning",
+              message:
+                "Keep in mind that updating this visualization will affect all the places where it might be already embedded!",
+            })}
+          >
+            <div>
+              <Icon name="hintWarning" />
+            </div>
+          </Tooltip>
+          <Trans id="button.update">Update this visualization</Trans>
+        </Box>
+      ) : (
+        <Trans id="button.publish">Publish this visualization</Trans>
+      )}
     </Button>
-  );
+  ) : null;
 };
 
 type TabsInnerProps = {

app/configurator/configurator-state.tsx

@@ -96,6 +96,7 @@ import {
   migrateConfiguratorState,
 } from "@/utils/chart-config/versioning";
 import { createChartId } from "@/utils/create-chart-id";
+import { getRouterChartId } from "@/utils/router/helpers";
 import { unreachableError } from "@/utils/unreachable";
 
 export type ConfiguratorStateAction =
@@ -1527,7 +1528,7 @@ const ConfiguratorStateProviderInternal = ({
           (async () => {
             try {
               let dbConfig: ParsedConfig | undefined;
-              const key = asPath.split("?")[0].split("/").pop();
+              const key = getRouterChartId(asPath);
 
               if (key && user) {
                 const config = await fetchChartConfig(key);

app/locales/de/messages.po

@@ -115,6 +115,14 @@ msgstr "Diese Visualisierung veröffentlichen"
 msgid "button.share"
 msgstr "Teilen"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update"
+msgstr "Diese Visualisierung aktualisieren"
+
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update.warning"
+msgstr "Denken Sie daran, dass sich die Aktualisierung dieser Visualisierung auf alle Stellen auswirkt, an denen sie bereits eingebettet ist!"
+
 #: app/configurator/components/field-i18n.ts
 msgid "chart.map.layers.area"
 msgstr "Flächen"

app/locales/en/messages.po

@@ -115,6 +115,14 @@ msgstr "Publish this visualization"
 msgid "button.share"
 msgstr "Share"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update"
+msgstr "Update this visualization"
+
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update.warning"
+msgstr "Keep in mind that updating this visualization will affect all the places where it might be already embedded!"
+
 #: app/configurator/components/field-i18n.ts
 msgid "chart.map.layers.area"
 msgstr "Areas"

app/locales/fr/messages.po

@@ -115,6 +115,14 @@ msgstr "Publier cette visualisation"
 msgid "button.share"
 msgstr "Partager"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update"
+msgstr "Actualiser cette visualisation"
+
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update.warning"
+msgstr "Gardez à l'esprit que la mise à jour de cette visualisation affectera tous les endroits où elle est déjà intégrée !"
+
 #: app/configurator/components/field-i18n.ts
 msgid "chart.map.layers.area"
 msgstr "Zones"

app/locales/it/messages.po

@@ -115,6 +115,14 @@ msgstr "Pubblica questa visualizzazione"
 msgid "button.share"
 msgstr "Condividi"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update"
+msgstr "Aggiornare questa visualizzazione"
+
+#: app/components/chart-selection-tabs.tsx
+msgid "button.update.warning"
+msgstr "Tenete presente che l'aggiornamento di questa visualizzazione avrà effetto su tutti i luoghi in cui potrebbe essere già incorporata!"
+
 #: app/configurator/components/field-i18n.ts
 msgid "chart.map.layers.area"
 msgstr "Aree"

app/utils/router/helpers.ts

@@ -31,3 +31,7 @@ export const setURLParam = (param: string, value: string) => {
     newUrl
   );
 };
+
+export const getRouterChartId = (asPath: string) => {
+  return asPath.split("?")[0].split("/").pop();
+};