diff --git a/packages/admin-next/dashboard/public/locales/en-US/translation.json b/packages/admin-next/dashboard/public/locales/en-US/translation.json
index 423ab856a6..b7f5304dfa 100644
--- a/packages/admin-next/dashboard/public/locales/en-US/translation.json
+++ b/packages/admin-next/dashboard/public/locales/en-US/translation.json
@@ -860,8 +860,8 @@
"tokenExpiresIn": "Token expires in <0>{{time}}0> minutes",
"successfulRequest": "We have sent you an email with instructions on how to reset your password. If you don't receive an email, please check your spam folder or try again."
},
- "executions": {
- "domain": "Executions",
+ "workflowExecutions": {
+ "domain": "Workflows",
"transactionIdLabel": "Transaction ID",
"workflowIdLabel": "Workflow ID",
"progressLabel": "Progress",
diff --git a/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx b/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
index 69b15651f6..8204ae3eaf 100644
--- a/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
+++ b/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
@@ -68,8 +68,8 @@ const useDeveloperRoutes = (): NavItemProps[] => {
to: "/settings/api-key-management",
},
{
- label: t("executions.domain"),
- to: "/settings/executions",
+ label: t("workflowExecutions.domain"),
+ to: "/settings/workflows",
},
],
[t]
diff --git a/packages/admin-next/dashboard/src/providers/router-provider/v1.tsx b/packages/admin-next/dashboard/src/providers/router-provider/v1.tsx
index 065a33a5bf..d7f61a8d09 100644
--- a/packages/admin-next/dashboard/src/providers/router-provider/v1.tsx
+++ b/packages/admin-next/dashboard/src/providers/router-provider/v1.tsx
@@ -820,23 +820,6 @@ export const v1Routes: RouteObject[] = [
},
],
},
- {
- path: "executions",
- element: ,
- handle: {
- crumb: () => "Executions",
- },
- children: [
- {
- path: "",
- lazy: () => import("../../routes/executions/execution-list"),
- },
- {
- path: ":id",
- lazy: () => import("../../routes/executions/execution-detail"),
- },
- ],
- },
...settingsExtensions,
],
},
diff --git a/packages/admin-next/dashboard/src/providers/router-provider/v2.tsx b/packages/admin-next/dashboard/src/providers/router-provider/v2.tsx
index 618048ad49..b70a0a6c8e 100644
--- a/packages/admin-next/dashboard/src/providers/router-provider/v2.tsx
+++ b/packages/admin-next/dashboard/src/providers/router-provider/v2.tsx
@@ -300,6 +300,38 @@ export const v2Routes: RouteObject[] = [
},
],
},
+ {
+ path: "workflows",
+ element: ,
+ handle: {
+ crumb: () => "Workflows",
+ },
+ children: [
+ {
+ path: "",
+ lazy: () =>
+ import(
+ "../../v2-routes/workflow-executions/workflow-execution-list"
+ ),
+ },
+ {
+ path: ":id",
+ lazy: () =>
+ import(
+ "../../v2-routes/workflow-executions/workflow-execution-detail"
+ ),
+ handle: {
+ crumb: (data: { workflow: any }) => {
+ if (!data) {
+ return ""
+ }
+
+ return data.workflow.name
+ },
+ },
+ },
+ ],
+ },
],
},
],
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/index.ts
deleted file mode 100644
index c8ae4714fe..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./execution-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/index.ts
deleted file mode 100644
index bf1afb788f..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./execution-history-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/index.ts
deleted file mode 100644
index d3b4a12f25..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./execution-payload-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/index.ts
deleted file mode 100644
index 4acff81887..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./execution-timeline-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/execution-detail.tsx b/packages/admin-next/dashboard/src/routes/executions/execution-detail/execution-detail.tsx
deleted file mode 100644
index cabf1996a8..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/execution-detail.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useAdminCustomQuery } from "medusa-react"
-import { useParams } from "react-router-dom"
-import { JsonViewSection } from "../../../components/common/json-view-section"
-import { adminExecutionKey } from "../utils"
-import { ExecutionGeneralSection } from "./components/execution-general-section"
-import { ExecutionHistorySection } from "./components/execution-history-section"
-import { ExecutionPayloadSection } from "./components/execution-payload-section"
-import { ExecutionTimelineSection } from "./components/execution-timeline-section"
-
-export const ExecutionDetail = () => {
- const { id } = useParams()
-
- const { data, isLoading, isError, error } = useAdminCustomQuery(
- `/workflows-executions/${id}`,
- adminExecutionKey.detail(id!)
- )
-
- if (isLoading || !data) {
- return
Loading...
- }
-
- if (isError) {
- throw error
- }
-
- return (
-
-
-
-
-
-
-
- )
-}
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-detail/index.ts
deleted file mode 100644
index d939b77df5..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ExecutionDetail as Component } from "./execution-detail"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-list/components/executions-list-table/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-list/components/executions-list-table/index.ts
deleted file mode 100644
index d23ad6ee55..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-list/components/executions-list-table/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./executions-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-list/execution-list.tsx b/packages/admin-next/dashboard/src/routes/executions/execution-list/execution-list.tsx
deleted file mode 100644
index 4fd985c946..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-list/execution-list.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExecutionsListTable } from "./components/executions-list-table"
-
-export const ExcecutionList = () => {
- return (
-
-
-
- )
-}
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-list/index.ts b/packages/admin-next/dashboard/src/routes/executions/execution-list/index.ts
deleted file mode 100644
index 2cfda278ad..0000000000
--- a/packages/admin-next/dashboard/src/routes/executions/execution-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ExcecutionList as Component } from "./execution-list"
diff --git a/packages/admin-next/dashboard/src/routes/executions/constants.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/constants.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/executions/constants.ts
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/constants.ts
diff --git a/packages/admin-next/dashboard/src/routes/executions/types.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/types.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/executions/types.ts
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/types.ts
diff --git a/packages/admin-next/dashboard/src/routes/executions/utils.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/utils.ts
similarity index 71%
rename from packages/admin-next/dashboard/src/routes/executions/utils.ts
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/utils.ts
index c0da09a8ee..58addd0b74 100644
--- a/packages/admin-next/dashboard/src/routes/executions/utils.ts
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/utils.ts
@@ -40,19 +40,19 @@ export const getTransactionState = (
) => {
switch (state) {
case TransactionState.DONE:
- return t("executions.state.done")
+ return t("workflowExecutions.state.done")
case TransactionState.FAILED:
- return t("executions.state.failed")
+ return t("workflowExecutions.state.failed")
case TransactionState.REVERTED:
- return t("executions.state.reverted")
+ return t("workflowExecutions.state.reverted")
case TransactionState.INVOKING:
- return t("executions.state.invoking")
+ return t("workflowExecutions.state.invoking")
case TransactionState.WAITING_TO_COMPENSATE:
- return t("executions.transaction.state.waitingToCompensate")
+ return t("workflowExecutions.transaction.state.waitingToCompensate")
case TransactionState.COMPENSATING:
- return t("executions.state.compensating")
+ return t("workflowExecutions.state.compensating")
case TransactionState.NOT_STARTED:
- return t("executions.state.notStarted")
+ return t("workflowExecutions.state.notStarted")
}
}
@@ -80,22 +80,22 @@ export const getStepState = (
) => {
switch (state) {
case TransactionStepState.DONE:
- return t("executions.state.done")
+ return t("workflowExecutions.state.done")
case TransactionStepState.FAILED:
- return t("executions.state.failed")
+ return t("workflowExecutions.state.failed")
case TransactionStepState.REVERTED:
- return t("executions.state.reverted")
+ return t("workflowExecutions.state.reverted")
case TransactionStepState.INVOKING:
- return t("executions.state.invoking")
+ return t("workflowExecutions.state.invoking")
case TransactionStepState.COMPENSATING:
- return t("executions.state.compensating")
+ return t("workflowExecutions.state.compensating")
case TransactionStepState.NOT_STARTED:
- return t("executions.state.notStarted")
+ return t("workflowExecutions.state.notStarted")
case TransactionStepState.SKIPPED:
- return t("executions.step.state.skipped")
+ return t("workflowExecutions.step.state.skipped")
case TransactionStepState.DORMANT:
- return t("executions.step.state.dormant")
+ return t("workflowExecutions.step.state.dormant")
case TransactionStepState.TIMEOUT:
- return t("executions.step.state.timeout")
+ return t("workflowExecutions.step.state.timeout")
}
}
diff --git a/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/index.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/index.ts
new file mode 100644
index 0000000000..78d14e8ae1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./workflow-execution-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/execution-general-section.tsx b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx
similarity index 88%
rename from packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/execution-general-section.tsx
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx
index 17eb6f77fe..64455821fb 100644
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-general-section/execution-general-section.tsx
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx
@@ -15,13 +15,13 @@ import {
} from "../../../types"
import { getTransactionState, getTransactionStateColor } from "../../../utils"
-type ExecutionGeneralSectionProps = {
+type WorkflowExecutionGeneralSectionProps = {
execution: WorkflowExecutionDTO
}
-export const ExecutionGeneralSection = ({
+export const WorkflowExecutionGeneralSection = ({
execution,
-}: ExecutionGeneralSectionProps) => {
+}: WorkflowExecutionGeneralSectionProps) => {
const { t } = useTranslation()
const cleanId = execution.id.replace("wf_exec_", "")
@@ -39,7 +39,7 @@ export const ExecutionGeneralSection = ({
- {t("executions.workflowIdLabel")}
+ {t("workflowExecutions.workflowIdLabel")}
{execution.workflow_id}
@@ -47,7 +47,7 @@ export const ExecutionGeneralSection = ({
- {t("executions.transactionIdLabel")}
+ {t("workflowExecutions.transactionIdLabel")}
{execution.transaction_id}
@@ -55,7 +55,7 @@ export const ExecutionGeneralSection = ({
- {t("executions.progressLabel")}
+ {t("workflowExecutions.progressLabel")}
@@ -75,7 +75,7 @@ const Progress = ({
if (!steps) {
return (
- {t("executions.stepsCompletedLabel", {
+ {t("workflowExecutions.stepsCompletedLabel", {
completed: 0,
total: 0,
})}
@@ -108,7 +108,7 @@ const Progress = ({
))}
- {t("executions.stepsCompletedLabel", {
+ {t("workflowExecutions.stepsCompletedLabel", {
completed: completedSteps.length,
count: actionableSteps.length,
})}
diff --git a/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/index.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/index.ts
new file mode 100644
index 0000000000..9d2f1af388
--- /dev/null
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/index.ts
@@ -0,0 +1 @@
+export * from "./workflow-execution-history-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/execution-history-section.tsx b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx
similarity index 90%
rename from packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/execution-history-section.tsx
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx
index 71f7b60911..b49390fccd 100644
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-history-section/execution-history-section.tsx
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx
@@ -27,13 +27,13 @@ import {
WorkflowExecutionStep,
} from "../../../types"
-type ExecutionHistorySectionProps = {
+type WorkflowExecutionHistorySectionProps = {
execution: WorkflowExecutionDTO
}
-export const ExecutionHistorySection = ({
+export const WorkflowExecutionHistorySection = ({
execution,
-}: ExecutionHistorySectionProps) => {
+}: WorkflowExecutionHistorySectionProps) => {
const { t } = useTranslation()
const map = Object.values(execution.execution?.steps || {})
@@ -57,7 +57,9 @@ export const ExecutionHistorySection = ({
return (
- {t("executions.history.sectionTitle")}
+
+ {t("workflowExecutions.history.sectionTitle")}
+
{steps.map((step, index) => {
@@ -178,13 +180,13 @@ const Event = ({
- {t("executions.history.definitionLabel")}
+ {t("workflowExecutions.history.definitionLabel")}
- {t("executions.history.outputLabel")}
+ {t("workflowExecutions.history.outputLabel")}
- {t("executions.history.compensateInputLabel")}
+ {t("workflowExecutions.history.compensateInputLabel")}
- {t("executions.history.errorLabel")}
+ {t("workflowExecutions.history.errorLabel")}
- {t("executions.history.runningState")}
+ {t("workflowExecutions.history.runningState")}
@@ -305,7 +309,7 @@ const StepState = ({
if (isFailed) {
return (
- {t("executions.history.failedState")}
+ {t("workflowExecutions.history.failedState")}
)
}
diff --git a/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/index.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/index.ts
new file mode 100644
index 0000000000..5844d8233b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/index.ts
@@ -0,0 +1 @@
+export * from "./workflow-execution-payload-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/execution-payload-section.tsx b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx
similarity index 60%
rename from packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/execution-payload-section.tsx
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx
index ae1860e476..d43e96b2d7 100644
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-payload-section/execution-payload-section.tsx
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx
@@ -1,21 +1,21 @@
import { JsonViewSection } from "../../../../../components/common/json-view-section"
import { WorkflowExecutionDTO } from "../../../types"
-type ExecutionPayloadSectionProps = {
+type WorkflowExecutionPayloadSectionProps = {
execution: WorkflowExecutionDTO
}
-export const ExecutionPayloadSection = ({
+export const WorkflowExecutionPayloadSection = ({
execution,
-}: ExecutionPayloadSectionProps) => {
+}: WorkflowExecutionPayloadSectionProps) => {
let payload = execution.context?.data?.payload
if (!payload) {
return null
}
- // payloads may be simple primitives, so we need to wrap them in an object
- // to ensure the JsonViewSection component can render them
+ // payloads may be a primitive, so we need to wrap them in an object
+ // to ensure the JsonViewSection component can render them.
if (typeof payload !== "object") {
payload = { input: payload }
}
diff --git a/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/index.ts b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/index.ts
new file mode 100644
index 0000000000..646d07ae7b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/index.ts
@@ -0,0 +1 @@
+export * from "./workflow-execution-timeline-section"
diff --git a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/execution-timeline-section.tsx b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
similarity index 79%
rename from packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/execution-timeline-section.tsx
rename to packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
index 740a7aed13..aacc9dd85f 100644
--- a/packages/admin-next/dashboard/src/routes/executions/execution-detail/components/execution-timeline-section/execution-timeline-section.tsx
+++ b/packages/admin-next/dashboard/src/v2-routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
@@ -1,5 +1,5 @@
import { ArrowPathMini, MinusMini, PlusMini } from "@medusajs/icons"
-import { Container, Heading, Text, clx } from "@medusajs/ui"
+import { Container, DropdownMenu, Heading, Text, clx } from "@medusajs/ui"
import {
motion,
useAnimationControls,
@@ -18,13 +18,13 @@ import {
} from "../../../constants"
import { WorkflowExecutionDTO, WorkflowExecutionStep } from "../../../types"
-type ExecutionTimelineSectionProps = {
+type WorkflowExecutionTimelineSectionProps = {
execution: WorkflowExecutionDTO
}
-export const ExecutionTimelineSection = ({
+export const WorkflowExecutionTimelineSection = ({
execution,
-}: ExecutionTimelineSectionProps) => {
+}: WorkflowExecutionTimelineSectionProps) => {
const { t } = useTranslation()
return (
@@ -79,6 +79,7 @@ const ZOOM_STEP = 0.25
const Canvas = ({ execution }: { execution: WorkflowExecutionDTO }) => {
const [zoom, setZoom] = useState
(1)
+ const [isDragging, setIsDragging] = useState(false)
const scale = useMotionValue(defaultState.scale)
const x = useMotionValue(defaultState.x)
@@ -152,6 +153,8 @@ const Canvas = ({ execution }: { execution: WorkflowExecutionDTO }) => {
setIsDragging(true)}
+ onMouseUp={() => setIsDragging(false)}
drag
dragConstraints={dragConstraints}
dragElastic={0}
@@ -165,7 +168,14 @@ const Canvas = ({ execution }: { execution: WorkflowExecutionDTO }) => {
y,
scale,
}}
- className="bg-ui-bg-subtle relative size-[500rem] origin-top-left items-start justify-start overflow-hidden bg-[radial-gradient(var(--border-base)_1.5px,transparent_0)] bg-[length:20px_20px] bg-repeat"
+ className={clx(
+ "bg-ui-bg-subtle relative size-[500rem] origin-top-left items-start justify-start overflow-hidden",
+ "bg-[radial-gradient(var(--border-base)_1.5px,transparent_0)] bg-[length:20px_20px] bg-repeat",
+ {
+ "cursor-grab": !isDragging,
+ "cursor-grabbing": isDragging,
+ }
+ )}
>
@@ -188,25 +198,51 @@ const Canvas = ({ execution }: { execution: WorkflowExecutionDTO }) => {
-
-
-
+
+
+
+
+
+
+
+ {Math.round(zoom * 100)}%
+
+
+
+ {[50, 75, 100, 125, 150].map((value) => (
+ changeZoom(value / 100)}
+ >
+ {value}%
+
+ ))}
+
+
+
+
+