Save draft

README.md

@@ -1,5 +1,37 @@
 # Visualization Tool
 
+<!-- vscode-markdown-toc -->
+
+- 1. [Documentation](#Documentation)
+- 2. [Development Environment](#DevelopmentEnvironment)
+  - 2.1. [Setting up the dev environment](#Settingupthedevenvironment)
+  - 2.2. [Dev server](#Devserver)
+  - 2.3. [Postgres database](#Postgresdatabase)
+  - 2.4. [Building the Embed script `/dist/embed.js`](#BuildingtheEmbedscriptdistembed.js)
+    - 2.4.1. [Database migrations](#Databasemigrations)
+- 3. [Versioning](#Versioning)
+- 4. [Deployment](#Deployment)
+  - 4.1. [Heroku](#Heroku)
+  - 4.2. [Abraxas](#Abraxas)
+  - 4.3. [Docker (anywhere)](#Dockeranywhere)
+- 5. [E2E tests](#E2Etests)
+- 6. [GraphQL performance tests](#GraphQLperformancetests)
+  - 6.1. [Automation](#Automation)
+  - 6.2. [How to add or modify the tests](#Howtoaddormodifythetests)
+- 7. [Load tests](#Loadtests)
+  - 7.1. [Automation](#Automation-1)
+  - 7.2. [Local setup](#Localsetup)
+  - 7.3. [Running the tests locally](#Runningthetestslocally)
+  - 7.4. [Recording the tests using Playwright](#RecordingthetestsusingPlaywright)
+- 8. [Authentication](#Authentication)
+  - 8.1. [Locally](#Locally)
+
+<!-- vscode-markdown-toc-config
+	numbering=true
+	autoSave=true
+	/vscode-markdown-toc-config -->
+<!-- /vscode-markdown-toc -->
+
 ## Documentation
 
 A public documentation is available at https://visualize.admin.ch/docs/.

app/components/arrow-menu.tsx

@@ -0,0 +1,22 @@
+import { Menu, paperClasses, styled } from "@mui/material";
+
+export const ArrowMenu = styled(Menu)(({ theme }) => ({
+  [`& .${paperClasses.root}`]: {
+    overflowY: "visible",
+    overflowX: "visible",
+    "&:before": {
+      content: '" "',
+      display: "block",
+      background: theme.palette.background.paper,
+      width: 10,
+      height: 10,
+      transform: "rotate(45deg)",
+      position: "absolute",
+      margin: "auto",
+      top: -5,
+
+      left: 0,
+      right: 0,
+    },
+  },
+}));

app/components/chart-selection-tabs.tsx

@@ -1,19 +1,23 @@
-import { Trans, t } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import {
   Box,
   BoxProps,
   Button,
+  Grow,
   Popover,
   Tab,
   Tabs,
   Theme,
   Tooltip,
+  useEventCallback,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { PUBLISHED_STATE } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import { useDebounce } from "use-debounce";
 
 import { extractChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import Flex from "@/components/flex";
@@ -33,14 +37,17 @@ import {
 } from "@/configurator";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
 import { getIconName } from "@/configurator/components/ui-helpers";
+import { useUserConfig } from "@/domain/user-configs";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
-import { fetchChartConfig } from "@/utils/chart-config/api";
+import { createConfig, updateConfig } from "@/utils/chart-config/api";
 import { createChartId } from "@/utils/create-chart-id";
 import { getRouterChartId } from "@/utils/router/helpers";
 import useEvent from "@/utils/use-event";
-import { useFetchData } from "@/utils/use-fetch-data";
+import { useMutate } from "@/utils/use-fetch-data";
+
+import { useLocalSnack } from "./use-local-snack";
 
 type TabsState = {
   popoverOpen: boolean;
@@ -314,22 +321,129 @@ export const LayoutChartButton = () => {
   );
 };
 
-export const PublishChartButton = () => {
-  const { asPath } = useRouter();
+export const SaveDraftButton = ({
+  chartId,
+}: {
+  chartId: string | undefined;
+}) => {
+  const { data: config, invalidate: invalidateConfig } = useUserConfig(chartId);
   const session = useSession();
-  const chartId = getRouterChartId(asPath);
-  const queryFn = React.useCallback(
-    () => fetchChartConfig(chartId ?? ""),
-    [chartId]
-  );
-  const { data: config, status } = useFetchData(queryFn, {
-    enable: !!(session.data?.user && chartId),
-    initialStatus: "fetching",
+
+  const [state] = useConfiguratorState();
+
+  const [snack, enqueueSnackbar, dismissSnack] = useLocalSnack();
+  const [debouncedSnack] = useDebounce(snack, 500);
+  const { asPath, replace } = useRouter();
+
+  const createConfigMut = useMutate(createConfig);
+  const updatePublishedStateMut = useMutate(updateConfig);
+  const loggedInId = session.data?.user.id;
+
+  const handleClick = useEventCallback(async () => {
+    try {
+      if (config?.user_id && loggedInId) {
+        const updated = await updatePublishedStateMut.mutate({
+          data: state,
+          user_id: loggedInId,
+          published_state: PUBLISHED_STATE.DRAFT,
+          key: config.key,
+        });
+
+        if (updated) {
+          if (asPath !== `/create/${updated.key}`) {
+            replace(`/create/new?edit=${updated.key}`);
+          }
+        } else {
+          throw new Error("Could not update draft");
+        }
+      } else if (state) {
+        const saved = await createConfigMut.mutate({
+          data: state,
+          user_id: loggedInId,
+          published_state: PUBLISHED_STATE.DRAFT,
+        });
+        if (saved) {
+          enqueueSnackbar({
+            message: t({
+              id: "button.save-draft.saved",
+              message: "Draft saved",
+            }),
+            variant: "success",
+          });
+          replace(`/create/new?edit=${saved.key}`);
+        } else {
+          throw new Error("Could not save draft");
+        }
+      }
+      invalidateConfig();
+    } catch (e) {
+      console.log(
+        `Error while saving draft: ${e instanceof Error ? e.message : e}`
+      );
+      enqueueSnackbar({
+        message: t({
+          id: "button.save-draft.error",
+          message: "Could not save draft",
+        }),
+        variant: "error",
+      });
+    }
+
+    setTimeout(() => {
+      updatePublishedStateMut.reset();
+      createConfigMut.reset();
+    }, 2000);
   });
+
+  const hasUpdated = !!(updatePublishedStateMut.data || createConfigMut.data);
+  const [debouncedHasUpdated] = useDebounce(hasUpdated, 300);
+
+  if (!loggedInId) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      arrow
+      title={debouncedSnack?.message ?? ""}
+      open={!!snack}
+      disableFocusListener
+      disableHoverListener
+      disableTouchListener
+      onClose={() => dismissSnack()}
+    >
+      <Button
+        endIcon={
+          hasUpdated || debouncedHasUpdated ? (
+            <Grow in={hasUpdated}>
+              <span>
+                <Icon name="check" />
+              </span>
+            </Grow>
+          ) : null
+        }
+        variant="outlined"
+        onClick={handleClick}
+      >
+        <Trans id="button.save-draft">Save draft</Trans>
+      </Button>
+    </Tooltip>
+  );
+};
+
+export const PublishChartButton = ({
+  chartId,
+}: {
+  chartId: string | undefined;
+}) => {
+  const session = useSession();
+  const { data: config } = useUserConfig(chartId);
   const editingPublishedChart =
-    session.data?.user.id && config?.user_id === session.data.user.id;
+    session.data?.user.id &&
+    config?.user_id === session.data.user.id &&
+    config.published_state === "PUBLISHED";
 
-  return status === "fetching" ? null : (
+  return (
     <NextStepButton>
       {editingPublishedChart ? (
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
@@ -375,6 +489,9 @@ const TabsInner = (props: TabsInnerProps) => {
   } = props;
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
 
+  const { asPath } = useRouter();
+  const chartId = getRouterChartId(asPath);
+
   return (
     <Box
       sx={{
@@ -422,6 +539,7 @@ const TabsInner = (props: TabsInnerProps) => {
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                         style={{ ...style, transform, opacity: 1 }}
+                        component="div"
                         key={d.key}
                         sx={{
                           mr: 2,
@@ -460,6 +578,7 @@ const TabsInner = (props: TabsInnerProps) => {
 
               {addable && (
                 <Tab
+                  component="div"
                   sx={{
                     ml: (theme) => `-${theme.spacing(2)}`,
                     p: 0,
@@ -478,13 +597,16 @@ const TabsInner = (props: TabsInnerProps) => {
         </Droppable>
       </DragDropContext>
 
-      {editable &&
-        isConfiguring(state) &&
-        (enableLayouting(state) ? (
-          <LayoutChartButton />
-        ) : (
-          <PublishChartButton />
-        ))}
+      <Box gap="0.5rem" display="flex">
+        {isConfiguring(state) ? <SaveDraftButton chartId={chartId} /> : null}
+        {editable &&
+          isConfiguring(state) &&
+          (enableLayouting(state) ? (
+            <LayoutChartButton />
+          ) : (
+            <PublishChartButton chartId={chartId} />
+          ))}
+      </Box>
     </Box>
   );
 };

app/components/confirmation-dialog.tsx

@@ -0,0 +1,84 @@
+import { t, Trans } from "@lingui/macro";
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogProps,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+const ConfirmationDialog = ({
+  title,
+  text,
+  onClick,
+  onSuccess,
+  onConfirm,
+  ...props
+}: DialogProps & {
+  title?: string;
+  text?: string;
+  onSuccess?: () => Promise<unknown> | void;
+  onConfirm?: () => Promise<unknown> | void;
+  onClick: () => Promise<unknown> | void;
+}) => {
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Dialog
+      // To prevent the click away listener from closing the dialog.
+      onClick={(e) => e.stopPropagation()}
+      onClose={close}
+      maxWidth="xs"
+      {...props}
+    >
+      <DialogTitle>
+        <Typography variant="h3">
+          {title ??
+            t({
+              id: "login.profile.chart.confirmation.default",
+              message: "Are you sure you want to perform this action?",
+            })}
+        </Typography>
+      </DialogTitle>
+      {text && (
+        <DialogContent>
+          <DialogContentText>{text}</DialogContentText>
+        </DialogContent>
+      )}
+      <DialogActions
+        sx={{
+          "& > .MuiButton-root": {
+            justifyContent: "center",
+            pointerEvents: loading ? "none" : "auto",
+          },
+        }}
+      >
+        <Button variant="text" onClick={close}>
+          <Trans id="no">No</Trans>
+        </Button>
+        <Button
+          variant="text"
+          onClick={async (e) => {
+            e.stopPropagation();
+            setLoading(true);
+
+            await onClick();
+            await new Promise((r) => setTimeout(r, 100));
+
+            props.onClose?.({}, "escapeKeyDown");
+            onSuccess?.();
+          }}
+        >
+          {loading ? <CircularProgress /> : <Trans id="yes">Yes</Trans>}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationDialog;

app/components/hint.tsx

@@ -265,7 +265,7 @@ export const OnlyNegativeDataHint = () => (
   </Alert>
 );
 
-export const Success = () => (
+export const PublishSuccess = () => (
   <Alert severity="success" icon={<Icon name="datasetSuccess" size={64} />}>
     <Trans id="hint.publication.success">
       Your visualization is now published. You can share and embed it using the