@scality/data-browser-library 1.0.0-preview.9 → 1.0.1

package/dist/components/buckets/BucketLifecycleFormPage.js

@@ -6,35 +6,36 @@ import { Box, Button, Input, Select } from "@scality/core-ui/dist/next";
 import joi from "joi";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Controller, FormProvider, useFieldArray, useForm } from "react-hook-form";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { useGetBucketLifecycle, useSetBucketLifecycle } from "../../hooks/bucketConfiguration.js";
-import { FilterFormSection, createFilterValidationSchema } from "../ui/FilterFormSection.js";
-import { ArrayFieldActions } from "../ui/ArrayFieldActions.js";
+import { useDataBrowserNavigate } from "../../hooks/useDataBrowserNavigate.js";
 import { AWS_RULE_LIMITS, STATUS_OPTIONS, buildS3Filter } from "../../utils/s3RuleUtils.js";
+import { ArrayFieldActions } from "../ui/ArrayFieldActions.js";
+import { FilterFormSection, createFilterValidationSchema } from "../ui/FilterFormSection.js";
 const storageClassOptions = [
     {
-        value: "GLACIER",
-        label: "Glacier"
+        value: 'GLACIER',
+        label: 'Glacier'
     },
     {
-        value: "DEEP_ARCHIVE",
-        label: "Glacier Deep Archive"
+        value: 'DEEP_ARCHIVE',
+        label: 'Glacier Deep Archive'
     },
     {
-        value: "STANDARD_IA",
-        label: "Standard-IA"
+        value: 'STANDARD_IA',
+        label: 'Standard-IA'
     },
     {
-        value: "ONEZONE_IA",
-        label: "One Zone-IA"
+        value: 'ONEZONE_IA',
+        label: 'One Zone-IA'
     },
     {
-        value: "INTELLIGENT_TIERING",
-        label: "Intelligent-Tiering"
+        value: 'INTELLIGENT_TIERING',
+        label: 'Intelligent-Tiering'
     },
     {
-        value: "GLACIER_IR",
-        label: "Glacier Instant Retrieval"
+        value: 'GLACIER_IR',
+        label: 'Glacier Instant Retrieval'
     }
 ];
 const STORAGE_CLASS_MIN_DAYS = {
@@ -51,109 +52,112 @@ const LIFECYCLE_LIMITS = {
 };
 const schema = joi.object({
     ruleId: joi.string().required().max(AWS_RULE_LIMITS.RULE_ID_MAX_LENGTH).messages({
-        "string.empty": "Rule ID is required",
-        "string.max": `Rule ID must not exceed ${AWS_RULE_LIMITS.RULE_ID_MAX_LENGTH} characters`
+        'string.empty': 'Rule ID is required',
+        'string.max': `Rule ID must not exceed ${AWS_RULE_LIMITS.RULE_ID_MAX_LENGTH} characters`
     }),
     status: joi.string().valid(...STATUS_OPTIONS.map((o)=>o.value)).required(),
     ...createFilterValidationSchema(joi),
     transitionsEnabled: joi.boolean(),
-    transitions: joi.when("transitionsEnabled", {
+    transitions: joi.when('transitionsEnabled', {
         is: true,
         then: joi.array().items(joi.object({
-            timeType: joi.string().valid("days", "date").required(),
-            days: joi.when("timeType", {
-                is: "days",
+            timeType: joi.string().valid('days', 'date').required(),
+            days: joi.when('timeType', {
+                is: 'days',
                 then: joi.number().integer().min(0).required().messages({
-                    "number.base": "Days must be a number",
-                    "number.min": "Days must be at least 0"
+                    'number.base': 'Days must be a number',
+                    'number.min': 'Days must be at least 0'
                 }),
                 otherwise: joi.any()
             }),
-            date: joi.when("timeType", {
-                is: "date",
+            date: joi.when('timeType', {
+                is: 'date',
                 then: joi.string().required().messages({
-                    "string.empty": "Date is required"
+                    'string.empty': 'Date is required'
                 }),
                 otherwise: joi.any()
             }),
             storageClass: joi.string().valid(...storageClassOptions.map((o)=>o.value)).required().messages({
-                "string.empty": "Storage class is required"
+                'string.empty': 'Storage class is required'
             })
         }).custom((value, helpers)=>{
-            if ("days" === value.timeType && value.storageClass && value.days < STORAGE_CLASS_MIN_DAYS[value.storageClass]) return helpers.error("any.custom", {
+            if ('days' === value.timeType && value.storageClass && value.days < STORAGE_CLASS_MIN_DAYS[value.storageClass]) return helpers.error('any.custom', {
                 message: `${value.storageClass} requires at least ${STORAGE_CLASS_MIN_DAYS[value.storageClass]} days`
             });
             return value;
         })).min(1).messages({
-            "array.min": "At least one transition is required when enabled"
+            'array.min': 'At least one transition is required when enabled'
         }),
         otherwise: joi.any()
     }),
     expirationEnabled: joi.boolean(),
-    expirationType: joi.when("expirationEnabled", {
+    expirationType: joi.when('expirationEnabled', {
         is: true,
-        then: joi.string().valid("days", "date", "deleteMarker").required(),
+        then: joi.string().valid('days', 'date').required(),
         otherwise: joi.any()
     }),
-    expirationDays: joi.when("expirationType", {
-        is: "days",
+    expirationDays: joi.when('expirationType', {
+        is: 'days',
         then: joi.number().integer().min(1).required().messages({
-            "number.base": "Days must be a number",
-            "number.min": "Days must be at least 1"
+            'number.base': 'Days must be a number',
+            'number.min': 'Days must be at least 1'
         }),
         otherwise: joi.any()
     }),
-    expirationDate: joi.when("expirationType", {
-        is: "date",
+    expirationDate: joi.when('expirationType', {
+        is: 'date',
         then: joi.string().required().messages({
-            "string.empty": "Date is required"
+            'string.empty': 'Date is required'
         }),
         otherwise: joi.any()
     }),
     expiredObjectDeleteMarker: joi.boolean(),
     noncurrentTransitionsEnabled: joi.boolean(),
-    noncurrentTransitions: joi.when("noncurrentTransitionsEnabled", {
+    noncurrentTransitions: joi.when('noncurrentTransitionsEnabled', {
         is: true,
         then: joi.array().items(joi.object({
             noncurrentDays: joi.number().integer().min(LIFECYCLE_LIMITS.NONCURRENT_TRANSITION_MIN_DAYS).required().messages({
-                "number.base": "Noncurrent days must be a number",
-                "number.min": `Noncurrent days must be at least ${LIFECYCLE_LIMITS.NONCURRENT_TRANSITION_MIN_DAYS}`
+                'number.base': 'Noncurrent days must be a number',
+                'number.min': `Noncurrent days must be at least ${LIFECYCLE_LIMITS.NONCURRENT_TRANSITION_MIN_DAYS}`
             }),
             storageClass: joi.string().valid(...storageClassOptions.map((o)=>o.value)).required().messages({
-                "string.empty": "Storage class is required"
+                'string.empty': 'Storage class is required'
             }),
-            newerNoncurrentVersions: joi.number().integer().min(0).optional().allow(null, "")
+            newerNoncurrentVersions: joi.number().integer().min(0).optional().allow(null, '')
         })).min(1).messages({
-            "array.min": "At least one noncurrent transition is required when enabled"
+            'array.min': 'At least one noncurrent transition is required when enabled'
         }),
         otherwise: joi.any()
     }),
     noncurrentExpirationEnabled: joi.boolean(),
-    noncurrentExpirationDays: joi.when("noncurrentExpirationEnabled", {
+    noncurrentExpirationDays: joi.when('noncurrentExpirationEnabled', {
         is: true,
         then: joi.number().integer().min(1).required().messages({
-            "number.base": "Noncurrent days must be a number",
-            "number.min": "Noncurrent days must be at least 1"
+            'number.base': 'Noncurrent days must be a number',
+            'number.min': 'Noncurrent days must be at least 1'
         }),
         otherwise: joi.any()
     }),
-    noncurrentNewerVersions: joi.number().integer().min(0).optional().allow(null, ""),
+    noncurrentNewerVersions: joi.number().integer().min(0).optional().allow(null, ''),
     abortMpuEnabled: joi.boolean(),
-    abortMpuDays: joi.when("abortMpuEnabled", {
+    abortMpuDays: joi.when('abortMpuEnabled', {
         is: true,
         then: joi.number().integer().min(LIFECYCLE_LIMITS.ABORT_MPU_MIN_DAYS).required().messages({
-            "number.base": "Days must be a number",
-            "number.min": `Days must be at least ${LIFECYCLE_LIMITS.ABORT_MPU_MIN_DAYS}`
+            'number.base': 'Days must be a number',
+            'number.min': `Days must be at least ${LIFECYCLE_LIMITS.ABORT_MPU_MIN_DAYS}`
         }),
         otherwise: joi.any()
     })
 }).custom((value, helpers)=>{
-    const hasAtLeastOneAction = value.transitionsEnabled || value.expirationEnabled || value.noncurrentTransitionsEnabled || value.noncurrentExpirationEnabled || value.abortMpuEnabled;
-    if (!hasAtLeastOneAction) return helpers.error("any.custom", {
-        message: "At least one lifecycle action must be enabled (transition, expiration, or abort multipart upload)"
+    const hasAtLeastOneAction = value.transitionsEnabled || value.expirationEnabled || value.expiredObjectDeleteMarker || value.noncurrentTransitionsEnabled || value.noncurrentExpirationEnabled || value.abortMpuEnabled;
+    if (!hasAtLeastOneAction) return helpers.error('any.custom', {
+        message: 'At least one lifecycle action must be enabled (transition, expiration, or abort multipart upload)'
     });
-    if (("tags" === value.filterType || "and" === value.filterType) && value.abortMpuEnabled) return helpers.error("any.custom", {
-        message: "Tag-based filter cannot be used with Abort Incomplete Multipart Upload"
+    if (value.expirationEnabled && value.expiredObjectDeleteMarker) return helpers.error('any.custom', {
+        message: 'Expired delete markers removal cannot be combined with Days/Date expiration on the same rule'
+    });
+    if (('tags' === value.filterType || 'and' === value.filterType) && value.abortMpuEnabled) return helpers.error('any.custom', {
+        message: 'Tag-based filter cannot be used with Abort Incomplete Multipart Upload'
     });
     return value;
 });
@@ -165,17 +169,17 @@ const getArrayFieldError = (errors, fieldName, index, propertyName)=>{
 };
 const ruleToFormValues = (rule)=>{
     const formValues = {
-        ruleId: rule.ID || "",
-        status: rule.Status || "Enabled",
-        filterType: "none",
-        prefix: "",
+        ruleId: rule.ID || '',
+        status: rule.Status || 'Enabled',
+        filterType: 'none',
+        prefix: '',
         tags: [],
         transitionsEnabled: false,
         transitions: [],
         expirationEnabled: false,
-        expirationType: "days",
+        expirationType: 'days',
         expirationDays: 30,
-        expirationDate: "",
+        expirationDate: '',
         expiredObjectDeleteMarker: false,
         noncurrentTransitionsEnabled: false,
         noncurrentTransitions: [],
@@ -185,26 +189,26 @@ const ruleToFormValues = (rule)=>{
         abortMpuEnabled: false,
         abortMpuDays: 7
     };
-    if (void 0 !== rule.Prefix && "" !== rule.Prefix) {
-        formValues.filterType = "prefix";
+    if (void 0 !== rule.Prefix && '' !== rule.Prefix) {
+        formValues.filterType = 'prefix';
         formValues.prefix = rule.Prefix;
     } else if (rule.Filter) {
         if (rule.Filter.And) {
-            formValues.filterType = "and";
-            formValues.prefix = rule.Filter.And.Prefix || "";
+            formValues.filterType = 'and';
+            formValues.prefix = rule.Filter.And.Prefix || '';
             formValues.tags = rule.Filter.And.Tags?.map((tag)=>({
-                    key: tag.Key || "",
-                    value: tag.Value || ""
+                    key: tag.Key || '',
+                    value: tag.Value || ''
                 })) || [];
         } else if (void 0 !== rule.Filter.Prefix) {
-            formValues.filterType = "prefix";
+            formValues.filterType = 'prefix';
             formValues.prefix = rule.Filter.Prefix;
         } else if (rule.Filter.Tag) {
-            formValues.filterType = "tags";
+            formValues.filterType = 'tags';
             formValues.tags = [
                 {
-                    key: rule.Filter.Tag.Key || "",
-                    value: rule.Filter.Tag.Value || ""
+                    key: rule.Filter.Tag.Key || '',
+                    value: rule.Filter.Tag.Value || ''
                 }
             ];
         }
@@ -212,30 +216,29 @@ const ruleToFormValues = (rule)=>{
     if (rule.Transitions && rule.Transitions.length > 0) {
         formValues.transitionsEnabled = true;
         formValues.transitions = rule.Transitions.map((t)=>({
-                timeType: void 0 !== t.Days ? "days" : "date",
+                timeType: void 0 !== t.Days ? 'days' : 'date',
                 days: t.Days || 30,
-                date: t.Date ? new Date(t.Date).toISOString().split("T")[0] : "",
-                storageClass: t.StorageClass || "GLACIER"
+                date: t.Date ? new Date(t.Date).toISOString().split('T')[0] : '',
+                storageClass: t.StorageClass || 'GLACIER'
             }));
     }
     if (rule.Expiration) {
-        formValues.expirationEnabled = true;
         if (rule.Expiration.Days) {
-            formValues.expirationType = "days";
+            formValues.expirationEnabled = true;
+            formValues.expirationType = 'days';
             formValues.expirationDays = rule.Expiration.Days;
         } else if (rule.Expiration.Date) {
-            formValues.expirationType = "date";
-            formValues.expirationDate = new Date(rule.Expiration.Date).toISOString().split("T")[0];
-        } else if (rule.Expiration.ExpiredObjectDeleteMarker) {
-            formValues.expirationType = "deleteMarker";
-            formValues.expiredObjectDeleteMarker = true;
+            formValues.expirationEnabled = true;
+            formValues.expirationType = 'date';
+            formValues.expirationDate = new Date(rule.Expiration.Date).toISOString().split('T')[0];
         }
+        if (rule.Expiration.ExpiredObjectDeleteMarker) formValues.expiredObjectDeleteMarker = true;
     }
     if (rule.NoncurrentVersionTransitions && rule.NoncurrentVersionTransitions.length > 0) {
         formValues.noncurrentTransitionsEnabled = true;
         formValues.noncurrentTransitions = rule.NoncurrentVersionTransitions.map((t)=>({
                 noncurrentDays: t.NoncurrentDays || 30,
-                storageClass: t.StorageClass || "GLACIER",
+                storageClass: t.StorageClass || 'GLACIER',
                 newerNoncurrentVersions: t.NewerNoncurrentVersions || 0
             }));
     }
@@ -256,11 +259,11 @@ const generateStorageClassHelpText = ()=>{
         const minDays = STORAGE_CLASS_MIN_DAYS[option.value];
         if (minDays > 0) hints.push(`<li>${option.label}: min ${minDays} days</li>`);
     });
-    return hints.length > 0 ? `Storage class requirements:<ul>${hints.join("")}</ul>` : void 0;
+    return hints.length > 0 ? `Storage class requirements:<ul>${hints.join('')}</ul>` : void 0;
 };
 function BucketLifecycleFormPage() {
     const { bucketName, ruleId } = useParams();
-    const navigate = useNavigate();
+    const navigate = useDataBrowserNavigate();
     const { showToast } = useToast();
     const isEditMode = !!ruleId;
     const { data: lifecycleData, status: lifecycleStatus } = useGetBucketLifecycle({
@@ -281,27 +284,27 @@ function BucketLifecycleFormPage() {
     ]);
     const dynamicSchema = useMemo(()=>schema.keys({
             ruleId: joi.string().required().invalid(...existingRuleIds).messages({
-                "string.empty": "Rule ID is required",
-                "any.invalid": "A rule with this ID already exists"
+                'string.empty': 'Rule ID is required',
+                'any.invalid': 'A rule with this ID already exists'
             })
         }), [
         existingRuleIds
     ]);
     const methods = useForm({
         resolver: joiResolver(dynamicSchema),
-        mode: "onChange",
+        mode: 'onChange',
         defaultValues: {
-            ruleId: "",
-            status: "Enabled",
-            filterType: "none",
-            prefix: "",
+            ruleId: '',
+            status: 'Enabled',
+            filterType: 'none',
+            prefix: '',
             tags: [],
             transitionsEnabled: false,
             transitions: [],
             expirationEnabled: false,
-            expirationType: "days",
+            expirationType: 'days',
             expirationDays: 30,
-            expirationDate: "",
+            expirationDate: '',
             expiredObjectDeleteMarker: false,
             noncurrentTransitionsEnabled: false,
             noncurrentTransitions: [],
@@ -315,23 +318,24 @@ function BucketLifecycleFormPage() {
     const { handleSubmit, register, control, watch, reset, formState: { isValid, isDirty, errors } } = methods;
     const { fields: transitionFields, append: appendTransition, remove: removeTransition } = useFieldArray({
         control,
-        name: "transitions"
+        name: 'transitions'
     });
     const { fields: noncurrentTransitionFields, append: appendNoncurrentTransition, remove: removeNoncurrentTransition } = useFieldArray({
         control,
-        name: "noncurrentTransitions"
+        name: 'noncurrentTransitions'
     });
     const { fields: tagFields, append: appendTag, remove: removeTag } = useFieldArray({
         control,
-        name: "tags"
+        name: 'tags'
     });
-    const filterType = watch("filterType");
-    const transitionsEnabled = watch("transitionsEnabled");
-    const expirationEnabled = watch("expirationEnabled");
-    const expirationType = watch("expirationType");
-    const noncurrentTransitionsEnabled = watch("noncurrentTransitionsEnabled");
-    const noncurrentExpirationEnabled = watch("noncurrentExpirationEnabled");
-    const abortMpuEnabled = watch("abortMpuEnabled");
+    const filterType = watch('filterType');
+    const transitionsEnabled = watch('transitionsEnabled');
+    const expirationEnabled = watch('expirationEnabled');
+    const expirationType = watch('expirationType');
+    const expiredObjectDeleteMarker = watch('expiredObjectDeleteMarker');
+    const noncurrentTransitionsEnabled = watch('noncurrentTransitionsEnabled');
+    const noncurrentExpirationEnabled = watch('noncurrentExpirationEnabled');
+    const abortMpuEnabled = watch('abortMpuEnabled');
     const { mutate: setLifecycle, isPending: isSaving } = useSetBucketLifecycle();
     const transitionsHelpText = useMemo(()=>{
         if (!transitionsEnabled || 0 === transitionFields.length) return;
@@ -363,10 +367,10 @@ function BucketLifecycleFormPage() {
         const prevValue = prevTransitionsEnabledRef.current;
         prevTransitionsEnabledRef.current = transitionsEnabled;
         if (!isEditMode && null !== prevValue && !prevValue && transitionsEnabled && 0 === transitionFields.length) appendTransition({
-            timeType: "days",
+            timeType: 'days',
             days: 30,
-            date: "",
-            storageClass: "STANDARD_IA"
+            date: '',
+            storageClass: 'STANDARD_IA'
         });
     }, [
         isEditMode,
@@ -379,7 +383,7 @@ function BucketLifecycleFormPage() {
         prevNoncurrentTransitionsEnabledRef.current = noncurrentTransitionsEnabled;
         if (!isEditMode && null !== prevValue && !prevValue && noncurrentTransitionsEnabled && 0 === noncurrentTransitionFields.length) appendNoncurrentTransition({
             noncurrentDays: 30,
-            storageClass: "GLACIER",
+            storageClass: 'GLACIER',
             newerNoncurrentVersions: 0
         });
     }, [
@@ -392,17 +396,17 @@ function BucketLifecycleFormPage() {
     useEffect(()=>{
         const prevFilterType = prevFilterTypeRef.current;
         prevFilterTypeRef.current = filterType;
-        if (("tags" === filterType || "and" === filterType) && 0 === tagFields.length) {
+        if (('tags' === filterType || 'and' === filterType) && 0 === tagFields.length) {
             if (!isEditMode || void 0 !== prevFilterType && prevFilterType !== filterType) appendTag({
-                key: "",
-                value: ""
+                key: '',
+                value: ''
             });
         }
         if (void 0 !== prevFilterType && prevFilterType !== filterType) {
-            if (("none" === filterType || "prefix" === filterType) && tagFields.length > 0) tagFields.forEach((_, index)=>{
+            if (('none' === filterType || 'prefix' === filterType) && tagFields.length > 0) tagFields.forEach((_, index)=>{
                 removeTag(tagFields.length - 1 - index);
             });
-            if ("none" === filterType) methods.setValue("prefix", "", {
+            if ('none' === filterType) methods.setValue('prefix', '', {
                 shouldDirty: true
             });
         }
@@ -431,20 +435,17 @@ function BucketLifecycleFormPage() {
             const t = {
                 StorageClass: transition.storageClass
             };
-            if ("days" === transition.timeType) t.Days = transition.days;
+            if ('days' === transition.timeType) t.Days = transition.days;
             else t.Date = new Date(transition.date);
             return t;
         });
-        if (data.expirationEnabled) {
-            if ("days" === data.expirationType) rule.Expiration = {
-                Days: data.expirationDays
-            };
-            else if ("date" === data.expirationType) rule.Expiration = {
-                Date: new Date(data.expirationDate)
-            };
-            else if ("deleteMarker" === data.expirationType) rule.Expiration = {
-                ExpiredObjectDeleteMarker: true
-            };
+        if (data.expirationEnabled || data.expiredObjectDeleteMarker) {
+            rule.Expiration = {};
+            if (data.expirationEnabled) {
+                if ('days' === data.expirationType) rule.Expiration.Days = data.expirationDays;
+                else if ('date' === data.expirationType) rule.Expiration.Date = new Date(data.expirationDate);
+            }
+            if (data.expiredObjectDeleteMarker) rule.Expiration.ExpiredObjectDeleteMarker = true;
         }
         if (data.noncurrentTransitionsEnabled && data.noncurrentTransitions.length > 0) rule.NoncurrentVersionTransitions = data.noncurrentTransitions.map((transition)=>({
                 NoncurrentDays: transition.noncurrentDays,
@@ -476,17 +477,17 @@ function BucketLifecycleFormPage() {
             onSuccess: ()=>{
                 showToast({
                     open: true,
-                    message: `Lifecycle rule ${isEditMode ? "updated" : "created"} successfully`,
-                    status: "success"
+                    message: `Lifecycle rule ${isEditMode ? 'updated' : 'created'} successfully`,
+                    status: 'success'
                 });
                 navigate(`/buckets/${bucketName}?tab=lifecycle`);
             },
             onError: (error)=>{
-                const errorMessage = error instanceof Error ? error.message : `Failed to ${isEditMode ? "update" : "create"} lifecycle rule`;
+                const errorMessage = error instanceof Error ? error.message : `Failed to ${isEditMode ? 'update' : 'create'} lifecycle rule`;
                 showToast({
                     open: true,
                     message: errorMessage,
-                    status: "error"
+                    status: 'error'
                 });
             }
         });
@@ -499,7 +500,7 @@ function BucketLifecycleFormPage() {
         isEditMode,
         existingRule
     ]);
-    if ("pending" === lifecycleStatus) return /*#__PURE__*/ jsx(Loader, {
+    if ('pending' === lifecycleStatus) return /*#__PURE__*/ jsx(Loader, {
         centered: true,
         children: /*#__PURE__*/ jsx(Text, {
             children: "Loading..."
@@ -516,8 +517,8 @@ function BucketLifecycleFormPage() {
         ...methods,
         children: /*#__PURE__*/ jsxs(Form, {
             layout: {
-                kind: "page",
-                title: isEditMode ? "Edit Lifecycle Rule" : "Create Lifecycle Rule"
+                kind: 'page',
+                title: isEditMode ? 'Edit Lifecycle Rule' : 'Create Lifecycle Rule'
             },
             requireMode: "partial",
             onSubmit: handleSubmit(onSubmit),
@@ -533,10 +534,10 @@ function BucketLifecycleFormPage() {
                         disabled: isSaving
                     }),
                     /*#__PURE__*/ jsx(Button, {
-                        id: isEditMode ? "save-lifecycle-btn" : "create-lifecycle-btn",
+                        id: isEditMode ? 'save-lifecycle-btn' : 'create-lifecycle-btn',
                         type: "submit",
                         variant: "primary",
-                        label: isEditMode ? "Save" : "Create",
+                        label: isEditMode ? 'Save' : 'Create',
                         icon: isEditMode ? /*#__PURE__*/ jsx(Icon, {
                             name: "Save"
                         }) : void 0,
@@ -547,7 +548,7 @@ function BucketLifecycleFormPage() {
             children: [
                 /*#__PURE__*/ jsxs(FormSection, {
                     title: {
-                        name: "Rule Scope"
+                        name: 'Rule Scope'
                     },
                     forceLabelWidth: convertRemToPixels(15),
                     children: [
@@ -559,10 +560,10 @@ function BucketLifecycleFormPage() {
                             helpErrorPosition: "bottom",
                             required: true,
                             content: isEditMode ? /*#__PURE__*/ jsx(Text, {
-                                children: watch("ruleId")
+                                children: watch('ruleId')
                             }) : /*#__PURE__*/ jsx(Input, {
                                 id: "ruleId",
-                                ...register("ruleId")
+                                ...register('ruleId')
                             })
                         }),
                         /*#__PURE__*/ jsx(FormGroup, {
@@ -590,8 +591,8 @@ function BucketLifecycleFormPage() {
                 }),
                 /*#__PURE__*/ jsx(FilterFormSection, {
                     filterType: filterType,
-                    onFilterTypeChange: (value)=>methods.setValue("filterType", value),
-                    prefixRegister: register("prefix"),
+                    onFilterTypeChange: (value)=>methods.setValue('filterType', value),
+                    prefixRegister: register('prefix'),
                     tagFields: tagFields,
                     tagKeyRegister: (index)=>register(`tags.${index}.key`),
                     tagValueRegister: (index)=>register(`tags.${index}.value`),
@@ -603,7 +604,7 @@ function BucketLifecycleFormPage() {
                 }),
                 /*#__PURE__*/ jsxs(FormSection, {
                     title: {
-                        name: transitionsEnabled || expirationEnabled || noncurrentTransitionsEnabled || noncurrentExpirationEnabled || abortMpuEnabled ? "Lifecycle Rule" : "Lifecycle Rule (At least one action must be enabled)"
+                        name: transitionsEnabled || expirationEnabled || noncurrentTransitionsEnabled || noncurrentExpirationEnabled || abortMpuEnabled ? 'Lifecycle Rule' : 'Lifecycle Rule (At least one action must be enabled)'
                     },
                     forceLabelWidth: convertRemToPixels(18),
                     children: [
@@ -618,7 +619,7 @@ function BucketLifecycleFormPage() {
                                 render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
                                         toggle: field.value,
                                         onChange: field.onChange,
-                                        label: field.value ? "Enabled" : "Disabled"
+                                        label: field.value ? 'Enabled' : 'Disabled'
                                     })
                             })
                         }),
@@ -644,14 +645,14 @@ function BucketLifecycleFormPage() {
                                                 })
                                             }),
                                             /*#__PURE__*/ jsx(Box, {
-                                                flex: "1/3",
+                                                flex: "1/2",
                                                 children: /*#__PURE__*/ jsx(Text, {
                                                     color: "textSecondary",
                                                     children: "Value"
                                                 })
                                             }),
                                             /*#__PURE__*/ jsx(Box, {
-                                                width: convertRemToPixels(0.1)
+                                                width: convertRemToPixels(4)
                                             }),
                                             /*#__PURE__*/ jsx(Box, {
                                                 flex: "1",
@@ -694,18 +695,18 @@ function BucketLifecycleFormPage() {
                                                         }),
                                                         /*#__PURE__*/ jsx(Box, {
                                                             flex: "1",
-                                                            children: "days" === watch(`transitions.${index}.timeType`) ? /*#__PURE__*/ jsx(Input, {
+                                                            children: 'days' === watch(`transitions.${index}.timeType`) ? /*#__PURE__*/ jsx(Input, {
                                                                 id: `transition-days-${index}`,
                                                                 type: "number",
                                                                 placeholder: "Days",
-                                                                size: "1/3",
+                                                                size: "1/2",
                                                                 ...register(`transitions.${index}.days`, {
                                                                     valueAsNumber: true
                                                                 })
                                                             }) : /*#__PURE__*/ jsx(Input, {
                                                                 id: `transition-date-${index}`,
                                                                 type: "date",
-                                                                size: "1/3",
+                                                                size: "1/2",
                                                                 ...register(`transitions.${index}.date`)
                                                             })
                                                         }),
@@ -731,33 +732,30 @@ function BucketLifecycleFormPage() {
                                                             showAdd: index === transitionFields.length - 1,
                                                             onRemove: ()=>removeTransition(index),
                                                             onAdd: ()=>appendTransition({
-                                                                    timeType: "days",
+                                                                    timeType: 'days',
                                                                     days: 30,
-                                                                    date: "",
-                                                                    storageClass: "STANDARD_IA"
+                                                                    date: '',
+                                                                    storageClass: 'STANDARD_IA'
                                                                 }),
                                                             canRemove: transitionFields.length > 1
-                                                        }),
-                                                        index < transitionFields.length - 1 && /*#__PURE__*/ jsx(Box, {
-                                                            width: convertRemToPixels(1.9)
                                                         })
                                                     ]
                                                 }),
-                                                getArrayFieldError(errors, "transitions", index) && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'transitions', index) && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "transitions", index)
+                                                    children: getArrayFieldError(errors, 'transitions', index)
                                                 }),
-                                                getArrayFieldError(errors, "transitions", index, "days") && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'transitions', index, 'days') && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "transitions", index, "days")
+                                                    children: getArrayFieldError(errors, 'transitions', index, 'days')
                                                 }),
-                                                getArrayFieldError(errors, "transitions", index, "storageClass") && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'transitions', index, 'storageClass') && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "transitions", index, "storageClass")
+                                                    children: getArrayFieldError(errors, 'transitions', index, 'storageClass')
                                                 }),
-                                                getArrayFieldError(errors, "transitions", index, "date") && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'transitions', index, 'date') && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "transitions", index, "date")
+                                                    children: getArrayFieldError(errors, 'transitions', index, 'date')
                                                 })
                                             ]
                                         }, field.id))
@@ -768,13 +766,20 @@ function BucketLifecycleFormPage() {
                             label: "Expiration current version",
                             id: "expirationEnabled",
                             direction: "horizontal",
+                            labelHelpTooltip: "Expire objects after a specified time. Cannot be combined with expired delete markers removal.",
                             content: /*#__PURE__*/ jsx(Controller, {
                                 name: "expirationEnabled",
                                 control: control,
                                 render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
                                         toggle: field.value,
-                                        onChange: field.onChange,
-                                        label: field.value ? "Enabled" : "Disabled"
+                                        onChange: (value)=>{
+                                            field.onChange(value);
+                                            if (value && expiredObjectDeleteMarker) methods.setValue('expiredObjectDeleteMarker', false, {
+                                                shouldDirty: true
+                                            });
+                                        },
+                                        label: field.value ? 'Enabled' : 'Disabled',
+                                        disabled: expiredObjectDeleteMarker
                                     })
                             })
                         }),
@@ -799,16 +804,12 @@ function BucketLifecycleFormPage() {
                                                     /*#__PURE__*/ jsx(Select.Option, {
                                                         value: "date",
                                                         children: "Date"
-                                                    }),
-                                                    /*#__PURE__*/ jsx(Select.Option, {
-                                                        value: "deleteMarker",
-                                                        children: "Expired delete markers"
                                                     })
                                                 ]
                                             })
                                     })
                                 }),
-                                "days" === expirationType && /*#__PURE__*/ jsx(FormGroup, {
+                                'days' === expirationType && /*#__PURE__*/ jsx(FormGroup, {
                                     label: "Days",
                                     id: "expirationDays",
                                     direction: "horizontal",
@@ -819,29 +820,47 @@ function BucketLifecycleFormPage() {
                                         children: /*#__PURE__*/ jsx(Input, {
                                             type: "number",
                                             id: "expirationDays",
-                                            ...register("expirationDays", {
+                                            ...register('expirationDays', {
                                                 valueAsNumber: true
                                             })
                                         })
                                     })
                                 }),
-                                "date" === expirationType && /*#__PURE__*/ jsx(FormGroup, {
+                                'date' === expirationType && /*#__PURE__*/ jsx(FormGroup, {
                                     label: "Date",
                                     id: "expirationDate",
                                     direction: "horizontal",
                                     error: errors?.expirationDate?.message,
                                     helpErrorPosition: "bottom",
-                                    content: /*#__PURE__*/ jsx(Box, {
-                                        width: "200px",
-                                        children: /*#__PURE__*/ jsx(Input, {
-                                            type: "date",
-                                            id: "expirationDate",
-                                            ...register("expirationDate")
-                                        })
+                                    content: /*#__PURE__*/ jsx(Input, {
+                                        type: "date",
+                                        id: "expirationDate",
+                                        ...register('expirationDate')
                                     })
                                 })
                             ]
                         }) : /*#__PURE__*/ jsx(Fragment, {}),
+                        /*#__PURE__*/ jsx(FormGroup, {
+                            label: "Remove expired delete markers",
+                            id: "expiredObjectDeleteMarker",
+                            direction: "horizontal",
+                            labelHelpTooltip: "Automatically remove expired object delete markers in versioned buckets. Cannot be combined with Days/Date expiration.",
+                            content: /*#__PURE__*/ jsx(Controller, {
+                                name: "expiredObjectDeleteMarker",
+                                control: control,
+                                render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
+                                        toggle: field.value,
+                                        onChange: (value)=>{
+                                            field.onChange(value);
+                                            if (value && expirationEnabled) methods.setValue('expirationEnabled', false, {
+                                                shouldDirty: true
+                                            });
+                                        },
+                                        label: field.value ? 'Enabled' : 'Disabled',
+                                        disabled: expirationEnabled
+                                    })
+                            })
+                        }),
                         /*#__PURE__*/ jsx(FormGroup, {
                             label: "Transition noncurrent version",
                             id: "noncurrentTransitionsEnabled",
@@ -852,7 +871,7 @@ function BucketLifecycleFormPage() {
                                 render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
                                         toggle: field.value,
                                         onChange: field.onChange,
-                                        label: field.value ? "Enabled" : "Disabled"
+                                        label: field.value ? 'Enabled' : 'Disabled'
                                     })
                             })
                         }),
@@ -954,23 +973,20 @@ function BucketLifecycleFormPage() {
                                                             onRemove: ()=>removeNoncurrentTransition(index),
                                                             onAdd: ()=>appendNoncurrentTransition({
                                                                     noncurrentDays: 30,
-                                                                    storageClass: "GLACIER",
+                                                                    storageClass: 'GLACIER',
                                                                     newerNoncurrentVersions: 0
                                                                 }),
                                                             canRemove: noncurrentTransitionFields.length > 1
-                                                        }),
-                                                        index < noncurrentTransitionFields.length - 1 && /*#__PURE__*/ jsx(Box, {
-                                                            width: convertRemToPixels(1.9)
                                                         })
                                                     ]
                                                 }),
-                                                getArrayFieldError(errors, "noncurrentTransitions", index, "noncurrentDays") && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'noncurrentTransitions', index, 'noncurrentDays') && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "noncurrentTransitions", index, "noncurrentDays")
+                                                    children: getArrayFieldError(errors, 'noncurrentTransitions', index, 'noncurrentDays')
                                                 }),
-                                                getArrayFieldError(errors, "noncurrentTransitions", index, "storageClass") && /*#__PURE__*/ jsx(Text, {
+                                                getArrayFieldError(errors, 'noncurrentTransitions', index, 'storageClass') && /*#__PURE__*/ jsx(Text, {
                                                     color: "statusCritical",
-                                                    children: getArrayFieldError(errors, "noncurrentTransitions", index, "storageClass")
+                                                    children: getArrayFieldError(errors, 'noncurrentTransitions', index, 'storageClass')
                                                 })
                                             ]
                                         }, field.id))
@@ -987,7 +1003,7 @@ function BucketLifecycleFormPage() {
                                 render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
                                         toggle: field.value,
                                         onChange: field.onChange,
-                                        label: field.value ? "Enabled" : "Disabled"
+                                        label: field.value ? 'Enabled' : 'Disabled'
                                     })
                             })
                         }),
@@ -1004,7 +1020,7 @@ function BucketLifecycleFormPage() {
                                         children: /*#__PURE__*/ jsx(Input, {
                                             type: "number",
                                             id: "noncurrentExpirationDays",
-                                            ...register("noncurrentExpirationDays", {
+                                            ...register('noncurrentExpirationDays', {
                                                 valueAsNumber: true
                                             })
                                         })
@@ -1020,7 +1036,7 @@ function BucketLifecycleFormPage() {
                                             type: "number",
                                             id: "noncurrentNewerVersions",
                                             placeholder: "0",
-                                            ...register("noncurrentNewerVersions", {
+                                            ...register('noncurrentNewerVersions', {
                                                 valueAsNumber: true
                                             })
                                         })
@@ -1032,7 +1048,7 @@ function BucketLifecycleFormPage() {
                             label: "Expire incomplete multipart upload",
                             id: "abortMpuEnabled",
                             direction: "horizontal",
-                            error: ("tags" === filterType || "and" === filterType) && abortMpuEnabled ? "Tag-based filter cannot be used with Abort Incomplete Multipart Upload" : void 0,
+                            error: ('tags' === filterType || 'and' === filterType) && abortMpuEnabled ? 'Tag-based filter cannot be used with Abort Incomplete Multipart Upload' : void 0,
                             helpErrorPosition: "bottom",
                             content: /*#__PURE__*/ jsx(Controller, {
                                 name: "abortMpuEnabled",
@@ -1040,7 +1056,7 @@ function BucketLifecycleFormPage() {
                                 render: ({ field })=>/*#__PURE__*/ jsx(Toggle, {
                                         toggle: field.value,
                                         onChange: field.onChange,
-                                        label: field.value ? "Enabled" : "Disabled"
+                                        label: field.value ? 'Enabled' : 'Disabled'
                                     })
                             })
                         }),
@@ -1055,7 +1071,7 @@ function BucketLifecycleFormPage() {
                                 children: /*#__PURE__*/ jsx(Input, {
                                     type: "number",
                                     id: "abortMpuDays",
-                                    ...register("abortMpuDays", {
+                                    ...register('abortMpuDays', {
                                         valueAsNumber: true
                                     })
                                 })