Merge pull request #245 from visualize-admin/feat/remove-step

visualize-admin · Dec 2, 2021 · 61599dd · 61599dd
2 parents 6a7f9dc + 0a87ad9
commit 61599dd
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 156 deletions.
diff --git a/app/configurator/components/action-bar.tsx b/app/configurator/components/action-bar.tsx
@@ -1,5 +1,4 @@
 import { Trans } from "@lingui/macro";
-import NextLink from "next/link";
 import { ReactNode, useCallback } from "react";
 import { Button, Flex } from "theme-ui";
 import {
@@ -55,27 +54,12 @@ export const ActionBar = ({ dataSetIri }: { dataSetIri?: string }) => {
         alignItems: "center",
       }}
     >
-      {state.state === "SELECTING_DATASET" ? (
-        <>
-          <NextButton
-            label={nextLabel}
-            onClick={goNext}
-            disabled={nextDisabled}
-          />
-        </>
-      ) : state.state === "SELECTING_CHART_TYPE" ? (
-        <>
-          <NextLink href="/create/new" passHref>
-            <Button as="a" variant="inline" sx={{ mr: 4 }}>
-              {previousLabel}
-            </Button>
-          </NextLink>
-          <NextButton
-            label={nextLabel}
-            onClick={goNext}
-            disabled={nextDisabled}
-          />
-        </>
+      {state.state === "SELECTING_CHART_TYPE" ? (
+        <NextButton
+          label={nextLabel}
+          onClick={goNext}
+          disabled={nextDisabled}
+        />
       ) : (
         <>
           <Button

diff --git a/app/configurator/components/chart-type-selector.tsx b/app/configurator/components/chart-type-selector.tsx
@@ -8,10 +8,10 @@ import { useDataCubeMetadataWithComponentValuesQuery } from "../../graphql/query
 import { DataCubeMetadata } from "../../graphql/types";
 import { Icon } from "../../icons";
 import { useLocale } from "../../locales/use-locale";
+import { useTheme } from "../../themes";
 import { FieldProps, useChartTypeSelectorField } from "../config-form";
 import { SectionTitle } from "./chart-controls/section";
 import { getFieldLabel, getIconName } from "./ui-helpers";
-import { useTheme } from "../../themes";
 
 export const ChartTypeSelectionButton = ({
   label,
@@ -33,7 +33,6 @@ export const ChartTypeSelectionButton = ({
       sx={{
         width: "86px",
         height: "86px",
-        mt: 4,
         borderRadius: "default",
 
         backgroundColor: checked ? "primary" : "monochrome100",

diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
@@ -1,11 +1,18 @@
+import { Trans } from "@lingui/macro";
+import NextLink from "next/link";
 import React from "react";
-import { useConfiguratorState } from "..";
+import { Link } from "theme-ui";
+import { ConfiguratorState, useConfiguratorState } from "..";
 import { ChartPanel } from "../../components/chart-panel";
 import { ChartPreview } from "../../components/chart-preview";
+import Stack from "../../components/Stack";
+import { useDataCubeMetadataQuery } from "../../graphql/query-hooks";
+import { useLocale } from "../../src";
 import { ChartConfiguratorTable } from "../table/table-chart-configurator";
 import { ChartAnnotationsSelector } from "./chart-annotations-selector";
 import { ChartAnnotator } from "./chart-annotator";
 import { ChartConfigurator } from "./chart-configurator";
+import { SectionTitle } from "./chart-controls/section";
 import { ChartOptionsSelector } from "./chart-options-selector";
 import { ChartTypeSelector } from "./chart-type-selector";
 import {
@@ -18,6 +25,33 @@ import {
 import { SelectDatasetStep } from "./select-dataset-step";
 import { Stepper } from "./stepper";
 
+const DatasetSelector = ({ state }: { state: ConfiguratorState }) => {
+  const locale = useLocale();
+  const [{ data: metaData }] = useDataCubeMetadataQuery({
+    variables: { iri: state.dataSet || "", locale },
+    pause: !state.dataSet,
+  });
+  return (
+    <div>
+      <SectionTitle>Dataset</SectionTitle>
+      {metaData ? (
+        <Stack direction="column" mx={4} spacing={2}>
+          <div>{metaData.dataCubeByIri?.title}</div>
+          <div>
+            <NextLink href="/browse" passHref>
+              <Link sx={{ fontSize: 3 }}>
+                <Trans id="dataset-selector.choose-another-dataset">
+                  Choose another dataset
+                </Trans>
+              </Link>
+            </NextLink>
+          </div>
+        </Stack>
+      ) : null}
+    </div>
+  );
+};
+
 const SelectChartTypeStep = () => {
   const [state] = useConfiguratorState();
   if (state.state !== "SELECTING_CHART_TYPE") {
@@ -26,7 +60,10 @@ const SelectChartTypeStep = () => {
   return (
     <>
       <PanelLeftWrapper>
-        <ChartTypeSelector state={state} />
+        <Stack spacing={2} direction="column">
+          <DatasetSelector state={state} />
+          <ChartTypeSelector state={state} />
+        </Stack>
       </PanelLeftWrapper>
       <PanelMiddleWrapper>
         <ChartPanel>

diff --git a/app/configurator/components/layout.tsx b/app/configurator/components/layout.tsx
@@ -19,7 +19,7 @@ export const PanelLeftWrapper = ({
       sx={{
         overflowX: "hidden",
         overflowY: "auto",
-        bgColor: "blue",
+        bg: "monochrome100",
         boxShadow: raised ? "rightSide" : undefined,
         borderRightColor: raised ? "monochrome500" : undefined,
         borderRightWidth: raised ? "1px" : undefined,

diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
@@ -84,7 +84,7 @@ export const SelectDatasetStepContent = () => {
         pt: 3,
       }}
     >
-      <PanelLeftWrapper raised={false} sx={{ mt: 50 }}>
+      <PanelLeftWrapper raised={false} sx={{ mt: 50, bg: "transparent" }}>
         {dataset ? (
           <>
             <Box mb={4} px={4}>

diff --git a/app/configurator/components/stepper.tsx b/app/configurator/components/stepper.tsx
@@ -1,5 +1,4 @@
 import { Trans } from "@lingui/macro";
-import NextLink from "next/link";
 import { Fragment, ReactNode, useCallback, useMemo } from "react";
 import { Box, Button, Flex, Text } from "theme-ui";
 import { useConfiguratorState } from "..";
@@ -8,18 +7,13 @@ import { useTheme } from "../../themes";
 import { ActionBar } from "./action-bar";
 
 export type StepStatus = "past" | "current" | "future";
-type StepState =
-  | "SELECTING_DATASET"
-  | "SELECTING_CHART_TYPE"
-  | "CONFIGURING_CHART"
-  | "DESCRIBING_CHART";
 
-const steps: Array<StepState> = [
-  "SELECTING_DATASET",
+const steps = [
   "SELECTING_CHART_TYPE",
   "CONFIGURING_CHART",
   "DESCRIBING_CHART",
-];
+] as const;
+type StepState = typeof steps[number];
 
 export const Stepper = ({ dataSetIri }: { dataSetIri?: string }) => {
   const [{ state }, dispatch] = useConfiguratorState();
@@ -148,30 +142,7 @@ export const Step = ({
     </>
   );
 
-  return stepState === "SELECTING_DATASET" ? (
-    <NextLink
-      href={
-        dataSet ? `/browse/dataset/${encodeURIComponent(dataSet)}` : `/browse`
-      }
-      passHref
-    >
-      <Button
-        as="a"
-        variant="reset"
-        sx={{
-          appearance: "none",
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "flex-start",
-          alignItems: "center",
-          cursor: status === "past" ? "pointer" : undefined,
-        }}
-        disabled={status !== "past"}
-      >
-        {content}
-      </Button>
-    </NextLink>
-  ) : (
+  return (
     <Button
       variant="reset"
       sx={{
@@ -198,13 +169,6 @@ export const StepLabel = ({
   highlight: boolean;
 }) => {
   switch (stepState) {
-    case "SELECTING_DATASET":
-      return (
-        <StepLabelText
-          label={<Trans id="step.dataset">Dataset</Trans>}
-          highlight={highlight}
-        />
-      );
     case "SELECTING_CHART_TYPE":
       return (
         <StepLabelText
@@ -227,6 +191,7 @@ export const StepLabel = ({
         />
       );
   }
+  return null;
 };
 
 const StepLabelText = ({

diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
@@ -33,19 +33,19 @@ msgstr "[ Ohne Beschreibung ]"
 msgid "annotation.add.title"
 msgstr "[ Ohne Titel ]"
 
-#: app/configurator/components/dataset-browse.tsx:683
+#: app/configurator/components/dataset-browse.tsx:714
 msgid "browse-panel.organizations"
 msgstr "Organisationen"
 
-#: app/configurator/components/dataset-browse.tsx:640
+#: app/configurator/components/dataset-browse.tsx:671
 msgid "browse-panel.themes"
 msgstr "Kategorien"
 
 #: app/configurator/components/dataset-preview.tsx:54
 msgid "browse.dataset.create-visualization"
 msgstr "Visualisierung erstellen"
 
-#: app/configurator/components/select-dataset-step.tsx:128
+#: app/configurator/components/select-dataset-step.tsx:119
 msgid "browse.datasets.all-datasets"
 msgstr "Alle Datensätze"
 
@@ -78,15 +78,15 @@ msgstr "Kopiert!"
 msgid "button.new.visualization"
 msgstr "Neue Visualisierung erstellen"
 
-#: app/configurator/components/action-bar.tsx:46
+#: app/configurator/components/action-bar.tsx:45
 msgid "button.next"
 msgstr "Weiter"
 
-#: app/configurator/components/action-bar.tsx:41
+#: app/configurator/components/action-bar.tsx:40
 msgid "button.previous"
 msgstr "Zurück"
 
-#: app/configurator/components/action-bar.tsx:44
+#: app/configurator/components/action-bar.tsx:43
 msgid "button.publish"
 msgstr "Veröffentlichen"
 
@@ -288,7 +288,7 @@ msgstr "gestapelt"
 msgid "controls.description"
 msgstr "Beschreibung hinzufügen"
 
-#: app/configurator/components/field.tsx:503
+#: app/configurator/components/field.tsx:514
 msgid "controls.dimension.none"
 msgstr "Keine"
 
@@ -507,7 +507,7 @@ msgstr "Messwert auswählen"
 
 #: app/configurator/components/field.tsx:82
 #: app/configurator/components/field.tsx:140
-#: app/configurator/components/field.tsx:508
+#: app/configurator/components/field.tsx:519
 msgid "controls.select.optional"
 msgstr "optional"
 
@@ -597,15 +597,19 @@ msgstr "Suche anzeigen"
 msgid "controls.title"
 msgstr "Titel hinzufügen"
 
-#: app/configurator/components/select-dataset-step.tsx:102
+#: app/configurator/components/select-dataset-step.tsx:93
 msgid "dataset-preview.back-to-results"
 msgstr "Zurück zu den Datensätzen"
 
+#: app/configurator/components/configurator.tsx:43
+msgid "dataset-selector.choose-another-dataset"
+msgstr "Wählen Sie ein anderes Datensatz"
+
 #: app/components/chart-published.tsx:80
 msgid "dataset.hasImputedValues"
 msgstr "Einige Daten in diesem Datensatz fehlen und wurden interpoliert, um die Lücken zu füllen."
 
-#: app/configurator/components/dataset-browse.tsx:291
+#: app/configurator/components/dataset-browse.tsx:322
 msgid "dataset.includeDrafts"
 msgstr "Entwürfe einschließen"
 
@@ -629,15 +633,15 @@ msgstr "Quelle"
 msgid "dataset.metadata.version"
 msgstr "Version"
 
-#: app/configurator/components/dataset-browse.tsx:259
+#: app/configurator/components/dataset-browse.tsx:290
 msgid "dataset.order.newest"
 msgstr "Neueste"
 
-#: app/configurator/components/dataset-browse.tsx:251
+#: app/configurator/components/dataset-browse.tsx:282
 msgid "dataset.order.relevance"
 msgstr "Relevanz"
 
-#: app/configurator/components/dataset-browse.tsx:255
+#: app/configurator/components/dataset-browse.tsx:286
 msgid "dataset.order.title"
 msgstr "Titel"
 
@@ -651,19 +655,19 @@ msgstr "Achtung, dieser Datensatz ist im Entwurfs-Stadium.<0/><1>Diese Grafik ni
 msgid "dataset.publicationStatus.expires.warning"
 msgstr "Achtung, dieser Datensatz ist abgelaufen.<0/><1>Diese Grafik nicht für Berichte verwenden.</1>"
 
-#: app/configurator/components/dataset-browse.tsx:315
+#: app/configurator/components/dataset-browse.tsx:346
 msgid "dataset.results"
 msgstr "Ergebnisse"
 
-#: app/configurator/components/dataset-browse.tsx:263
+#: app/configurator/components/dataset-browse.tsx:294
 msgid "dataset.search.label"
 msgstr "Suchen"
 
-#: app/configurator/components/dataset-browse.tsx:335
+#: app/configurator/components/dataset-browse.tsx:366
 msgid "dataset.sortby"
 msgstr "Sortieren nach"
 
-#: app/configurator/components/dataset-browse.tsx:862
+#: app/configurator/components/dataset-browse.tsx:905
 msgid "dataset.tag.draft"
 msgstr "Luftzug"
 
@@ -808,19 +812,19 @@ msgstr "Hier ist eine Visualisierung, die ich mit visualize.admin.ch erstellt ha
 msgid "publication.share.mail.subject"
 msgstr "visualize.admin.ch"
 
-#: app/configurator/components/stepper.tsx:225
+#: app/configurator/components/stepper.tsx:189
 msgid "step.annotate"
 msgstr "Beschreiben"
 
 #: app/configurator/components/stepper.tsx:204
-msgid "step.dataset"
-msgstr "Datensatz"
+#~ msgid "step.dataset"
+#~ msgstr "Datensatz"
 
-#: app/configurator/components/stepper.tsx:211
+#: app/configurator/components/stepper.tsx:175
 msgid "step.visualization.type"
 msgstr "Diagrammtyp"
 
-#: app/configurator/components/stepper.tsx:218
+#: app/configurator/components/stepper.tsx:182
 msgid "step.visualize"
 msgstr "Visualisieren"