@orchestrator-ui/orchestrator-ui-components 5.3.3 → 5.3.4

package/dist/index.js

@@ -4922,10 +4922,10 @@ var require_markup = __commonJS({
 var require_css = __commonJS({
   "../../node_modules/refractor/lang/css.js"(exports, module) {
     "use strict";
-    module.exports = css51;
-    css51.displayName = "css";
-    css51.aliases = [];
-    function css51(Prism) {
+    module.exports = css52;
+    css52.displayName = "css";
+    css52.aliases = [];
+    function css52(Prism) {
       ;
       (function(Prism2) {
         var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
@@ -5192,7 +5192,7 @@ var require_core = __commonJS({
     var decode = require_parse_entities();
     var Prism = require_prism_core();
     var markup = require_markup();
-    var css51 = require_css();
+    var css52 = require_css();
     var clike = require_clike();
     var js = require_javascript();
     restore();
@@ -5208,7 +5208,7 @@ var require_core = __commonJS({
     refract.registered = registered;
     refract.listLanguages = listLanguages;
     register(markup);
-    register(css51);
+    register(css52);
     register(clike);
     register(js);
     refract.util.encode = encode;
@@ -26761,6 +26761,7 @@ var SETTINGS_WORKER_STATUS_ENDPOINT = `${SETTINGS_ENDPOINT}/worker-status`;
 var SETTINGS_CACHE_NAMES_ENDPOINT = `${SETTINGS_ENDPOINT}/cache-names`;
 var SETTINGS_CACHE_ENDPOINT = `${SETTINGS_ENDPOINT}/cache`;
 var SETTINGS_SEARCH_INDEX_RESET_ENDPOINT = `${SETTINGS_ENDPOINT}/search-index/reset`;
+var SETTINGS_OVERVIEW = `${SETTINGS_ENDPOINT}/overview`;
 var IPAM_ENDPOINT = "surf/ipam";
 var IPAM_PREFIX_FILTERS_ENDPOINT = `${IPAM_ENDPOINT}/prefix_filters`;
 var IPAM_IP_BLOCKS_ENDPOINT = `${IPAM_ENDPOINT}/ip_blocks`;
@@ -26799,7 +26800,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.3.3";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "5.3.4";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus3) => {
@@ -34756,6 +34757,12 @@ var statusApi = orchestratorApi.injectEndpoints({
         baseQueryType: "fetch" /* fetch */
       },
       invalidatesTags: getCacheTag("engineStatus" /* engineStatus */)
+    }),
+    getEnvironmentVariables: build.query({
+      query: () => SETTINGS_OVERVIEW,
+      extraOptions: {
+        baseQueryType: "fetch" /* fetch */
+      }
     })
   })
 });
@@ -34765,7 +34772,8 @@ var {
   useClearCacheMutation,
   useResetTextSearchIndexMutation,
   useSetEngineStatusMutation,
-  useGetWorkerStatusQuery
+  useGetWorkerStatusQuery,
+  useGetEnvironmentVariablesQuery
 } = statusApi;
 
 // src/rtk/endpoints/startOptions.ts
@@ -39012,7 +39020,7 @@ var WfoHeaderBadge = ({
   children,
   ...restProps
 }) => {
-  const css51 = restProps.iconType ? {
+  const css52 = restProps.iconType ? {
     height: 24,
     display: "flex",
     paddingLeft: 0
@@ -39020,7 +39028,7 @@ var WfoHeaderBadge = ({
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ jsx73(WfoBadge, { ...restProps, css: css51, children });
+  return /* @__PURE__ */ jsx73(WfoBadge, { ...restProps, css: css52, children });
 };
 
 // src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx
@@ -50322,17 +50330,9 @@ import { usePydanticFormContext } from "pydantic-forms";
 import { EuiButton as EuiButton11, EuiHorizontalRule as EuiHorizontalRule6 } from "@elastic/eui";
 import { jsx as jsx203, jsxs as jsxs108 } from "@emotion/react/jsx-runtime";
 var Footer = () => {
-  const {
-    rhf,
-    onCancel,
-    onPrevious,
-    allowUntouchedSubmit,
-    hasNext,
-    formInputData
-  } = usePydanticFormContext();
+  const { onCancel, onPrevious, hasNext, formInputData } = usePydanticFormContext();
   const { theme } = useOrchestratorTheme();
   const t = useTranslations60("pydanticForms.userInputForm");
-  const isDisabled = !rhf.formState.isValid || !allowUntouchedSubmit && !rhf.formState.isDirty && !rhf.formState.isSubmitting;
   const handlePrevious = () => {
     if (onCancel) {
       onCancel();
@@ -50382,7 +50382,6 @@ var Footer = () => {
         type: "submit",
         iconSide: "right",
         "aria-label": submitButtonLabel,
-        disabled: isDisabled,
         children: submitButtonLabel
       }
     );
@@ -52853,8 +52852,19 @@ var WfoProductInformationWithLink = ({
 };
 
 // src/pages/settings/WfoSettingsPage.tsx
+import { useMemo as useMemo6 } from "react";
 import { useTranslations as useTranslations70 } from "next-intl";
-import { EuiHorizontalRule as EuiHorizontalRule9, EuiSpacer as EuiSpacer22 } from "@elastic/eui";
+import { StringParam as StringParam3, useQueryParam as useQueryParam2, withDefault as withDefault3 } from "use-query-params";
+import {
+  EuiCodeBlock as EuiCodeBlock2,
+  EuiFlexItem as EuiFlexItem31,
+  EuiPanel as EuiPanel7,
+  EuiSpacer as EuiSpacer22,
+  EuiTab as EuiTab3,
+  EuiTabs as EuiTabs3,
+  EuiText as EuiText45
+} from "@elastic/eui";
+import { css as css44 } from "@emotion/react";
 
 // src/components/WfoSettings/WfoAoStackStatus.tsx
 import { useTranslations as useTranslations69 } from "next-intl";
@@ -52888,31 +52898,125 @@ var WfoAoStackStatus = () => {
 
 // src/pages/settings/WfoSettingsPage.tsx
 import { Fragment as Fragment54, jsx as jsx229, jsxs as jsxs122 } from "@emotion/react/jsx-runtime";
-var WfoSettingsPage = () => {
+var WfoSettingsTab = /* @__PURE__ */ ((WfoSettingsTab2) => {
+  WfoSettingsTab2["ACTIONS"] = "ACTIONS";
+  WfoSettingsTab2["ENV_SETTINGS"] = "ENV_SETTINGS";
+  return WfoSettingsTab2;
+})(WfoSettingsTab || {});
+var WfoActionSettings = () => {
   const { theme } = useOrchestratorTheme();
-  const t = useTranslations70("main");
   const { enableAoStackStatus } = useGetOrchestratorConfig();
-  return /* @__PURE__ */ jsxs122(Fragment54, { children: [
-    /* @__PURE__ */ jsx229(
-      WfoContentHeader,
-      {
-        title: t("settings"),
-        subtitle: /* @__PURE__ */ jsx229(EuiHorizontalRule9, { margin: "s" })
-      }
-    ),
-    /* @__PURE__ */ jsxs122("div", { css: { maxWidth: theme.base * 40 }, children: [
-      /* @__PURE__ */ jsx229(WfoFlushSettings, {}),
-      /* @__PURE__ */ jsx229(EuiSpacer22, {}),
-      /* @__PURE__ */ jsx229(WfoModifySettings, {}),
-      /* @__PURE__ */ jsx229(EuiSpacer22, {}),
-      /* @__PURE__ */ jsx229(WfoEngineStatus, {}),
-      enableAoStackStatus && /* @__PURE__ */ jsxs122(Fragment54, { children: [
-        /* @__PURE__ */ jsx229(EuiSpacer22, {}),
-        /* @__PURE__ */ jsx229(WfoAoStackStatus, {})
-      ] }),
+  return /* @__PURE__ */ jsx229(Fragment54, { children: /* @__PURE__ */ jsxs122("div", { css: { maxWidth: theme.base * 40 }, children: [
+    /* @__PURE__ */ jsx229(WfoFlushSettings, {}),
+    /* @__PURE__ */ jsx229(EuiSpacer22, {}),
+    /* @__PURE__ */ jsx229(WfoModifySettings, {}),
+    /* @__PURE__ */ jsx229(EuiSpacer22, {}),
+    /* @__PURE__ */ jsx229(WfoEngineStatus, {}),
+    enableAoStackStatus && /* @__PURE__ */ jsxs122(Fragment54, { children: [
       /* @__PURE__ */ jsx229(EuiSpacer22, {}),
-      /* @__PURE__ */ jsx229(WfoWorkerStatus, {})
-    ] })
+      /* @__PURE__ */ jsx229(WfoAoStackStatus, {})
+    ] }),
+    /* @__PURE__ */ jsx229(EuiSpacer22, {}),
+    /* @__PURE__ */ jsx229(WfoWorkerStatus, {})
+  ] }) });
+};
+var WfoEnvSettings = () => {
+  const t = useTranslations70("settings.page");
+  const { theme } = useOrchestratorTheme();
+  const { data } = useGetEnvironmentVariablesQuery();
+  const mapToRepresentableVariables = (variables) => {
+    return variables.map(({ env_name, env_value }) => `${env_name}=${env_value}`).join("\n");
+  };
+  const renderEnvSettings = () => {
+    return data && data.map(({ name, variables }) => {
+      const showVariables = mapToRepresentableVariables(variables);
+      return /* @__PURE__ */ jsxs122(Fragment54, { children: [
+        /* @__PURE__ */ jsx229(EuiFlexItem31, { children: /* @__PURE__ */ jsxs122(
+          EuiPanel7,
+          {
+            hasShadow: false,
+            color: "subdued",
+            paddingSize: "l",
+            children: [
+              /* @__PURE__ */ jsx229(EuiText45, { size: "s", children: /* @__PURE__ */ jsx229("h2", { children: name.replace("_", " ").toUpperCase() }) }),
+              /* @__PURE__ */ jsx229(EuiSpacer22, {}),
+              /* @__PURE__ */ jsx229(
+                EuiCodeBlock2,
+                {
+                  fontSize: "m",
+                  paddingSize: "m",
+                  css: css44({
+                    background: theme.colors.lightShade
+                  }),
+                  children: showVariables
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx229(EuiSpacer22, {})
+      ] });
+    });
+  };
+  const emptyEnvSettings = () => {
+    return /* @__PURE__ */ jsx229(EuiFlexItem31, { children: /* @__PURE__ */ jsx229(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsx229(EuiText45, { size: "s", children: /* @__PURE__ */ jsxs122("h2", { children: [
+      t("noSettingsExposed"),
+      " ",
+      /* @__PURE__ */ jsx229(
+        "a",
+        {
+          href: "https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings_overview/",
+          target: "_blank",
+          children: t("settingsOverviewLink")
+        }
+      )
+    ] }) }) }) });
+  };
+  return /* @__PURE__ */ jsx229("div", { css: { maxWidth: theme.base * 45 }, children: data?.length ? renderEnvSettings() : emptyEnvSettings() });
+};
+var settingsTabs = [
+  {
+    id: "ACTIONS" /* ACTIONS */,
+    translationKey: "actions",
+    content: /* @__PURE__ */ jsx229(WfoActionSettings, {})
+  },
+  {
+    id: "ENV_SETTINGS" /* ENV_SETTINGS */,
+    translationKey: "envSettings",
+    content: /* @__PURE__ */ jsx229(WfoEnvSettings, {})
+  }
+];
+var WfoSettingsPage = () => {
+  const t = useTranslations70("main");
+  const tabTranslations = useTranslations70("settings.tabs");
+  const { tabStyle } = useWithOrchestratorTheme(getStyles4);
+  const [selectedTabId, setSelectedTabId] = useQueryParam2(
+    "activeTab",
+    withDefault3(StringParam3, "ACTIONS" /* ACTIONS */)
+  );
+  const selectedTabContent = useMemo6(() => {
+    return settingsTabs.find((obj) => obj.id === selectedTabId)?.content;
+  }, [selectedTabId]);
+  const onSelectedTabChanged = (id) => {
+    setSelectedTabId(id);
+  };
+  const renderTabs = () => {
+    return settingsTabs.map((tab, index) => /* @__PURE__ */ jsx229(
+      EuiTab3,
+      {
+        css: tabStyle,
+        onClick: () => onSelectedTabChanged(tab.id),
+        isSelected: tab.id === selectedTabId,
+        children: tabTranslations(tab.translationKey)
+      },
+      index
+    ));
+  };
+  return /* @__PURE__ */ jsxs122(Fragment54, { children: [
+    /* @__PURE__ */ jsx229(WfoContentHeader, { title: t("settings") }),
+    /* @__PURE__ */ jsx229(EuiTabs3, { children: renderTabs() }),
+    /* @__PURE__ */ jsx229(EuiSpacer22, { size: "xxl" }),
+    selectedTabContent
   ] });
 };
 
@@ -52988,7 +53092,7 @@ var WfoSubscriptionDetailPage = () => {
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
 import { useEffect as useEffect33, useState as useState50 } from "react";
 import { useTranslations as useTranslations72 } from "next-intl";
-import { StringParam as StringParam3, useQueryParam as useQueryParam2, withDefault as withDefault3 } from "use-query-params";
+import { StringParam as StringParam4, useQueryParam as useQueryParam3, withDefault as withDefault4 } from "use-query-params";
 import { EuiSpacer as EuiSpacer23 } from "@elastic/eui";
 import { Fragment as Fragment57, jsx as jsx232, jsxs as jsxs124 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsListPage = () => {
@@ -53014,9 +53118,9 @@ var WfoSubscriptionsListPage = () => {
       order: "DESC" /* DESC */
     }
   });
-  const [activeTab, setActiveTab] = useQueryParam2(
+  const [activeTab, setActiveTab] = useQueryParam3(
     "activeTab",
-    withDefault3(StringParam3, "ACTIVE" /* ACTIVE */)
+    withDefault4(StringParam4, "ACTIVE" /* ACTIVE */)
   );
   const selectedTab = (() => {
     return subscriptionListTabs.find(({ id }) => id === activeTab)?.id || "ACTIVE" /* ACTIVE */;
@@ -53062,7 +53166,7 @@ import { useContext as useContext11, useEffect as useEffect34, useState as useSt
 import { useTranslations as useTranslations73 } from "next-intl";
 import Link11 from "next/link";
 import { useRouter as useRouter12 } from "next/router";
-import { StringParam as StringParam4, useQueryParam as useQueryParam3, withDefault as withDefault4 } from "use-query-params";
+import { StringParam as StringParam5, useQueryParam as useQueryParam4, withDefault as withDefault5 } from "use-query-params";
 import { EuiButton as EuiButton15, EuiSpacer as EuiSpacer24 } from "@elastic/eui";
 
 // src/pages/tasks/tabConfig.ts
@@ -53132,9 +53236,9 @@ import { Fragment as Fragment58, jsx as jsx233, jsxs as jsxs125 } from "@emotion
 var WfoTasksListPage = () => {
   const router = useRouter12();
   const t = useTranslations73("tasks.page");
-  const [activeTab, setActiveTab] = useQueryParam3(
+  const [activeTab, setActiveTab] = useQueryParam4(
     "activeTab",
-    withDefault4(StringParam4, "ACTIVE" /* ACTIVE */)
+    withDefault5(StringParam5, "ACTIVE" /* ACTIVE */)
   );
   const [tableDefaults, setTableDefaults] = useState51();
   const selectedTasksListTab = getTasksListTabTypeFromString(activeTab);
@@ -53248,7 +53352,7 @@ var WfoTasksListPage = () => {
 import { useEffect as useEffect35, useState as useState52 } from "react";
 import { useTranslations as useTranslations74 } from "next-intl";
 import { useRouter as useRouter13 } from "next/router";
-import { StringParam as StringParam5, useQueryParam as useQueryParam4, withDefault as withDefault5 } from "use-query-params";
+import { StringParam as StringParam6, useQueryParam as useQueryParam5, withDefault as withDefault6 } from "use-query-params";
 import { EuiSpacer as EuiSpacer25 } from "@elastic/eui";
 
 // src/pages/workflows/tabConfig.ts
@@ -53318,9 +53422,9 @@ import { Fragment as Fragment59, jsx as jsx234, jsxs as jsxs126 } from "@emotion
 var WfoWorkflowsListPage = () => {
   const router = useRouter13();
   const t = useTranslations74("workflows.index");
-  const [activeTab, setActiveTab] = useQueryParam4(
+  const [activeTab, setActiveTab] = useQueryParam5(
     "activeTab",
-    withDefault5(StringParam5, "ACTIVE" /* ACTIVE */)
+    withDefault6(StringParam6, "ACTIVE" /* ACTIVE */)
   );
   const [tableDefaults, setTableDefaults] = useState52();
   const selectedWorkflowsListTab = getWorkflowsListTabTypeFromString(activeTab);
@@ -53661,16 +53765,16 @@ var WfoProcessesList = ({
 };
 
 // src/components/WfoJsonCodeBlock/WfoJsonCodeBlock.tsx
-import { EuiCodeBlock as EuiCodeBlock2 } from "@elastic/eui";
+import { EuiCodeBlock as EuiCodeBlock3 } from "@elastic/eui";
 
 // src/components/WfoJsonCodeBlock/styles.ts
-import { css as css44 } from "@emotion/react";
+import { css as css45 } from "@emotion/react";
 var getStyles14 = ({ theme }) => {
-  const euiCodeBlockStyle = css44({
+  const euiCodeBlockStyle = css45({
     marginTop: 10,
     borderRadius: theme.border.radius.medium
   });
-  const euiBasicCodeBlockStyle = css44({
+  const euiBasicCodeBlockStyle = css45({
     backgroundColor: "inherit",
     ".euiCodeBlock__pre": {
       paddingTop: 0,
@@ -53696,7 +53800,7 @@ var WfoJsonCodeBlock = ({
   const { euiCodeBlockStyle, euiBasicCodeBlockStyle } = useWithOrchestratorTheme(getStyles14);
   const json = JSON.stringify(data, null, 4);
   return /* @__PURE__ */ jsx236(
-    EuiCodeBlock2,
+    EuiCodeBlock3,
     {
       css: isBasicStyle ? euiBasicCodeBlockStyle : euiCodeBlockStyle,
       isCopyable: true,
@@ -53713,16 +53817,16 @@ import { useTranslations as useTranslations76 } from "next-intl";
 import {
   EuiButton as EuiButton16,
   EuiComboBox,
-  EuiPanel as EuiPanel7,
+  EuiPanel as EuiPanel8,
   EuiSpacer as EuiSpacer26,
-  EuiText as EuiText45
+  EuiText as EuiText46
 } from "@elastic/eui";
 
 // src/components/WfoSettings/styles.ts
-import { css as css45 } from "@emotion/react";
+import { css as css46 } from "@emotion/react";
 var getWfoFlushSettingsStyle = (wfoTheme) => {
   const { theme } = wfoTheme;
-  const comboboxStyle = css45({
+  const comboboxStyle = css46({
     // .euiComboBox is needed to override eui styling (more specific)
     "&.euiComboBox": {
       ".euiComboBox__inputWrap": {
@@ -53781,8 +53885,8 @@ var WfoFlushSettings = () => {
       );
     });
   };
-  return /* @__PURE__ */ jsx237(WfoIsAllowedToRender, { resource: "/orchestrator/settings/flush-cache" /* SETTINGS_FLUSH_CACHE */, children: /* @__PURE__ */ jsxs128(EuiPanel7, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-    /* @__PURE__ */ jsx237(EuiText45, { size: "s", children: /* @__PURE__ */ jsx237("h4", { children: t("flushCacheSettingsTitle") }) }),
+  return /* @__PURE__ */ jsx237(WfoIsAllowedToRender, { resource: "/orchestrator/settings/flush-cache" /* SETTINGS_FLUSH_CACHE */, children: /* @__PURE__ */ jsxs128(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+    /* @__PURE__ */ jsx237(EuiText46, { size: "s", children: /* @__PURE__ */ jsx237("h4", { children: t("flushCacheSettingsTitle") }) }),
     /* @__PURE__ */ jsx237(EuiSpacer26, { size: "m" }),
     /* @__PURE__ */ jsx237(
       EuiComboBox,
@@ -53837,13 +53941,13 @@ var WfoEngineStatusButton = () => {
 
 // src/components/WfoSettings/WfoModifySettings.tsx
 import { useTranslations as useTranslations78 } from "next-intl";
-import { EuiFlexItem as EuiFlexItem31, EuiPanel as EuiPanel8, EuiSpacer as EuiSpacer27, EuiText as EuiText46 } from "@elastic/eui";
+import { EuiFlexItem as EuiFlexItem32, EuiPanel as EuiPanel9, EuiSpacer as EuiSpacer27, EuiText as EuiText47 } from "@elastic/eui";
 import { jsx as jsx239, jsxs as jsxs129 } from "@emotion/react/jsx-runtime";
 var WfoModifySettings = () => {
   const t = useTranslations78("settings.page");
-  return /* @__PURE__ */ jsxs129(EuiFlexItem31, { children: [
-    /* @__PURE__ */ jsxs129(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-      /* @__PURE__ */ jsx239(EuiText46, { size: "s", children: /* @__PURE__ */ jsx239("h4", { children: t("resetTextSearchIndex") }) }),
+  return /* @__PURE__ */ jsxs129(EuiFlexItem32, { children: [
+    /* @__PURE__ */ jsxs129(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+      /* @__PURE__ */ jsx239(EuiText47, { size: "s", children: /* @__PURE__ */ jsx239("h4", { children: t("resetTextSearchIndex") }) }),
       /* @__PURE__ */ jsx239(EuiSpacer27, { size: "m" }),
       /* @__PURE__ */ jsx239(WfoResetTextSearchIndexButton, {})
     ] }),
@@ -53853,8 +53957,8 @@ var WfoModifySettings = () => {
         resource: "/orchestrator/settings/start-stop-engine" /* SETTINGS_START_STOP_ENGINE */,
         children: [
           /* @__PURE__ */ jsx239(EuiSpacer27, {}),
-          /* @__PURE__ */ jsxs129(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
-            /* @__PURE__ */ jsx239(EuiText46, { size: "s", children: /* @__PURE__ */ jsx239("h4", { children: t("modifyEngine") }) }),
+          /* @__PURE__ */ jsxs129(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
+            /* @__PURE__ */ jsx239(EuiText47, { size: "s", children: /* @__PURE__ */ jsx239("h4", { children: t("modifyEngine") }) }),
             /* @__PURE__ */ jsx239(EuiSpacer27, { size: "m" }),
             /* @__PURE__ */ jsx239(WfoEngineStatusButton, {})
           ] })
@@ -53866,7 +53970,7 @@ var WfoModifySettings = () => {
 
 // src/components/WfoSettings/WfoEngineStatus.tsx
 import { useTranslations as useTranslations79 } from "next-intl";
-import { EuiFlexGroup as EuiFlexGroup27, EuiFlexItem as EuiFlexItem32, EuiPanel as EuiPanel9, EuiText as EuiText47 } from "@elastic/eui";
+import { EuiFlexGroup as EuiFlexGroup27, EuiFlexItem as EuiFlexItem33, EuiPanel as EuiPanel10, EuiText as EuiText48 } from "@elastic/eui";
 import { jsx as jsx240, jsxs as jsxs130 } from "@emotion/react/jsx-runtime";
 var WfoEngineStatus = () => {
   const { theme } = useOrchestratorTheme();
@@ -53874,28 +53978,28 @@ var WfoEngineStatus = () => {
   const { engineStatus, runningProcesses } = data || {};
   const isRunning = engineStatus === "RUNNING" /* RUNNING */;
   const t = useTranslations79("settings.page");
-  return /* @__PURE__ */ jsx240(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs130(EuiFlexGroup27, { direction: "column", gutterSize: "s", children: [
-    /* @__PURE__ */ jsx240(EuiFlexItem32, { children: /* @__PURE__ */ jsx240(EuiText47, { size: "s", children: /* @__PURE__ */ jsx240("h4", { children: t("engineStatusTitle") }) }) }),
-    /* @__PURE__ */ jsxs130(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx240(EuiText47, { size: "s", style: { minWidth: 200 }, children: t("runningProcesses") }),
-      /* @__PURE__ */ jsx240(EuiText47, { size: "s", children: runningProcesses || "-" })
+  return /* @__PURE__ */ jsx240(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs130(EuiFlexGroup27, { direction: "column", gutterSize: "s", children: [
+    /* @__PURE__ */ jsx240(EuiFlexItem33, { children: /* @__PURE__ */ jsx240(EuiText48, { size: "s", children: /* @__PURE__ */ jsx240("h4", { children: t("engineStatusTitle") }) }) }),
+    /* @__PURE__ */ jsxs130(EuiFlexItem33, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx240(EuiText48, { size: "s", style: { minWidth: 200 }, children: t("runningProcesses") }),
+      /* @__PURE__ */ jsx240(EuiText48, { size: "s", children: runningProcesses || "-" })
     ] }),
-    /* @__PURE__ */ jsxs130(EuiFlexItem32, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx240(EuiText47, { size: "s", style: { minWidth: 190 }, children: t("status") }),
+    /* @__PURE__ */ jsxs130(EuiFlexItem33, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx240(EuiText48, { size: "s", style: { minWidth: 190 }, children: t("status") }),
       /* @__PURE__ */ jsx240(
         WfoStatusDotIcon,
         {
           color: isRunning ? theme.colors.success : theme.colors.warning
         }
       ),
-      /* @__PURE__ */ jsx240(EuiText47, { size: "xs", css: { paddingTop: theme.size.xs }, children: /* @__PURE__ */ jsx240("p", { children: engineStatus }) })
+      /* @__PURE__ */ jsx240(EuiText48, { size: "xs", css: { paddingTop: theme.size.xs }, children: /* @__PURE__ */ jsx240("p", { children: engineStatus }) })
     ] })
   ] }) });
 };
 
 // src/components/WfoSettings/WfoWorkerStatus.tsx
 import { useTranslations as useTranslations80 } from "next-intl";
-import { EuiFlexGroup as EuiFlexGroup28, EuiFlexItem as EuiFlexItem33, EuiPanel as EuiPanel10, EuiText as EuiText48 } from "@elastic/eui";
+import { EuiFlexGroup as EuiFlexGroup28, EuiFlexItem as EuiFlexItem34, EuiPanel as EuiPanel11, EuiText as EuiText49 } from "@elastic/eui";
 import { jsx as jsx241, jsxs as jsxs131 } from "@emotion/react/jsx-runtime";
 var WfoWorkerStatus = () => {
   const { data } = useGetWorkerStatusQuery();
@@ -53906,19 +54010,19 @@ var WfoWorkerStatus = () => {
     numberOfWorkersOnline
   } = data || {};
   const t = useTranslations80("settings.page");
-  return executorType?.toUpperCase() === "CELERY" /* CELERY */ && /* @__PURE__ */ jsx241(EuiPanel10, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs131(EuiFlexGroup28, { direction: "column", gutterSize: "s", children: [
-    /* @__PURE__ */ jsx241(EuiFlexItem33, { children: /* @__PURE__ */ jsx241(EuiText48, { size: "s", children: /* @__PURE__ */ jsx241("h4", { children: t("workerStatusTitle") }) }) }),
-    /* @__PURE__ */ jsxs131(EuiFlexItem33, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", style: { minWidth: 200 }, children: t("numberOfQueuedJobs") }),
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", children: numberOfQueuedJobs || "-" })
+  return executorType?.toUpperCase() === "CELERY" /* CELERY */ && /* @__PURE__ */ jsx241(EuiPanel11, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs131(EuiFlexGroup28, { direction: "column", gutterSize: "s", children: [
+    /* @__PURE__ */ jsx241(EuiFlexItem34, { children: /* @__PURE__ */ jsx241(EuiText49, { size: "s", children: /* @__PURE__ */ jsx241("h4", { children: t("workerStatusTitle") }) }) }),
+    /* @__PURE__ */ jsxs131(EuiFlexItem34, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", style: { minWidth: 200 }, children: t("numberOfQueuedJobs") }),
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", children: numberOfQueuedJobs || "-" })
     ] }),
-    /* @__PURE__ */ jsxs131(EuiFlexItem33, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", style: { minWidth: 200 }, children: t("numberOfRunningJobs") }),
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", children: numberOfRunningJobs || "-" })
+    /* @__PURE__ */ jsxs131(EuiFlexItem34, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", style: { minWidth: 200 }, children: t("numberOfRunningJobs") }),
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", children: numberOfRunningJobs || "-" })
     ] }),
-    /* @__PURE__ */ jsxs131(EuiFlexItem33, { css: { flexDirection: "row" }, children: [
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", style: { minWidth: 200 }, children: t("numberOfWorkersOnline") }),
-      /* @__PURE__ */ jsx241(EuiText48, { size: "s", children: numberOfWorkersOnline || "-" })
+    /* @__PURE__ */ jsxs131(EuiFlexItem34, { css: { flexDirection: "row" }, children: [
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", style: { minWidth: 200 }, children: t("numberOfWorkersOnline") }),
+      /* @__PURE__ */ jsx241(EuiText49, { size: "s", children: numberOfWorkersOnline || "-" })
     ] })
   ] }) }) || null;
 };
@@ -53962,9 +54066,9 @@ var WfoInsyncIcon = ({ inSync }) => {
 };
 
 // src/components/WfoErrorBoundary/WfoErrorBoundary.tsx
-import React78 from "react";
+import React79 from "react";
 import { jsx as jsx244, jsxs as jsxs132 } from "@emotion/react/jsx-runtime";
-var WfoErrorBoundary = class extends React78.Component {
+var WfoErrorBoundary = class extends React79.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -53994,9 +54098,9 @@ var WfoErrorBoundary = class extends React78.Component {
 import { EuiFlexGroup as EuiFlexGroup29 } from "@elastic/eui";
 
 // src/components/WfoNoResults/styles.ts
-import { css as css46 } from "@emotion/react";
+import { css as css47 } from "@emotion/react";
 var getStyles15 = ({ theme }) => {
-  const panelStyle = css46({
+  const panelStyle = css47({
     display: "flex",
     padding: theme.base * 2,
     flexDirection: "row",
@@ -54352,25 +54456,25 @@ var getNumberOfColumns = (currentBreakpoint) => {
 import {
   EuiAvatar as EuiAvatar2,
   EuiFlexGroup as EuiFlexGroup30,
-  EuiFlexItem as EuiFlexItem34,
+  EuiFlexItem as EuiFlexItem35,
   EuiLoadingSpinner,
-  EuiPanel as EuiPanel11,
-  EuiText as EuiText49
+  EuiPanel as EuiPanel12,
+  EuiText as EuiText50
 } from "@elastic/eui";
 
 // src/components/WfoSummary/WfoSummaryCardHeader/styles.ts
-import { css as css47 } from "@emotion/react";
+import { css as css48 } from "@emotion/react";
 var getWfoSummaryCardHeaderStyles = ({ theme }) => {
-  const avatarStyle = css47({
+  const avatarStyle = css48({
     maxHeight: theme.base * 3,
     maxWidth: theme.base * 3
   });
-  const totalSectionStyle = css47({
+  const totalSectionStyle = css48({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between"
   });
-  const valueStyle = css47({
+  const valueStyle = css48({
     fontSize: theme.size.l,
     fontWeight: theme.font.weight.semiBold
   });
@@ -54392,7 +54496,7 @@ var WfoSummaryCardHeader = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const { avatarStyle, totalSectionStyle, valueStyle } = useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
-  return /* @__PURE__ */ jsx248(EuiFlexItem34, { grow: 0, children: /* @__PURE__ */ jsx248(EuiPanel11, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs134(EuiFlexGroup30, { alignItems: "center", children: [
+  return /* @__PURE__ */ jsx248(EuiFlexItem35, { grow: 0, children: /* @__PURE__ */ jsx248(EuiPanel12, { hasShadow: false, color: "subdued", paddingSize: "l", children: /* @__PURE__ */ jsxs134(EuiFlexGroup30, { alignItems: "center", children: [
     /* @__PURE__ */ jsx248(
       EuiAvatar2,
       {
@@ -54407,9 +54511,9 @@ var WfoSummaryCardHeader = ({
       }
     ),
     /* @__PURE__ */ jsxs134("div", { css: totalSectionStyle, children: [
-      /* @__PURE__ */ jsx248(EuiText49, { color: "subdued", children: text }),
+      /* @__PURE__ */ jsx248(EuiText50, { color: "subdued", children: text }),
       /* @__PURE__ */ jsxs134(EuiFlexGroup30, { gutterSize: "s", alignItems: "center", children: [
-        /* @__PURE__ */ jsx248(EuiText49, { css: valueStyle, children: value }),
+        /* @__PURE__ */ jsx248(EuiText50, { css: valueStyle, children: value }),
         isFetching && /* @__PURE__ */ jsx248(EuiLoadingSpinner, {})
       ] })
     ] })
@@ -54420,16 +54524,16 @@ var WfoSummaryCardHeader = ({
 import { useRouter as useRouter17 } from "next/router";
 import {
   EuiButton as EuiButton19,
-  EuiFlexItem as EuiFlexItem36,
-  EuiHorizontalRule as EuiHorizontalRule10,
-  EuiPanel as EuiPanel12,
+  EuiFlexItem as EuiFlexItem37,
+  EuiHorizontalRule as EuiHorizontalRule9,
+  EuiPanel as EuiPanel13,
   EuiSkeletonText,
   EuiSpacer as EuiSpacer28,
   useEuiScrollBar as useEuiScrollBar3
 } from "@elastic/eui";
 
 // src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx
-import { EuiFlexGroup as EuiFlexGroup31, EuiFlexItem as EuiFlexItem35, EuiIcon as EuiIcon6, EuiTextColor } from "@elastic/eui";
+import { EuiFlexGroup as EuiFlexGroup31, EuiFlexItem as EuiFlexItem36, EuiIcon as EuiIcon6, EuiTextColor } from "@elastic/eui";
 
 // src/components/WfoOptionalLink/WfoOptionalLink.tsx
 import Link14 from "next/link";
@@ -54445,23 +54549,23 @@ var WfoOptionalLink = ({
 };
 
 // src/components/WfoSummary/WfoSummaryCardList/styles.ts
-import { css as css48 } from "@emotion/react";
+import { css as css49 } from "@emotion/react";
 var getWfoSummaryCardListStyles = ({ theme }) => {
-  const listContainerStyle = css48({
+  const listContainerStyle = css49({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
     flexGrow: 1,
     borderColor: theme.colors.lightShade
   });
-  const listHeaderStyle = css48({
+  const listHeaderStyle = css49({
     fontWeight: theme.font.weight.semiBold
   });
-  const listStyle = css48({
+  const listStyle = css49({
     height: theme.base * 20,
     overflow: "auto"
   });
-  const listItemContainerStyle = css48({
+  const listItemContainerStyle = css49({
     paddingBlock: theme.size.m,
     ".highlight-icon": {
       visibility: "hidden"
@@ -54470,13 +54574,13 @@ var getWfoSummaryCardListStyles = ({ theme }) => {
       visibility: "visible"
     }
   });
-  const listItemTitleStyle = css48({
+  const listItemTitleStyle = css49({
     fontWeight: theme.font.weight.medium
   });
-  const listItemSubtitleStyle = css48({
+  const listItemSubtitleStyle = css49({
     fontWeight: theme.font.weight.regular
   });
-  const listItemHighlightIconStyle = css48({
+  const listItemHighlightIconStyle = css49({
     visibility: "hidden"
   });
   return {
@@ -54505,7 +54609,7 @@ var WfoSummaryCardListItem = ({
     listItemHighlightIconStyle
   } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
   return /* @__PURE__ */ jsx250(WfoOptionalLink, { href: url, children: /* @__PURE__ */ jsxs135(EuiFlexGroup31, { css: listItemContainerStyle, gutterSize: "none", children: [
-    /* @__PURE__ */ jsxs135(EuiFlexItem35, { children: [
+    /* @__PURE__ */ jsxs135(EuiFlexItem36, { children: [
       /* @__PURE__ */ jsx250(
         EuiTextColor,
         {
@@ -54517,7 +54621,7 @@ var WfoSummaryCardListItem = ({
       /* @__PURE__ */ jsx250(EuiTextColor, { css: listItemSubtitleStyle, children: value })
     ] }),
     /* @__PURE__ */ jsx250(
-      EuiFlexItem35,
+      EuiFlexItem36,
       {
         className: url ? "highlight-icon" : void 0,
         grow: false,
@@ -54539,8 +54643,8 @@ var WfoSummaryCardList = ({
   const router = useRouter17();
   const euiScrollBarStyle = useEuiScrollBar3();
   const { listContainerStyle, listHeaderStyle, listStyle } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-  return /* @__PURE__ */ jsx251(EuiFlexItem36, { children: /* @__PURE__ */ jsxs136(
-    EuiPanel12,
+  return /* @__PURE__ */ jsx251(EuiFlexItem37, { children: /* @__PURE__ */ jsxs136(
+    EuiPanel13,
     {
       css: listContainerStyle,
       hasShadow: false,
@@ -54559,7 +54663,7 @@ var WfoSummaryCardList = ({
                 url: item.url
               }
             ),
-            index === items.length - 1 ? null : /* @__PURE__ */ jsx251(EuiHorizontalRule10, { margin: "none" })
+            index === items.length - 1 ? null : /* @__PURE__ */ jsx251(EuiHorizontalRule9, { margin: "none" })
           ] }, index)) }) })
         ] }),
         /* @__PURE__ */ jsx251(EuiSpacer28, { size: "m" }),
@@ -54593,12 +54697,12 @@ var WfoSummaryCards = ({ children }) => {
 };
 
 // src/components/WfoSummary/WfoSummaryCard.tsx
-import { EuiFlexItem as EuiFlexItem37, EuiSpacer as EuiSpacer29 } from "@elastic/eui";
+import { EuiFlexItem as EuiFlexItem38, EuiSpacer as EuiSpacer29 } from "@elastic/eui";
 
 // src/components/WfoSummary/styles.ts
-import { css as css49 } from "@emotion/react";
+import { css as css50 } from "@emotion/react";
 var getWfoSummaryCardsStyles = ({ theme }) => {
-  const cardContainerStyle = css49({
+  const cardContainerStyle = css50({
     height: theme.base * 36,
     minWidth: theme.base * 25
   });
@@ -54682,7 +54786,7 @@ var WfoSummaryCard = ({
         };
     }
   };
-  return /* @__PURE__ */ jsxs137(EuiFlexItem37, { css: cardContainerStyle, children: [
+  return /* @__PURE__ */ jsxs137(EuiFlexItem38, { css: cardContainerStyle, children: [
     /* @__PURE__ */ jsx253(
       WfoSummaryCardHeader,
       {
@@ -55231,12 +55335,12 @@ var WfoSubscriptionDetailNoteEdit = ({ subscriptionId, onlyShowOnHover = false }
 };
 
 // src/components/WfoTableCodeBlock/WfoTableCodeBlock.tsx
-import { EuiFlexItem as EuiFlexItem38 } from "@elastic/eui";
+import { EuiFlexItem as EuiFlexItem39 } from "@elastic/eui";
 
 // src/components/WfoTableCodeBlock/styles.ts
-import { css as css50 } from "@emotion/react";
+import { css as css51 } from "@emotion/react";
 var getStyles16 = ({ theme }) => {
-  const tableCodeBlockMarginStyle = css50({
+  const tableCodeBlockMarginStyle = css51({
     margin: theme.size.base,
     marginTop: theme.size.l,
     marginRight: theme.size.l
@@ -55263,7 +55367,7 @@ var WfoTableCodeBlock = ({
       };
     }
   );
-  return /* @__PURE__ */ jsx264(EuiFlexItem38, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx264(
+  return /* @__PURE__ */ jsx264(EuiFlexItem39, { css: tableCodeBlockMarginStyle, children: /* @__PURE__ */ jsx264(
     WfoKeyValueTable,
     {
       keyValues,
@@ -55707,7 +55811,13 @@ var en_GB_default = {
       numberOfRunningJobs: "Number of running jobs",
       numberOfWorkersOnline: "Number of workers online",
       viewStatusPage: "View AO status page",
-      aoStackStatus: "AO stack status"
+      aoStackStatus: "AO stack status",
+      noSettingsExposed: "No settings exposed by the backend, to enable this, please refer to the",
+      settingsOverviewLink: "Settings Overview page in the documentation"
+    },
+    tabs: {
+      actions: "Actions",
+      envSettings: "Environment Settings"
     }
   },
   startPage: {
@@ -56160,7 +56270,13 @@ var nl_NL_default = {
       status: "Status",
       numberOfQueuedJobs: "Aantal queued jobs",
       numberOfRunningJobs: "Aantal running jobs",
-      numberOfWorkersOnline: "Aantal workers online"
+      numberOfWorkersOnline: "Aantal workers online",
+      noSettingsExposed: "Er zijn geen instellingen beschikbaar vanuit de backend. Om dit in te schakelen, raadpleeg de ",
+      settingsOverviewLink: "pagina Instellingenoverzicht in de documentatie"
+    },
+    tabs: {
+      actions: "Acties",
+      envSettings: "Environment Settings"
     }
   },
   startPage: {
@@ -56341,6 +56457,7 @@ export {
   SETTINGS_CACHE_NAMES_ENDPOINT,
   SETTINGS_ENDPOINT,
   SETTINGS_ENGINE_STATUS_ENDPOINT,
+  SETTINGS_OVERVIEW,
   SETTINGS_SEARCH_INDEX_RESET_ENDPOINT,
   SETTINGS_WORKER_STATUS_ENDPOINT,
   STEP_STATE_HIDDEN_KEYS,
@@ -56375,6 +56492,7 @@ export {
   VALUE_CELL_CLASS_NAME,
   VlanField,
   WFO_STATUS_COLOR_FIELD,
+  WfoActionSettings,
   WfoActiveWorkflowsSummaryCard,
   WfoActualWork,
   WfoAdvancedTable,
@@ -56408,6 +56526,7 @@ export {
   WfoEngineStatus,
   WfoEngineStatusBadge,
   WfoEngineStatusButton,
+  WfoEnvSettings,
   WfoEnvironmentBadge,
   WfoError,
   WfoErrorBoundary,
@@ -56488,6 +56607,7 @@ export {
   WfoSearchStrikethrough,
   WfoSettingsModal,
   WfoSettingsPage,
+  WfoSettingsTab,
   WfoShare,
   WfoSideMenu,
   WfoSidebar,
@@ -56682,6 +56802,7 @@ export {
   resourceTypesQuery,
   selectOrchestratorConfig,
   setTableConfigToLocalStorage,
+  settingsTabs,
   snakeToHuman,
   snakeToKebab,
   sortProcessesByDate,
@@ -56721,6 +56842,7 @@ export {
   useGetCustomersWithSubscriptionCountQuery,
   useGetDescriptionForWorkflowNameQuery,
   useGetEngineStatusQuery,
+  useGetEnvironmentVariablesQuery,
   useGetInUseByRelationDetailsQuery,
   useGetNodeSubscriptionOptionsQuery,
   useGetOrchestratorConfig,