@aivenio/aquarium 1.80.1 → 2.1.0

package/README.md

@@ -82,7 +82,7 @@ This project requires certain environment variables to be set before commands su
 
 ### Developing in the context of your app
 
-To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application (e.g. Console).
+To develop Aquarium components in the context of an application, it is easier to run a locally modified version of Aquarium in your application.
 There are two ways to do this: [npm link](https://docs.npmjs.com/cli/v7/commands/npm-link), or copying the module into your app. This allows you to make changes to components and instantly see the change in the context of the app.
 
 #### `npm link`
@@ -113,7 +113,15 @@ cd <path to ds> \
 
 #### `npm pack`
 
-Copy module is a hack which doesn't work when the dependencies have changed on the DS side since the last install in your app side. You can instead use `npm pack` to create a tarball (like what's published to the real npm) and install that to your app. Here's a snippet to do all that:
+Copy module is a hack which doesn't work when the dependencies have changed on the DS side since the last install in your app side.
+
+You can use `pack-and-install.sh` utility script to create local release package and install it to your local application.
+
+```sh
+APP_PATH=<path to your app> ./pack-and-install.sh && <run dev/build command for your app>
+```
+
+Or if you want, you can also run `npm pack` command manually and then install that to your app.
 
 ```sh
 cd <path to ds> \

package/dist/atoms.cjs

@@ -1431,6 +1431,22 @@ var require_deliveryLocation = __commonJS({
   }
 });
 
+// src/icons/disasterRecovery.js
+var require_disasterRecovery = __commonJS({
+  "src/icons/disasterRecovery.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<mask id="svgIDa" fill="#fff"><path d="m13.838 8.734 1.983.731.515-1.396-1.983-.73zm-4.947.96 1.983.73.515-1.396-1.983-.73zM8.077 1.7l-3.73 10.128c.561-.45 1.211-.795 1.963-.814l2.693-7.312 9.639 3.55-1.388 3.773c.533.013 1.04.208 1.458.55l1.934-5.248zm4.88 9.491 1.983.73.515-1.395-1.984-.73zM9.772 7.237l1.984.73.514-1.395-1.983-.73zM2.748 15.91c.725.065 1.48-.262 2.082-.897l.219-.236c.184-.203.572-.627.9-.902.033.572.254 1.073.428 1.336a1.95 1.95 0 001.472.89c.759.067 1.616-.305 2.246-.968l.213-.231c.21-.23.655-.715 1.024-1.02a2.85 2.85 0 00.429 1.326c.346.523.87.837 1.474.89.761.064 1.622-.305 2.251-.968.065-.067.133-.143.205-.22.193-.211.655-.715 1.038-1.027a2.85 2.85 0 00.429 1.325c.369.557.912.892 1.528.944q.09.008.177.008c.665 0 1.346-.32 1.892-.894l-1.13-1.074c-.253.268-.564.426-.804.406-.088-.008-.22-.042-.361-.255-.096-.143-.263-.614-.107-.923l.237-.465-.34-.396a1.38 1.38 0 00-1.048-.499h-.024c-.912 0-1.734.814-2.63 1.797a9 9 0 01-.19.205c-.294.31-.692.504-.983.48-.093-.007-.203-.038-.31-.2-.095-.145-.262-.613-.106-.922l.229-.46-.343-.395a1.38 1.38 0 00-1.048-.5h-.02c-.986 0-1.89.991-2.62 1.79l-.198.212c-.292.31-.692.502-.978.481-.09-.008-.2-.039-.307-.2-.096-.143-.262-.614-.106-.923l.236-.465-.34-.395a1.4 1.4 0 00-1.066-.512h-.02c-.952 0-1.8.928-2.48 1.676-.074.078-.141.154-.201.219-.257.27-.577.434-.811.41-.088-.007-.218-.041-.356-.25l-1.3.864c.367.554.907.886 1.518.938m16.068 2.834c-.088-.008-.22-.042-.361-.255-.096-.143-.263-.613-.107-.923l.237-.465-.34-.395a1.38 1.38 0 00-1.048-.5h-.024c-.912 0-1.734.814-2.633 1.797a9 9 0 01-.19.205c-.294.31-.697.505-.983.481-.093-.008-.202-.039-.309-.2-.096-.145-.262-.613-.107-.923l.237-.465-.343-.395a1.38 1.38 0 00-1.048-.5h-.02c-.91 0-1.727.812-2.62 1.79l-.196.212c-.291.307-.691.505-.977.481-.091-.008-.2-.039-.307-.2-.096-.143-.263-.613-.107-.923l.237-.465-.34-.395a1.4 1.4 0 00-1.066-.512H6.38c-.952 0-1.8.928-2.48 1.676-.073.078-.14.154-.2.219-.258.27-.578.429-.811.41-.091-.007-.221-.041-.36-.25l-1.299.864c.367.554.907.887 1.518.939.72.06 1.48-.263 2.082-.897q.101-.111.219-.237c.184-.203.572-.626.9-.902a2.9 2.9 0 00.428 1.336c.346.523.871.837 1.472.89.756.064 1.616-.305 2.246-.968l.21-.229c.21-.228.655-.715 1.024-1.019a2.85 2.85 0 00.43 1.326c.345.523.87.837 1.473.89.757.064 1.622-.305 2.252-.968l.205-.22c.192-.211.655-.718 1.037-1.03.037.57.255 1.066.429 1.326.37.556.912.891 1.529.943q.091.008.176.008c.666 0 1.347-.32 1.893-.894l-1.134-1.069c-.252.268-.561.424-.803.406"/></mask><path fill="none" stroke="currentColor" stroke-miterlimit="16" stroke-width="1.6" d="m13.838 8.734 1.983.731.515-1.396-1.983-.73zm-4.947.96 1.983.73.515-1.396-1.983-.73zM8.077 1.7l-3.73 10.128c.561-.45 1.211-.795 1.963-.814l2.693-7.312 9.639 3.55-1.388 3.773c.533.013 1.04.208 1.458.55l1.934-5.248zm4.88 9.491 1.983.73.515-1.395-1.984-.73zM9.772 7.237l1.984.73.514-1.395-1.983-.73zM2.748 15.91c.725.065 1.48-.262 2.082-.897l.219-.236c.184-.203.572-.627.9-.902.033.572.254 1.073.428 1.336a1.95 1.95 0 001.472.89c.759.067 1.616-.305 2.246-.968l.213-.231c.21-.23.655-.715 1.024-1.02a2.85 2.85 0 00.429 1.326c.346.523.87.837 1.474.89.761.064 1.622-.305 2.251-.968.065-.067.133-.143.205-.22.193-.211.655-.715 1.038-1.027a2.85 2.85 0 00.429 1.325c.369.557.912.892 1.528.944q.09.008.177.008c.665 0 1.346-.32 1.892-.894l-1.13-1.074c-.253.268-.564.426-.804.406-.088-.008-.22-.042-.361-.255-.096-.143-.263-.614-.107-.923l.237-.465-.34-.396a1.38 1.38 0 00-1.048-.499h-.024c-.912 0-1.734.814-2.63 1.797a9 9 0 01-.19.205c-.294.31-.692.504-.983.48-.093-.007-.203-.038-.31-.2-.095-.145-.262-.613-.106-.922l.229-.46-.343-.395a1.38 1.38 0 00-1.048-.5h-.02c-.986 0-1.89.991-2.62 1.79l-.198.212c-.292.31-.692.502-.978.481-.09-.008-.2-.039-.307-.2-.096-.143-.262-.614-.106-.923l.236-.465-.34-.395a1.4 1.4 0 00-1.066-.512h-.02c-.952 0-1.8.928-2.48 1.676-.074.078-.141.154-.201.219-.257.27-.577.434-.811.41-.088-.007-.218-.041-.356-.25l-1.3.864c.367.554.907.886 1.518.938Zm16.068 2.834c-.088-.008-.22-.042-.361-.255-.096-.143-.263-.613-.107-.923l.237-.465-.34-.395a1.38 1.38 0 00-1.048-.5h-.024c-.912 0-1.734.814-2.633 1.797a9 9 0 01-.19.205c-.294.31-.697.505-.983.481-.093-.008-.202-.039-.309-.2-.096-.145-.262-.613-.107-.923l.237-.465-.343-.395a1.38 1.38 0 00-1.048-.5h-.02c-.91 0-1.727.812-2.62 1.79l-.196.212c-.291.307-.691.505-.977.481-.091-.008-.2-.039-.307-.2-.096-.143-.263-.613-.107-.923l.237-.465-.34-.395a1.4 1.4 0 00-1.066-.512H6.38c-.952 0-1.8.928-2.48 1.676-.073.078-.14.154-.2.219-.258.27-.578.429-.811.41-.091-.007-.221-.041-.36-.25l-1.299.864c.367.554.907.887 1.518.939.72.06 1.48-.263 2.082-.897q.101-.111.219-.237c.184-.203.572-.626.9-.902a2.9 2.9 0 00.428 1.336c.346.523.871.837 1.472.89.756.064 1.616-.305 2.246-.968l.21-.229c.21-.228.655-.715 1.024-1.019a2.85 2.85 0 00.43 1.326c.345.523.87.837 1.473.89.757.064 1.622-.305 2.252-.968l.205-.22c.192-.211.655-.718 1.037-1.03.037.57.255 1.066.429 1.326.37.556.912.891 1.529.943q.091.008.176.008c.666 0 1.347-.32 1.893-.894l-1.134-1.069c-.252.268-.561.424-.803.406Z" mask="url(#svgIDa)"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/document.js
 var require_document = __commonJS({
   "src/icons/document.js"(exports) {
@@ -4207,6 +4223,7 @@ __export(atoms_exports, {
   getTitleContent: () => getTitleContent,
   getValues: () => getValues,
   isOptionDisabledBuiltin: () => isOptionDisabledBuiltin,
+  modalStyles: () => modalStyles,
   rowClassNames: () => rowClassNames
 });
 module.exports = __toCommonJS(atoms_exports);
@@ -6239,6 +6256,7 @@ var import_dataflow03 = __toESM(require_dataflow03());
 var import_dbBackup = __toESM(require_dbBackup());
 var import_delete = __toESM(require_delete());
 var import_deliveryLocation = __toESM(require_deliveryLocation());
+var import_disasterRecovery = __toESM(require_disasterRecovery());
 var import_document = __toESM(require_document());
 var import_dot = __toESM(require_dot());
 var import_doubleCaretHorizontal = __toESM(require_doubleCaretHorizontal());
@@ -8066,7 +8084,7 @@ var Cell = (_a) => {
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       getAlignClassNames2(align),
-      tw("border-default group-last-of-type:border-b-0"),
+      tw("border-default"),
       className
     )
   }));
@@ -8077,18 +8095,21 @@ var Row = (_a) => {
     disabled,
     header,
     subgroup,
-    active
+    active,
+    isLast
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
     "subgroup",
-    "active"
+    "active",
+    "isLast"
   ]);
   return /* @__PURE__ */ import_react29.default.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
     role: subgroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
+      "[&>*]:border-b-transparent": isLast,
       "children:opacity-70": disabled,
       "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
@@ -8569,6 +8590,102 @@ var Link = (_a) => {
 
 // src/atoms/Modal/Modal.tsx
 var import_react36 = __toESM(require("react"));
+var import_tailwind_variants = require("tailwind-variants");
+var modalStyles = (0, import_tailwind_variants.tv)({
+  slots: {
+    overlay: "inset-0 overflow-y-auto z-modal fixed",
+    backdrop: "-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70",
+    dialog: "bg-popover-content max-h-full flex flex-col",
+    header: "pl-7 pr-[64px] py-6 gap-3 flex items-center",
+    headerImage: "h-[120px] min-h-[120px] w-full",
+    titleContainer: "flex flex-col grow",
+    title: "",
+    closeButtonContainer: "absolute top-[24px] right-[28px]",
+    body: "px-7 grow overflow-y-auto text-default",
+    footer: "px-7 py-6",
+    actions: "flex gap-4 justify-end"
+  },
+  variants: {
+    kind: {
+      dialog: {
+        overlay: "py-7 justify-center flex items-center",
+        dialog: "relative w-full rounded mx-7"
+      },
+      drawer: {
+        overlay: "overflow-x-hidden",
+        dialog: "absolute h-full",
+        title: "text-ellipsis overflow-x-hidden whitespace-nowrap"
+      }
+    },
+    size: {
+      sm: "",
+      md: "",
+      full: "",
+      screen: {
+        overlay: "py-0",
+        dialog: "w-dvw h-dvh mx-0 rounded-none",
+        header: "border-b-1 border-muted mb-6"
+      }
+    },
+    noFooter: {
+      true: {
+        body: "pb-6"
+      }
+    },
+    backgroundImage: {
+      true: {
+        headerImage: "object-cover"
+      },
+      false: {
+        headerImage: "bg-default"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      kind: "dialog",
+      size: "sm",
+      class: {
+        dialog: "max-w-[600px]"
+      }
+    },
+    {
+      kind: "dialog",
+      size: "md",
+      class: {
+        dialog: "max-w-[940px]"
+      }
+    },
+    {
+      kind: "dialog",
+      size: "full",
+      class: {
+        dialog: "min-h-full"
+      }
+    },
+    {
+      kind: "drawer",
+      size: "sm",
+      class: {
+        dialog: "w-[360px]"
+      }
+    },
+    {
+      kind: "drawer",
+      size: "md",
+      class: {
+        dialog: "w-[560px]"
+      }
+    },
+    {
+      kind: "drawer",
+      size: "full",
+      class: {
+        dialog: "w-[1080px]"
+      }
+    }
+  ]
+});
 var Modal = (_a) => {
   var _b = _a, {
     children,
@@ -8581,80 +8698,64 @@ var Modal = (_a) => {
     "className",
     "open"
   ]);
+  const { overlay } = modalStyles({ kind });
   return open ? /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      tw("inset-0 overflow-y-auto z-modal fixed"),
-      {
-        "py-7 justify-center flex items-center": kind === "dialog"
-      },
-      className
-    )
+    className: overlay({ className })
   }), children) : null;
 };
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  const { backdrop } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70"), className)
+    className: backdrop({ className })
   }));
 };
 Modal.Dialog = import_react36.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
-    const commonClasses = tw("bg-popover-content max-h-full flex flex-col");
-    const dialogClasses = classNames("relative w-full rounded mx-7", {
-      "max-w-[600px]": size === "sm",
-      "max-w-[940px]": size === "md",
-      "min-h-full": size === "full"
-    });
-    const drawerClasses = classNames("absolute h-full", {
-      "w-[360px]": size === "sm",
-      "w-[560px]": size === "md",
-      "w-[1080px]": size === "full"
-    });
+    var _b = _a, { kind = "dialog", children, className, size = "md" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+    const { dialog } = modalStyles({ kind, size });
     return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
-      className: classNames(commonClasses, kind === "dialog" ? dialogClasses : drawerClasses, className)
+      className: dialog({ className })
     }), children);
   }
 );
 Modal.Header = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  var _b = _a, { kind = "dialog", size = "md", children, className } = _b, rest = __objRest(_b, ["kind", "size", "children", "className"]);
+  const { header } = modalStyles({ kind, size });
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
+    className: header({ className })
   }), children);
 };
 Modal.HeaderImage = (_a) => {
   var _b = _a, { backgroundImage, className } = _b, rest = __objRest(_b, ["backgroundImage", "className"]);
-  const common = tw("h-[120px] min-h-[120px] w-full ");
+  const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
   return backgroundImage ? /* @__PURE__ */ import_react36.default.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
     src: backgroundImage != null ? backgroundImage : void 0
   }, rest), {
-    className: classNames(common, tw("object-cover"), className)
+    className: headerImage({ className })
   })) : /* @__PURE__ */ import_react36.default.createElement("div", {
-    className: classNames(common, tw("bg-default"), className)
+    className: headerImage({ className })
   });
 };
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  const { closeButtonContainer } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("absolute top-[24px] right-[28px]"), className)
+    className: closeButtonContainer({ className })
   }));
 };
 Modal.Title = (_a) => {
   var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
+  const { title } = modalStyles({ kind });
   return /* @__PURE__ */ import_react36.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "intense",
-    className: classNames(
-      tw({
-        "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
-      }),
-      className
-    )
+    className: title({ className })
   }, rest), children);
 };
 Modal.Subtitle = (_a) => {
@@ -8666,27 +8767,31 @@ Modal.Subtitle = (_a) => {
 };
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  const { titleContainer } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow"), className)
+    className: titleContainer({ className })
   }), children);
 };
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
+  const { body } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 grow overflow-y-auto text-default", { "pb-6": noFooter }), className),
+    className: body({ noFooter, className }),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
 Modal.Footer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  const { footer } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 py-6"), className)
+    className: footer({ className })
   }), children);
 };
 Modal.Actions = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  const { actions } = modalStyles();
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex gap-4 justify-end"), className)
+    className: actions({ className })
   }), children);
 };
 
@@ -9098,6 +9203,7 @@ var Group2 = import_react43.default.forwardRef((_a, ref) => {
     )
   }, props), children);
 });
+var endAdornmentSize = { width: 14, height: 14 };
 var Item4 = import_react43.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
@@ -9110,8 +9216,10 @@ var Item4 = import_react43.default.forwardRef(
       })
     }, props), /* @__PURE__ */ import_react43.default.createElement("span", {
       className: tw("grow flex gap-x-3")
-    }, children), selected && /* @__PURE__ */ import_react43.default.createElement(InlineIcon, {
+    }, children), selected ? /* @__PURE__ */ import_react43.default.createElement(InlineIcon, __spreadValues({
       icon: import_tick4.default
+    }, endAdornmentSize)) : /* @__PURE__ */ import_react43.default.createElement("div", {
+      style: endAdornmentSize
     }));
   }
 );
@@ -9323,5 +9431,6 @@ var Switch = import_react45.default.forwardRef(
   getTitleContent,
   getValues,
   isOptionDisabledBuiltin,
+  modalStyles,
   rowClassNames
 });