@webiny/app-audit-logs 6.6.0-alpha.0 → 6.6.0-alpha.2

package/views/Logs/Filters/FilterByCreatedOn.js

@@ -1,37 +1,36 @@
 import react from "react";
-import { format } from "date-fns";
-import { Input } from "@webiny/admin-ui";
+import { DatePicker } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
-import { TimestampFiltersContainer } from "./styled.js";
-const formatDateTime = (date)=>{
-    if (!date) return "";
-    return format(new Date(date), "yyyy-MM-dd'T'HH:mm");
-};
-const getValidFilterValue = (value)=>{
-    if ("" === value) return;
-    return new Date(value);
-};
+const now = new Date();
 const FilterByCreatedOn = ()=>{
     const bindFrom = useBind({
-        name: "createdOn_gte",
-        beforeChange (value, cb) {
-            cb(getValidFilterValue(value));
-        }
+        name: "createdOn_gte"
     });
     const bindTo = useBind({
-        name: "createdOn_lte",
-        beforeChange (value, cb) {
-            cb(getValidFilterValue(value));
-        }
+        name: "createdOn_lte"
     });
-    return /*#__PURE__*/ react.createElement(TimestampFiltersContainer, null, /*#__PURE__*/ react.createElement(Input, {
-        ...bindFrom,
-        value: formatDateTime(bindFrom.value),
-        type: "datetime-local"
-    }), /*#__PURE__*/ react.createElement(Input, {
-        ...bindTo,
-        value: formatDateTime(bindTo.value),
-        type: "datetime-local"
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, /*#__PURE__*/ react.createElement(DatePicker, {
+        label: "Created from",
+        type: "dateTimeLocal",
+        value: bindFrom.value ?? void 0,
+        onChange: (value)=>{
+            bindFrom.onChange(value ?? void 0);
+        },
+        placeholder: "Select date",
+        size: "md",
+        maxDate: now
+    }), /*#__PURE__*/ react.createElement(DatePicker, {
+        label: "Created to",
+        type: "dateTimeLocal",
+        value: bindTo.value ?? void 0,
+        onChange: (value)=>{
+            bindTo.onChange(value ?? void 0);
+        },
+        placeholder: "Select date",
+        size: "md",
+        maxDate: now
     }));
 };
 export { FilterByCreatedOn };

package/views/Logs/Filters/FilterByCreatedOn.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Filters/FilterByCreatedOn.js","sources":["../../../../src/views/Logs/Filters/FilterByCreatedOn.tsx"],"sourcesContent":["import React from \"react\";\nimport { format } from \"date-fns\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { TimestampFiltersContainer } from \"./styled.js\";\n\nconst formatDateTime = (date: string) => {\n    if (!date) {\n        return \"\";\n    }\n\n    return format(new Date(date), \"yyyy-MM-dd'T'HH:mm\");\n};\n\nconst getValidFilterValue = (value: string): Date | undefined => {\n    if (value === \"\") {\n        return undefined;\n    }\n\n    return new Date(value);\n};\n\nexport const FilterByCreatedOn = () => {\n    const bindFrom = useBind({\n        name: \"createdOn_gte\",\n        beforeChange(value, cb) {\n            cb(getValidFilterValue(value));\n        }\n    });\n\n    const bindTo = useBind({\n        name: \"createdOn_lte\",\n        beforeChange(value, cb) {\n            cb(getValidFilterValue(value));\n        }\n    });\n\n    return (\n        <TimestampFiltersContainer>\n            <Input {...bindFrom} value={formatDateTime(bindFrom.value)} type=\"datetime-local\" />\n            <Input {...bindTo} value={formatDateTime(bindTo.value)} type=\"datetime-local\" />\n        </TimestampFiltersContainer>\n    );\n};\n"],"names":["formatDateTime","date","format","Date","getValidFilterValue","value","FilterByCreatedOn","bindFrom","useBind","cb","bindTo","TimestampFiltersContainer","Input"],"mappings":";;;;;AAMA,MAAMA,iBAAiB,CAACC;IACpB,IAAI,CAACA,MACD,OAAO;IAGX,OAAOC,OAAO,IAAIC,KAAKF,OAAO;AAClC;AAEA,MAAMG,sBAAsB,CAACC;IACzB,IAAIA,AAAU,OAAVA,OACA;IAGJ,OAAO,IAAIF,KAAKE;AACpB;AAEO,MAAMC,oBAAoB;IAC7B,MAAMC,WAAWC,QAAQ;QACrB,MAAM;QACN,cAAaH,KAAK,EAAEI,EAAE;YAClBA,GAAGL,oBAAoBC;QAC3B;IACJ;IAEA,MAAMK,SAASF,QAAQ;QACnB,MAAM;QACN,cAAaH,KAAK,EAAEI,EAAE;YAClBA,GAAGL,oBAAoBC;QAC3B;IACJ;IAEA,OAAO,WAAP,GACI,oBAACM,2BAAyBA,MAAAA,WAAAA,GACtB,oBAACC,OAAKA;QAAE,GAAGL,QAAQ;QAAE,OAAOP,eAAeO,SAAS,KAAK;QAAG,MAAK;sBACjE,oBAACK,OAAKA;QAAE,GAAGF,MAAM;QAAE,OAAOV,eAAeU,OAAO,KAAK;QAAG,MAAK;;AAGzE"}
+{"version":3,"file":"views/Logs/Filters/FilterByCreatedOn.js","sources":["../../../../src/views/Logs/Filters/FilterByCreatedOn.tsx"],"sourcesContent":["import React from \"react\";\nimport { DatePicker } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\n\nconst now = new Date();\n\nexport const FilterByCreatedOn = () => {\n    const bindFrom = useBind({\n        name: \"createdOn_gte\"\n    });\n\n    const bindTo = useBind({\n        name: \"createdOn_lte\"\n    });\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            <DatePicker\n                label={\"Created from\"}\n                type=\"dateTimeLocal\"\n                value={bindFrom.value ?? undefined}\n                onChange={value => {\n                    bindFrom.onChange(value ?? undefined);\n                }}\n                placeholder=\"Select date\"\n                size=\"md\"\n                maxDate={now}\n            />\n            <DatePicker\n                label={\"Created to\"}\n                type=\"dateTimeLocal\"\n                value={bindTo.value ?? undefined}\n                onChange={value => {\n                    bindTo.onChange(value ?? undefined);\n                }}\n                placeholder=\"Select date\"\n                size=\"md\"\n                maxDate={now}\n            />\n        </div>\n    );\n};\n"],"names":["now","Date","FilterByCreatedOn","bindFrom","useBind","bindTo","DatePicker","undefined","value"],"mappings":";;;AAIA,MAAMA,MAAM,IAAIC;AAET,MAAMC,oBAAoB;IAC7B,MAAMC,WAAWC,QAAQ;QACrB,MAAM;IACV;IAEA,MAAMC,SAASD,QAAQ;QACnB,MAAM;IACV;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,YAAUA;QACP,OAAO;QACP,MAAK;QACL,OAAOH,SAAS,KAAK,IAAII;QACzB,UAAUC,CAAAA;YACNL,SAAS,QAAQ,CAACK,SAASD;QAC/B;QACA,aAAY;QACZ,MAAK;QACL,SAASP;sBAEb,oBAACM,YAAUA;QACP,OAAO;QACP,MAAK;QACL,OAAOD,OAAO,KAAK,IAAIE;QACvB,UAAUC,CAAAA;YACNH,OAAO,QAAQ,CAACG,SAASD;QAC7B;QACA,aAAY;QACZ,MAAK;QACL,SAASP;;AAIzB"}

package/views/Logs/Filters/FilterByEntity.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const FilterByEntity: () => React.JSX.Element | null;
+export declare const FilterByEntity: () => React.JSX.Element;

package/views/Logs/Filters/FilterByEntity.js

@@ -31,12 +31,14 @@ const FilterByEntity = ()=>{
     }, [
         data.app
     ]);
-    if (0 === options.length) return null;
+    const disabled = 0 === options.length;
     return /*#__PURE__*/ react.createElement(Select, {
         ...bind,
+        label: "Entity",
         size: "md",
-        placeholder: "Filter by Entity",
-        options: options
+        placeholder: "All entities",
+        options: disabled ? [] : options,
+        disabled: disabled
     });
 };
 export { FilterByEntity };

package/views/Logs/Filters/FilterByEntity.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Filters/FilterByEntity.js","sources":["../../../../src/views/Logs/Filters/FilterByEntity.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useBind, useForm } from \"@webiny/form\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { apps as auditLogsApps } from \"@webiny/common-audit-logs\";\nimport type { IFilterFormData } from \"./types.js\";\n\nconst getValidFilterValue = (value: string): string | undefined => {\n    if (value === \"all\" || value === \"\") {\n        return undefined;\n    }\n    return value;\n};\n\nexport const FilterByEntity = () => {\n    const { data, setValue } = useForm<IFilterFormData>();\n    const bind = useBind({\n        name: \"entity\",\n        beforeChange(value, cb) {\n            setValue(\"action\", undefined);\n            cb(getValidFilterValue(value));\n        }\n    });\n\n    const options = useMemo(() => {\n        if (!data.app) {\n            return [];\n        }\n\n        const entities = auditLogsApps.find(app => app.app === data.app)?.entities || [];\n\n        return [\n            { label: \"All\", value: \"all\" },\n            ...entities.map(entity => ({ label: entity.displayName, value: entity.type }))\n        ];\n    }, [data.app]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return <Select {...bind} size={\"md\"} placeholder={\"Filter by Entity\"} options={options} />;\n};\n"],"names":["getValidFilterValue","value","FilterByEntity","data","setValue","useForm","bind","useBind","cb","undefined","options","useMemo","entities","auditLogsApps","app","entity","Select"],"mappings":";;;;AAMA,MAAMA,sBAAsB,CAACC;IACzB,IAAIA,AAAU,UAAVA,SAAmBA,AAAU,OAAVA,OACnB;IAEJ,OAAOA;AACX;AAEO,MAAMC,iBAAiB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC;IAC3B,MAAMC,OAAOC,QAAQ;QACjB,MAAM;QACN,cAAaN,KAAK,EAAEO,EAAE;YAClBJ,SAAS,UAAUK;YACnBD,GAAGR,oBAAoBC;QAC3B;IACJ;IAEA,MAAMS,UAAUC,QAAQ;QACpB,IAAI,CAACR,KAAK,GAAG,EACT,OAAO,EAAE;QAGb,MAAMS,WAAWC,KAAc,IAAI,CAACC,CAAAA,MAAOA,IAAI,GAAG,KAAKX,KAAK,GAAG,GAAG,YAAY,EAAE;QAEhF,OAAO;YACH;gBAAE,OAAO;gBAAO,OAAO;YAAM;eAC1BS,SAAS,GAAG,CAACG,CAAAA,SAAW;oBAAE,OAAOA,OAAO,WAAW;oBAAE,OAAOA,OAAO,IAAI;gBAAC;SAC9E;IACL,GAAG;QAACZ,KAAK,GAAG;KAAC;IAEb,IAAIO,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACM,QAAMA;QAAE,GAAGV,IAAI;QAAE,MAAM;QAAM,aAAa;QAAoB,SAASI;;AACnF"}
+{"version":3,"file":"views/Logs/Filters/FilterByEntity.js","sources":["../../../../src/views/Logs/Filters/FilterByEntity.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useBind, useForm } from \"@webiny/form\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { apps as auditLogsApps } from \"@webiny/common-audit-logs\";\nimport type { IFilterFormData } from \"./types.js\";\n\nconst getValidFilterValue = (value: string): string | undefined => {\n    if (value === \"all\" || value === \"\") {\n        return undefined;\n    }\n    return value;\n};\n\nexport const FilterByEntity = () => {\n    const { data, setValue } = useForm<IFilterFormData>();\n    const bind = useBind({\n        name: \"entity\",\n        beforeChange(value, cb) {\n            setValue(\"action\", undefined);\n            cb(getValidFilterValue(value));\n        }\n    });\n\n    const options = useMemo(() => {\n        if (!data.app) {\n            return [];\n        }\n\n        const entities = auditLogsApps.find(app => app.app === data.app)?.entities || [];\n\n        return [\n            { label: \"All\", value: \"all\" },\n            ...entities.map(entity => ({ label: entity.displayName, value: entity.type }))\n        ];\n    }, [data.app]);\n\n    const disabled = options.length === 0;\n\n    return (\n        <Select\n            {...bind}\n            label={\"Entity\"}\n            size={\"md\"}\n            placeholder={\"All entities\"}\n            options={disabled ? [] : options}\n            disabled={disabled}\n        />\n    );\n};\n"],"names":["getValidFilterValue","value","FilterByEntity","data","setValue","useForm","bind","useBind","cb","undefined","options","useMemo","entities","auditLogsApps","app","entity","disabled","Select"],"mappings":";;;;AAMA,MAAMA,sBAAsB,CAACC;IACzB,IAAIA,AAAU,UAAVA,SAAmBA,AAAU,OAAVA,OACnB;IAEJ,OAAOA;AACX;AAEO,MAAMC,iBAAiB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC;IAC3B,MAAMC,OAAOC,QAAQ;QACjB,MAAM;QACN,cAAaN,KAAK,EAAEO,EAAE;YAClBJ,SAAS,UAAUK;YACnBD,GAAGR,oBAAoBC;QAC3B;IACJ;IAEA,MAAMS,UAAUC,QAAQ;QACpB,IAAI,CAACR,KAAK,GAAG,EACT,OAAO,EAAE;QAGb,MAAMS,WAAWC,KAAc,IAAI,CAACC,CAAAA,MAAOA,IAAI,GAAG,KAAKX,KAAK,GAAG,GAAG,YAAY,EAAE;QAEhF,OAAO;YACH;gBAAE,OAAO;gBAAO,OAAO;YAAM;eAC1BS,SAAS,GAAG,CAACG,CAAAA,SAAW;oBAAE,OAAOA,OAAO,WAAW;oBAAE,OAAOA,OAAO,IAAI;gBAAC;SAC9E;IACL,GAAG;QAACZ,KAAK,GAAG;KAAC;IAEb,MAAMa,WAAWN,AAAmB,MAAnBA,QAAQ,MAAM;IAE/B,OAAO,WAAP,GACI,oBAACO,QAAMA;QACF,GAAGX,IAAI;QACR,OAAO;QACP,MAAM;QACN,aAAa;QACb,SAASU,WAAW,EAAE,GAAGN;QACzB,UAAUM;;AAGtB"}

package/views/Logs/Filters/FilterByEntityId.js

@@ -16,8 +16,9 @@ const FilterByEntityId = ()=>{
     });
     return /*#__PURE__*/ react.createElement(Input, {
         ...bind,
+        label: "Entity ID",
         size: "md",
-        placeholder: "Filter by EntityId"
+        placeholder: "Enter entity ID"
     });
 };
 export { FilterByEntityId };

package/views/Logs/Filters/FilterByEntityId.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Filters/FilterByEntityId.js","sources":["../../../../src/views/Logs/Filters/FilterByEntityId.tsx"],"sourcesContent":["import React from \"react\";\nimport { useBind, useForm } from \"@webiny/form\";\nimport { Input } from \"@webiny/admin-ui\";\nimport type { IFilterFormData } from \"~/views/Logs/Filters/types.js\";\n\nexport const FilterByEntityId = () => {\n    const { setValue } = useForm<IFilterFormData>();\n    const bind = useBind({\n        name: \"entityId\",\n        beforeChange(value, cb) {\n            if (!value) {\n                cb(undefined);\n                return;\n            }\n            setValue(\"app\", undefined);\n            setValue(\"entity\", undefined);\n            setValue(\"action\", undefined);\n            setValue(\"createdBy\", undefined);\n            cb(value);\n        }\n    });\n\n    return <Input {...bind} size={\"md\"} placeholder={\"Filter by EntityId\"} />;\n};\n"],"names":["FilterByEntityId","setValue","useForm","bind","useBind","value","cb","undefined","Input"],"mappings":";;;AAKO,MAAMA,mBAAmB;IAC5B,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAMC,OAAOC,QAAQ;QACjB,MAAM;QACN,cAAaC,KAAK,EAAEC,EAAE;YAClB,IAAI,CAACD,OAAO,YACRC,GAAGC;YAGPN,SAAS,OAAOM;YAChBN,SAAS,UAAUM;YACnBN,SAAS,UAAUM;YACnBN,SAAS,aAAaM;YACtBD,GAAGD;QACP;IACJ;IAEA,OAAO,WAAP,GAAO,oBAACG,OAAKA;QAAE,GAAGL,IAAI;QAAE,MAAM;QAAM,aAAa;;AACrD"}
+{"version":3,"file":"views/Logs/Filters/FilterByEntityId.js","sources":["../../../../src/views/Logs/Filters/FilterByEntityId.tsx"],"sourcesContent":["import React from \"react\";\nimport { useBind, useForm } from \"@webiny/form\";\nimport { Input } from \"@webiny/admin-ui\";\nimport type { IFilterFormData } from \"~/views/Logs/Filters/types.js\";\n\nexport const FilterByEntityId = () => {\n    const { setValue } = useForm<IFilterFormData>();\n    const bind = useBind({\n        name: \"entityId\",\n        beforeChange(value, cb) {\n            if (!value) {\n                cb(undefined);\n                return;\n            }\n            setValue(\"app\", undefined);\n            setValue(\"entity\", undefined);\n            setValue(\"action\", undefined);\n            setValue(\"createdBy\", undefined);\n            cb(value);\n        }\n    });\n\n    return <Input {...bind} label={\"Entity ID\"} size={\"md\"} placeholder={\"Enter entity ID\"} />;\n};\n"],"names":["FilterByEntityId","setValue","useForm","bind","useBind","value","cb","undefined","Input"],"mappings":";;;AAKO,MAAMA,mBAAmB;IAC5B,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAMC,OAAOC,QAAQ;QACjB,MAAM;QACN,cAAaC,KAAK,EAAEC,EAAE;YAClB,IAAI,CAACD,OAAO,YACRC,GAAGC;YAGPN,SAAS,OAAOM;YAChBN,SAAS,UAAUM;YACnBN,SAAS,UAAUM;YACnBN,SAAS,aAAaM;YACtBD,GAAGD;QACP;IACJ;IAEA,OAAO,WAAP,GAAO,oBAACG,OAAKA;QAAE,GAAGL,IAAI;QAAE,OAAO;QAAa,MAAM;QAAM,aAAa;;AACzE"}

package/views/Logs/Filters/Filters.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
 import type { IListAuditLogsVariablesWhere } from "../../../hooks/graphql.js";
 interface FiltersProps {
-    showingFilters: boolean;
     setWhere: (where: Partial<IListAuditLogsVariablesWhere>) => void;
 }
-export declare const Filters: ({ showingFilters, setWhere }: FiltersProps) => React.JSX.Element;
+export declare const Filters: ({ setWhere }: FiltersProps) => React.JSX.Element;
 export {};

package/views/Logs/Filters/Filters.js

@@ -1,21 +1,69 @@
-import react, { useCallback } from "react";
-import { Filters } from "@webiny/app-admin";
+import react, { useCallback, useState } from "react";
+import { ReactComponent } from "@webiny/icons/filter_list.svg";
+import { Drawer, IconButton } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
 import { useAuditLogsListConfig } from "../../../config/list/index.js";
-const Filters_Filters = ({ showingFilters, setWhere })=>{
+const Filters = ({ setWhere })=>{
     const { browser } = useAuditLogsListConfig();
-    const applyFilters = useCallback((data)=>{
-        if (!Object.keys(data).length) return;
-        const convertedFilters = browser.filtersToWhere.reduce((data, converter)=>converter(data), data);
+    const [open, setOpen] = useState(false);
+    const [formData, setFormData] = useState({});
+    const [hasActiveFilters, setHasActiveFilters] = useState(false);
+    const onFormChange = useCallback((data)=>{
+        setFormData(data);
+    }, []);
+    const applyFilters = useCallback(()=>{
+        const hasValues = Object.values(formData).some((v)=>void 0 !== v && "" !== v);
+        setHasActiveFilters(hasValues);
+        if (!hasValues) {
+            setWhere({});
+            setOpen(false);
+            return;
+        }
+        const convertedFilters = browser.filtersToWhere.reduce((acc, converter)=>converter(acc), formData);
         setWhere(convertedFilters);
+        setOpen(false);
     }, [
-        browser.filtersToWhere
+        browser.filtersToWhere,
+        setWhere,
+        formData
     ]);
-    return /*#__PURE__*/ react.createElement(Filters, {
-        filters: browser.filters,
-        show: showingFilters,
-        onChange: applyFilters
-    });
+    const clearFilters = useCallback(()=>{
+        setFormData({});
+        setWhere({});
+        setHasActiveFilters(false);
+    }, [
+        setWhere
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: hasActiveFilters ? "primary" : "ghost",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>setOpen(true),
+        "data-testid": "audit-logs.toggle-filters"
+    }), /*#__PURE__*/ react.createElement(Drawer, {
+        open: open,
+        onClose: ()=>setOpen(false),
+        modal: true,
+        width: 360,
+        title: "Filters",
+        headerSeparator: true,
+        footerSeparator: true,
+        bodyPadding: false,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, {
+            text: "Clear all",
+            onClick: clearFilters
+        }), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, {
+            text: "Apply filters",
+            onClick: applyFilters
+        }))
+    }, /*#__PURE__*/ react.createElement(Form, {
+        data: formData,
+        onChange: onFormChange
+    }, ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-lg p-lg"
+        }, browser.filters.map((filter)=>/*#__PURE__*/ react.createElement("div", {
+                key: filter.name
+            }, filter.element))))));
 };
-export { Filters_Filters as Filters };
+export { Filters };
 
 //# sourceMappingURL=Filters.js.map

package/views/Logs/Filters/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Filters/Filters.js","sources":["../../../../src/views/Logs/Filters/Filters.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FiltersOnSubmit } from \"@webiny/app-admin\";\nimport { Filters as BaseFilters } from \"@webiny/app-admin\";\nimport { useAuditLogsListConfig } from \"~/config/list/index.js\";\nimport type { IListAuditLogsVariablesWhere } from \"~/hooks/graphql.js\";\n\ninterface FiltersProps {\n    showingFilters: boolean;\n    setWhere: (where: Partial<IListAuditLogsVariablesWhere>) => void;\n}\n\nexport const Filters = ({ showingFilters, setWhere }: FiltersProps) => {\n    const { browser } = useAuditLogsListConfig();\n\n    const applyFilters: FiltersOnSubmit = useCallback(\n        data => {\n            if (!Object.keys(data).length) {\n                return;\n            }\n\n            const convertedFilters = browser.filtersToWhere.reduce(\n                (data, converter) => converter(data),\n                data\n            );\n\n            setWhere(convertedFilters);\n        },\n        [browser.filtersToWhere]\n    );\n\n    return <BaseFilters filters={browser.filters} show={showingFilters} onChange={applyFilters} />;\n};\n"],"names":["Filters","showingFilters","setWhere","browser","useAuditLogsListConfig","applyFilters","useCallback","data","Object","convertedFilters","converter","BaseFilters"],"mappings":";;;AAWO,MAAMA,kBAAU,CAAC,EAAEC,cAAc,EAAEC,QAAQ,EAAgB;IAC9D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,MAAMC,eAAgCC,YAClCC,CAAAA;QACI,IAAI,CAACC,OAAO,IAAI,CAACD,MAAM,MAAM,EACzB;QAGJ,MAAME,mBAAmBN,QAAQ,cAAc,CAAC,MAAM,CAClD,CAACI,MAAMG,YAAcA,UAAUH,OAC/BA;QAGJL,SAASO;IACb,GACA;QAACN,QAAQ,cAAc;KAAC;IAG5B,OAAO,WAAP,GAAO,oBAACQ,SAAWA;QAAC,SAASR,QAAQ,OAAO;QAAE,MAAMF;QAAgB,UAAUI;;AAClF"}
+{"version":3,"file":"views/Logs/Filters/Filters.js","sources":["../../../../src/views/Logs/Filters/Filters.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { Drawer, IconButton } from \"@webiny/admin-ui\";\nimport { Form } from \"@webiny/form\";\nimport { useAuditLogsListConfig } from \"~/config/list/index.js\";\nimport type { IListAuditLogsVariablesWhere } from \"~/hooks/graphql.js\";\n\ninterface FiltersProps {\n    setWhere: (where: Partial<IListAuditLogsVariablesWhere>) => void;\n}\n\nexport const Filters = ({ setWhere }: FiltersProps) => {\n    const { browser } = useAuditLogsListConfig();\n    const [open, setOpen] = useState(false);\n    const [formData, setFormData] = useState<Record<string, unknown>>({});\n    const [hasActiveFilters, setHasActiveFilters] = useState(false);\n\n    const onFormChange = useCallback((data: Record<string, unknown>) => {\n        setFormData(data);\n    }, []);\n\n    const applyFilters = useCallback(() => {\n        const hasValues = Object.values(formData).some(v => v !== undefined && v !== \"\");\n        setHasActiveFilters(hasValues);\n\n        if (!hasValues) {\n            setWhere({});\n            setOpen(false);\n            return;\n        }\n\n        const convertedFilters = browser.filtersToWhere.reduce(\n            (acc, converter) => converter(acc),\n            formData\n        );\n\n        setWhere(convertedFilters as Partial<IListAuditLogsVariablesWhere>);\n        setOpen(false);\n    }, [browser.filtersToWhere, setWhere, formData]);\n\n    const clearFilters = useCallback(() => {\n        setFormData({});\n        setWhere({});\n        setHasActiveFilters(false);\n    }, [setWhere]);\n\n    return (\n        <>\n            <IconButton\n                variant={hasActiveFilters ? \"primary\" : \"ghost\"}\n                icon={<FilterIcon />}\n                onClick={() => setOpen(true)}\n                data-testid=\"audit-logs.toggle-filters\"\n            />\n            <Drawer\n                open={open}\n                onClose={() => setOpen(false)}\n                modal={true}\n                width={360}\n                title=\"Filters\"\n                headerSeparator={true}\n                footerSeparator={true}\n                bodyPadding={false}\n                actions={\n                    <>\n                        <Drawer.CancelButton text=\"Clear all\" onClick={clearFilters} />\n                        <Drawer.ConfirmButton text=\"Apply filters\" onClick={applyFilters} />\n                    </>\n                }\n            >\n                <Form data={formData} onChange={onFormChange}>\n                    {() => (\n                        <div className={\"flex flex-col gap-lg p-lg\"}>\n                            {browser.filters.map(filter => (\n                                <div key={filter.name}>{filter.element}</div>\n                            ))}\n                        </div>\n                    )}\n                </Form>\n            </Drawer>\n        </>\n    );\n};\n"],"names":["Filters","setWhere","browser","useAuditLogsListConfig","open","setOpen","useState","formData","setFormData","hasActiveFilters","setHasActiveFilters","onFormChange","useCallback","data","applyFilters","hasValues","Object","v","undefined","convertedFilters","acc","converter","clearFilters","IconButton","FilterIcon","Drawer","Form","filter"],"mappings":";;;;;AAWO,MAAMA,UAAU,CAAC,EAAEC,QAAQ,EAAgB;IAC9C,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAM,CAACC,UAAUC,YAAY,GAAGF,SAAkC,CAAC;IACnE,MAAM,CAACG,kBAAkBC,oBAAoB,GAAGJ,SAAS;IAEzD,MAAMK,eAAeC,YAAY,CAACC;QAC9BL,YAAYK;IAChB,GAAG,EAAE;IAEL,MAAMC,eAAeF,YAAY;QAC7B,MAAMG,YAAYC,OAAO,MAAM,CAACT,UAAU,IAAI,CAACU,CAAAA,IAAKA,AAAMC,WAAND,KAAmBA,AAAM,OAANA;QACvEP,oBAAoBK;QAEpB,IAAI,CAACA,WAAW;YACZd,SAAS,CAAC;YACVI,QAAQ;YACR;QACJ;QAEA,MAAMc,mBAAmBjB,QAAQ,cAAc,CAAC,MAAM,CAClD,CAACkB,KAAKC,YAAcA,UAAUD,MAC9Bb;QAGJN,SAASkB;QACTd,QAAQ;IACZ,GAAG;QAACH,QAAQ,cAAc;QAAED;QAAUM;KAAS;IAE/C,MAAMe,eAAeV,YAAY;QAC7BJ,YAAY,CAAC;QACbP,SAAS,CAAC;QACVS,oBAAoB;IACxB,GAAG;QAACT;KAAS;IAEb,OAAO,WAAP,GACI,wDACI,oBAACsB,YAAUA;QACP,SAASd,mBAAmB,YAAY;QACxC,oBAAM,oBAACe,gBAAUA;QACjB,SAAS,IAAMnB,QAAQ;QACvB,eAAY;sBAEhB,oBAACoB,QAAMA;QACH,MAAMrB;QACN,SAAS,IAAMC,QAAQ;QACvB,OAAO;QACP,OAAO;QACP,OAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,aAAa;QACb,uBACI,wDACI,oBAACoB,OAAO,YAAY;YAAC,MAAK;YAAY,SAASH;0BAC/C,oBAACG,OAAO,aAAa;YAAC,MAAK;YAAgB,SAASX;;qBAI5D,oBAACY,MAAIA;QAAC,MAAMnB;QAAU,UAAUI;OAC3B,kBACG,oBAAC;YAAI,WAAW;WACXT,QAAQ,OAAO,CAAC,GAAG,CAACyB,CAAAA,SAAAA,WAAAA,GACjB,oBAAC;gBAAI,KAAKA,OAAO,IAAI;eAAGA,OAAO,OAAO;AAQtE"}

package/views/Logs/Header/ButtonFilters/ButtonFilters.js

@@ -1,11 +1,7 @@
 import react, { useCallback } from "react";
-import styled from "@emotion/styled";
 import { ReactComponent } from "@webiny/icons/filter_list.svg";
 import { ReactComponent as filter_list_off_svg_ReactComponent } from "@webiny/icons/filter_list_off.svg";
 import { IconButton } from "@webiny/admin-ui";
-const ButtonWrapper = styled("div")`
-    margin-left: 8px;
-`;
 const Icon = ({ showingFilters })=>showingFilters ? /*#__PURE__*/ react.createElement(filter_list_off_svg_ReactComponent, null) : /*#__PURE__*/ react.createElement(ReactComponent, null);
 const IconComponent = /*#__PURE__*/ react.memo(Icon);
 const ButtonFilters = ({ showingFilters, hideFilters, showFilters })=>{
@@ -15,7 +11,10 @@ const ButtonFilters = ({ showingFilters, hideFilters, showFilters })=>{
     }, [
         showingFilters
     ]);
-    return /*#__PURE__*/ react.createElement(ButtonWrapper, null, /*#__PURE__*/ react.createElement(IconButton, {
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "ml-sm"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "secondary",
         icon: /*#__PURE__*/ react.createElement(IconComponent, {
             showingFilters: showingFilters
         }),

package/views/Logs/Header/ButtonFilters/ButtonFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Header/ButtonFilters/ButtonFilters.js","sources":["../../../../../src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { ReactComponent as CloseFilterIcon } from \"@webiny/icons/filter_list_off.svg\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\nconst ButtonWrapper = styled(\"div\")`\n    margin-left: 8px;\n`;\n\ninterface IconProps {\n    showingFilters?: boolean;\n}\n\nconst Icon = ({ showingFilters }: IconProps) => {\n    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;\n};\nconst IconComponent = React.memo(Icon);\n\ntype ButtonFiltersProps = {\n    showingFilters: boolean;\n    hideFilters: () => void;\n    showFilters: () => void;\n};\n\nexport const ButtonFilters = ({ showingFilters, hideFilters, showFilters }: ButtonFiltersProps) => {\n    const toggleFilters = useCallback(() => {\n        if (showingFilters) {\n            hideFilters();\n            return;\n        }\n        showFilters();\n    }, [showingFilters]);\n\n    return (\n        <ButtonWrapper>\n            <IconButton\n                icon={<IconComponent showingFilters={showingFilters} />}\n                onClick={toggleFilters}\n                data-testid=\"audit-logs.toggle-filters\"\n            />\n        </ButtonWrapper>\n    );\n};\n"],"names":["ButtonWrapper","styled","Icon","showingFilters","CloseFilterIcon","FilterIcon","IconComponent","React","ButtonFilters","hideFilters","showFilters","toggleFilters","useCallback","IconButton"],"mappings":";;;;;AAMA,MAAMA,gBAAgBC,OAAO,MAAM,CAAC;;AAEpC,CAAC;AAMD,MAAMC,OAAO,CAAC,EAAEC,cAAc,EAAa,GAChCA,iBAAiB,WAAjBA,GAAiB,oBAACC,oCAAeA,QAAAA,WAAAA,GAAM,oBAACC,gBAAUA;AAE7D,MAAMC,gBAAgB,WAAHA,GAAGC,MAAAA,IAAU,CAACL;AAQ1B,MAAMM,gBAAgB,CAAC,EAAEL,cAAc,EAAEM,WAAW,EAAEC,WAAW,EAAsB;IAC1F,MAAMC,gBAAgBC,YAAY;QAC9B,IAAIT,gBAAgB,YAChBM;QAGJC;IACJ,GAAG;QAACP;KAAe;IAEnB,OAAO,WAAP,GACI,oBAACH,eAAaA,MAAAA,WAAAA,GACV,oBAACa,YAAUA;QACP,oBAAM,oBAACP,eAAaA;YAAC,gBAAgBH;;QACrC,SAASQ;QACT,eAAY;;AAI5B"}
+{"version":3,"file":"views/Logs/Header/ButtonFilters/ButtonFilters.js","sources":["../../../../../src/views/Logs/Header/ButtonFilters/ButtonFilters.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { ReactComponent as CloseFilterIcon } from \"@webiny/icons/filter_list_off.svg\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\ninterface IconProps {\n    showingFilters?: boolean;\n}\n\nconst Icon = ({ showingFilters }: IconProps) => {\n    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;\n};\nconst IconComponent = React.memo(Icon);\n\ntype ButtonFiltersProps = {\n    showingFilters: boolean;\n    hideFilters: () => void;\n    showFilters: () => void;\n};\n\nexport const ButtonFilters = ({ showingFilters, hideFilters, showFilters }: ButtonFiltersProps) => {\n    const toggleFilters = useCallback(() => {\n        if (showingFilters) {\n            hideFilters();\n            return;\n        }\n        showFilters();\n    }, [showingFilters]);\n\n    return (\n        <div className={\"ml-sm\"}>\n            <IconButton\n                variant={\"secondary\"}\n                icon={<IconComponent showingFilters={showingFilters} />}\n                onClick={toggleFilters}\n                data-testid=\"audit-logs.toggle-filters\"\n            />\n        </div>\n    );\n};\n"],"names":["Icon","showingFilters","CloseFilterIcon","FilterIcon","IconComponent","React","ButtonFilters","hideFilters","showFilters","toggleFilters","useCallback","IconButton"],"mappings":";;;;AASA,MAAMA,OAAO,CAAC,EAAEC,cAAc,EAAa,GAChCA,iBAAiB,WAAjBA,GAAiB,oBAACC,oCAAeA,QAAAA,WAAAA,GAAM,oBAACC,gBAAUA;AAE7D,MAAMC,gBAAgB,WAAHA,GAAGC,MAAAA,IAAU,CAACL;AAQ1B,MAAMM,gBAAgB,CAAC,EAAEL,cAAc,EAAEM,WAAW,EAAEC,WAAW,EAAsB;IAC1F,MAAMC,gBAAgBC,YAAY;QAC9B,IAAIT,gBAAgB,YAChBM;QAGJC;IACJ,GAAG;QAACP;KAAe;IAEnB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACU,YAAUA;QACP,SAAS;QACT,oBAAM,oBAACP,eAAaA;YAAC,gBAAgBH;;QACrC,SAASQ;QACT,eAAY;;AAI5B"}

package/views/Logs/Header/Header.d.ts

@@ -1,9 +1,7 @@
 import React from "react";
 type HeaderProps = {
     title: string;
-    showingFilters: boolean;
-    hideFilters: () => void;
-    showFilters: () => void;
+    children?: React.ReactNode;
 };
-export declare const Header: ({ title, showingFilters, hideFilters, showFilters }: HeaderProps) => React.JSX.Element;
+export declare const Header: ({ title, children }: HeaderProps) => React.JSX.Element;
 export {};

package/views/Logs/Header/Header.js

@@ -1,17 +1,14 @@
 import react from "react";
-import { ButtonFilters } from "./ButtonFilters/index.js";
 import { Text } from "../../../components/Text.js";
-const Header = ({ title, showingFilters, hideFilters, showFilters })=>/*#__PURE__*/ react.createElement("div", {
+const Header = ({ title, children })=>/*#__PURE__*/ react.createElement("div", {
         className: "box-border w-full border-b border-neutral-dimmed px-md py-sm"
     }, /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center justify-between"
     }, /*#__PURE__*/ react.createElement(Text, {
         use: "headline5"
-    }, title), /*#__PURE__*/ react.createElement(ButtonFilters, {
-        showingFilters: showingFilters,
-        hideFilters: hideFilters,
-        showFilters: showFilters
-    })));
+    }, title), /*#__PURE__*/ react.createElement("div", {
+        className: "ml-auto"
+    }, children)));
 export { Header };
 
 //# sourceMappingURL=Header.js.map

package/views/Logs/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/Header/Header.js","sources":["../../../../src/views/Logs/Header/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonFilters } from \"~/views/Logs/Header/ButtonFilters/index.js\";\nimport { Text } from \"~/components/Text.js\";\n\ntype HeaderProps = {\n    title: string;\n    showingFilters: boolean;\n    hideFilters: () => void;\n    showFilters: () => void;\n};\n\nexport const Header = ({ title, showingFilters, hideFilters, showFilters }: HeaderProps) => {\n    return (\n        <div className=\"box-border w-full border-b border-neutral-dimmed px-md py-sm\">\n            <div className=\"flex items-center justify-between\">\n                <Text use={\"headline5\"}>{title}</Text>\n                <ButtonFilters\n                    showingFilters={showingFilters}\n                    hideFilters={hideFilters}\n                    showFilters={showFilters}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Header","title","showingFilters","hideFilters","showFilters","Text","ButtonFilters"],"mappings":";;;AAWO,MAAMA,SAAS,CAAC,EAAEC,KAAK,EAAEC,cAAc,EAAEC,WAAW,EAAEC,WAAW,EAAe,GAC5E,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,KAAK;OAAcJ,QAAAA,WAAAA,GACzB,oBAACK,eAAaA;QACV,gBAAgBJ;QAChB,aAAaC;QACb,aAAaC"}
+{"version":3,"file":"views/Logs/Header/Header.js","sources":["../../../../src/views/Logs/Header/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/components/Text.js\";\n\ntype HeaderProps = {\n    title: string;\n    children?: React.ReactNode;\n};\n\nexport const Header = ({ title, children }: HeaderProps) => {\n    return (\n        <div className=\"box-border w-full border-b border-neutral-dimmed px-md py-sm\">\n            <div className=\"flex items-center justify-between\">\n                <Text use={\"headline5\"}>{title}</Text>\n                <div className={\"ml-auto\"}>{children}</div>\n            </div>\n        </div>\n    );\n};\n"],"names":["Header","title","children","Text"],"mappings":";;AAQO,MAAMA,SAAS,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAe,GAC5C,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,MAAIA;QAAC,KAAK;OAAcF,QAAAA,WAAAA,GACzB,oBAAC;QAAI,WAAW;OAAYC"}

package/views/Logs/LoadMoreButton/styled.d.ts

@@ -1,4 +1,4 @@
-export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import React from "react";
+export declare const Container: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/views/Logs/LoadMoreButton/styled.js

@@ -1,9 +1,7 @@
-import styled from "@emotion/styled";
-const Container = styled("div")`
-    display: flex;
-    justify-content: center;
-    margin-top: 16px;
-`;
+import react from "react";
+const Container = ({ children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-center mt-md"
+    }, children);
 export { Container };
 
 //# sourceMappingURL=styled.js.map

package/views/Logs/LoadMoreButton/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/LoadMoreButton/styled.js","sources":["../../../../src/views/Logs/LoadMoreButton/styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    display: flex;\n    justify-content: center;\n    margin-top: 16px;\n`;\n"],"names":["Container","styled"],"mappings":";AAEO,MAAMA,YAAYC,OAAO,MAAM,CAAC;;;;AAIvC,CAAC"}
+{"version":3,"file":"views/Logs/LoadMoreButton/styled.js","sources":["../../../../src/views/Logs/LoadMoreButton/styled.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const Container = ({ children }: { children: React.ReactNode }) => {\n    return <div className={\"flex justify-center mt-md\"}>{children}</div>;\n};\n"],"names":["Container","children"],"mappings":";AAEO,MAAMA,YAAY,CAAC,EAAEC,QAAQ,EAAiC,GAC1D,WAAP,GAAO,oBAAC;QAAI,WAAW;OAA8BA"}

package/views/Logs/LogsView.js

@@ -33,16 +33,12 @@ const LogsView = ()=>{
     return /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-col h-main-content"
     }, /*#__PURE__*/ react.createElement(Header, {
-        title: "Audit Logs",
-        showingFilters: list.showingFilters,
-        showFilters: list.showFilters,
-        hideFilters: list.hideFilters
-    }), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-1 min-h-0"
+        title: "Audit Logs"
     }, /*#__PURE__*/ react.createElement(Filters, {
-        showingFilters: list.showingFilters,
         setWhere: list.setWhere
-    }), 0 !== list.records.length || list.isListLoading ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Preview, {
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-h-0"
+    }, 0 !== list.records.length || list.isListLoading ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Preview, {
         auditLog: selectedAuditLog,
         onClose: ()=>closePreviewModal(),
         hasAccessToUsers: hasAccessToUsers

package/views/Logs/LogsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"views/Logs/LogsView.js","sources":["../../../src/views/Logs/LogsView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { EmptyView } from \"@webiny/app-admin\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { Scrollbar } from \"@webiny/admin-ui\";\nimport { LoadingMore } from \"~/views/Logs/LoadingMore/index.js\";\nimport { LoadMoreButton } from \"~/views/Logs/LoadMoreButton/index.js\";\nimport { Header } from \"~/views/Logs/Header/index.js\";\nimport { Filters } from \"~/views/Logs/Filters/index.js\";\nimport { Table } from \"~/views/Logs/Table/index.js\";\nimport { Preview } from \"~/views/Logs/Preview/index.js\";\nimport { useAuditLogsList } from \"~/hooks/index.js\";\nimport type { IAuditLog } from \"~/types.js\";\n\nconst t = i18n.ns(\"app-audit-logs/views/logs\");\n\nexport const LogsView = () => {\n    const [selectedAuditLog, setSelectedAuditLog] = useState<IAuditLog | null>(null);\n    const handleAuditLogSelect = useCallback(\n        (auditLog: IAuditLog) => setSelectedAuditLog(auditLog),\n        []\n    );\n    const closePreviewModal = useCallback(() => setSelectedAuditLog(null), []);\n\n    const { innerHeight: windowHeight } = window;\n    const [tableHeight, setTableHeight] = useState(0);\n    const tableRef = useRef<HTMLDivElement>(null);\n    const { getPermissions } = useSecurity();\n    const hasAccessToUsers = Boolean(getPermissions(\"adminUsers\").length);\n\n    const list = useAuditLogsList();\n\n    useEffect(() => {\n        setTableHeight(tableRef?.current?.clientHeight || 0);\n\n        return () => {\n            setTableHeight(0);\n        };\n    });\n\n    const loadMoreOnScroll = debounce(({ scrollFrame }) => {\n        if (scrollFrame.top > 0.8 && !list.isListLoadingMore && list.meta.hasMoreItems) {\n            list.listMoreRecords();\n        }\n    }, 200);\n\n    return (\n        <div className={\"flex flex-col h-main-content\"}>\n            <Header\n                title=\"Audit Logs\"\n                showingFilters={list.showingFilters}\n                showFilters={list.showFilters}\n                hideFilters={list.hideFilters}\n            />\n            <div className={\"flex-1 min-h-0\"}>\n                <Filters showingFilters={list.showingFilters} setWhere={list.setWhere} />\n                {list.records.length === 0 && !list.isListLoading ? (\n                    <EmptyView title={t`No results found.`} action={null} />\n                ) : (\n                    <>\n                        <Preview\n                            auditLog={selectedAuditLog}\n                            onClose={() => closePreviewModal()}\n                            hasAccessToUsers={hasAccessToUsers}\n                        />\n                        <Scrollbar\n                            data-testid=\"default-data-list\"\n                            onScrollFrame={scrollFrame => loadMoreOnScroll({ scrollFrame })}\n                        >\n                            <div className={\"h-[500px]\"}>\n                                <Table\n                                    ref={tableRef}\n                                    records={list.records}\n                                    loading={list.isListLoading && !list.isListLoadingMore}\n                                    handleRecordSelect={handleAuditLogSelect}\n                                    sorting={list.sorting}\n                                    onSortingChange={list.setSorting}\n                                    hasAccessToUsers={hasAccessToUsers}\n                                />\n                                <LoadMoreButton\n                                    show={!list.isListLoading && list.meta.hasMoreItems}\n                                    disabled={list.isListLoadingMore}\n                                    windowHeight={windowHeight}\n                                    tableHeight={tableHeight}\n                                    onClick={list.listMoreRecords}\n                                />\n                            </div>\n                        </Scrollbar>\n                        {list.isListLoadingMore && <LoadingMore />}\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["t","i18n","LogsView","selectedAuditLog","setSelectedAuditLog","useState","handleAuditLogSelect","useCallback","auditLog","closePreviewModal","windowHeight","window","tableHeight","setTableHeight","tableRef","useRef","getPermissions","useSecurity","hasAccessToUsers","Boolean","list","useAuditLogsList","useEffect","loadMoreOnScroll","debounce","scrollFrame","Header","Filters","Preview","Scrollbar","Table","LoadMoreButton","LoadingMore","EmptyView"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,WAAW;IACpB,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,SAA2B;IAC3E,MAAMC,uBAAuBC,YACzB,CAACC,WAAwBJ,oBAAoBI,WAC7C,EAAE;IAEN,MAAMC,oBAAoBF,YAAY,IAAMH,oBAAoB,OAAO,EAAE;IAEzE,MAAM,EAAE,aAAaM,YAAY,EAAE,GAAGC;IACtC,MAAM,CAACC,aAAaC,eAAe,GAAGR,SAAS;IAC/C,MAAMS,WAAWC,OAAuB;IACxC,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,mBAAmBC,QAAQH,eAAe,cAAc,MAAM;IAEpE,MAAMI,OAAOC;IAEbC,UAAU;QACNT,eAAeC,UAAU,SAAS,gBAAgB;QAElD,OAAO;YACHD,eAAe;QACnB;IACJ;IAEA,MAAMU,mBAAmBC,SAAS,CAAC,EAAEC,WAAW,EAAE;QAC9C,IAAIA,YAAY,GAAG,GAAG,OAAO,CAACL,KAAK,iBAAiB,IAAIA,KAAK,IAAI,CAAC,YAAY,EAC1EA,KAAK,eAAe;IAE5B,GAAG;IAEH,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,QAAMA;QACH,OAAM;QACN,gBAAgBN,KAAK,cAAc;QACnC,aAAaA,KAAK,WAAW;QAC7B,aAAaA,KAAK,WAAW;sBAEjC,oBAAC;QAAI,WAAW;qBACZ,oBAACO,SAAOA;QAAC,gBAAgBP,KAAK,cAAc;QAAE,UAAUA,KAAK,QAAQ;QACpEA,AAAwB,MAAxBA,KAAK,OAAO,CAAC,MAAM,IAAWA,KAAK,aAAa,G,cAG7C,wDACI,oBAACQ,SAAOA;QACJ,UAAUzB;QACV,SAAS,IAAMM;QACf,kBAAkBS;sBAEtB,oBAACW,WAASA;QACN,eAAY;QACZ,eAAeJ,CAAAA,cAAeF,iBAAiB;gBAAEE;YAAY;qBAE7D,oBAAC;QAAI,WAAW;qBACZ,oBAACK,OAAKA;QACF,KAAKhB;QACL,SAASM,KAAK,OAAO;QACrB,SAASA,KAAK,aAAa,IAAI,CAACA,KAAK,iBAAiB;QACtD,oBAAoBd;QACpB,SAASc,KAAK,OAAO;QACrB,iBAAiBA,KAAK,UAAU;QAChC,kBAAkBF;sBAEtB,oBAACa,gBAAcA;QACX,MAAM,CAACX,KAAK,aAAa,IAAIA,KAAK,IAAI,CAAC,YAAY;QACnD,UAAUA,KAAK,iBAAiB;QAChC,cAAcV;QACd,aAAaE;QACb,SAASQ,KAAK,eAAe;UAIxCA,KAAK,iBAAiB,IAAI,WAAJ,GAAI,oBAACY,aAAWA,SAhCK,WAAH,GAC7C,oBAACC,WAASA;QAAC,OAAOjC,CAAC,CAAC,iBAAiB,CAAC;QAAE,QAAQ;;AAqCpE"}
+{"version":3,"file":"views/Logs/LogsView.js","sources":["../../../src/views/Logs/LogsView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport debounce from \"lodash/debounce.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { EmptyView } from \"@webiny/app-admin\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { Scrollbar } from \"@webiny/admin-ui\";\nimport { LoadingMore } from \"~/views/Logs/LoadingMore/index.js\";\nimport { LoadMoreButton } from \"~/views/Logs/LoadMoreButton/index.js\";\nimport { Header } from \"~/views/Logs/Header/index.js\";\nimport { Filters } from \"~/views/Logs/Filters/index.js\";\nimport { Table } from \"~/views/Logs/Table/index.js\";\nimport { Preview } from \"~/views/Logs/Preview/index.js\";\nimport { useAuditLogsList } from \"~/hooks/index.js\";\nimport type { IAuditLog } from \"~/types.js\";\n\nconst t = i18n.ns(\"app-audit-logs/views/logs\");\n\nexport const LogsView = () => {\n    const [selectedAuditLog, setSelectedAuditLog] = useState<IAuditLog | null>(null);\n    const handleAuditLogSelect = useCallback(\n        (auditLog: IAuditLog) => setSelectedAuditLog(auditLog),\n        []\n    );\n    const closePreviewModal = useCallback(() => setSelectedAuditLog(null), []);\n\n    const { innerHeight: windowHeight } = window;\n    const [tableHeight, setTableHeight] = useState(0);\n    const tableRef = useRef<HTMLDivElement>(null);\n    const { getPermissions } = useSecurity();\n    const hasAccessToUsers = Boolean(getPermissions(\"adminUsers\").length);\n\n    const list = useAuditLogsList();\n\n    useEffect(() => {\n        setTableHeight(tableRef?.current?.clientHeight || 0);\n\n        return () => {\n            setTableHeight(0);\n        };\n    });\n\n    const loadMoreOnScroll = debounce(({ scrollFrame }) => {\n        if (scrollFrame.top > 0.8 && !list.isListLoadingMore && list.meta.hasMoreItems) {\n            list.listMoreRecords();\n        }\n    }, 200);\n\n    return (\n        <div className={\"flex flex-col h-main-content\"}>\n            <Header title=\"Audit Logs\">\n                <Filters setWhere={list.setWhere} />\n            </Header>\n            <div className={\"flex-1 min-h-0\"}>\n                {list.records.length === 0 && !list.isListLoading ? (\n                    <EmptyView title={t`No results found.`} action={null} />\n                ) : (\n                    <>\n                        <Preview\n                            auditLog={selectedAuditLog}\n                            onClose={() => closePreviewModal()}\n                            hasAccessToUsers={hasAccessToUsers}\n                        />\n                        <Scrollbar\n                            data-testid=\"default-data-list\"\n                            onScrollFrame={scrollFrame => loadMoreOnScroll({ scrollFrame })}\n                        >\n                            <div className={\"h-[500px]\"}>\n                                <Table\n                                    ref={tableRef}\n                                    records={list.records}\n                                    loading={list.isListLoading && !list.isListLoadingMore}\n                                    handleRecordSelect={handleAuditLogSelect}\n                                    sorting={list.sorting}\n                                    onSortingChange={list.setSorting}\n                                    hasAccessToUsers={hasAccessToUsers}\n                                />\n                                <LoadMoreButton\n                                    show={!list.isListLoading && list.meta.hasMoreItems}\n                                    disabled={list.isListLoadingMore}\n                                    windowHeight={windowHeight}\n                                    tableHeight={tableHeight}\n                                    onClick={list.listMoreRecords}\n                                />\n                            </div>\n                        </Scrollbar>\n                        {list.isListLoadingMore && <LoadingMore />}\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["t","i18n","LogsView","selectedAuditLog","setSelectedAuditLog","useState","handleAuditLogSelect","useCallback","auditLog","closePreviewModal","windowHeight","window","tableHeight","setTableHeight","tableRef","useRef","getPermissions","useSecurity","hasAccessToUsers","Boolean","list","useAuditLogsList","useEffect","loadMoreOnScroll","debounce","scrollFrame","Header","Filters","Preview","Scrollbar","Table","LoadMoreButton","LoadingMore","EmptyView"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAEX,MAAMC,WAAW;IACpB,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,SAA2B;IAC3E,MAAMC,uBAAuBC,YACzB,CAACC,WAAwBJ,oBAAoBI,WAC7C,EAAE;IAEN,MAAMC,oBAAoBF,YAAY,IAAMH,oBAAoB,OAAO,EAAE;IAEzE,MAAM,EAAE,aAAaM,YAAY,EAAE,GAAGC;IACtC,MAAM,CAACC,aAAaC,eAAe,GAAGR,SAAS;IAC/C,MAAMS,WAAWC,OAAuB;IACxC,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,mBAAmBC,QAAQH,eAAe,cAAc,MAAM;IAEpE,MAAMI,OAAOC;IAEbC,UAAU;QACNT,eAAeC,UAAU,SAAS,gBAAgB;QAElD,OAAO;YACHD,eAAe;QACnB;IACJ;IAEA,MAAMU,mBAAmBC,SAAS,CAAC,EAAEC,WAAW,EAAE;QAC9C,IAAIA,YAAY,GAAG,GAAG,OAAO,CAACL,KAAK,iBAAiB,IAAIA,KAAK,IAAI,CAAC,YAAY,EAC1EA,KAAK,eAAe;IAE5B,GAAG;IAEH,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACM,QAAMA;QAAC,OAAM;qBACV,oBAACC,SAAOA;QAAC,UAAUP,KAAK,QAAQ;uBAEpC,oBAAC;QAAI,WAAW;OACXA,AAAwB,MAAxBA,KAAK,OAAO,CAAC,MAAM,IAAWA,KAAK,aAAa,G,cAG7C,wDACI,oBAACQ,SAAOA;QACJ,UAAUzB;QACV,SAAS,IAAMM;QACf,kBAAkBS;sBAEtB,oBAACW,WAASA;QACN,eAAY;QACZ,eAAeJ,CAAAA,cAAeF,iBAAiB;gBAAEE;YAAY;qBAE7D,oBAAC;QAAI,WAAW;qBACZ,oBAACK,OAAKA;QACF,KAAKhB;QACL,SAASM,KAAK,OAAO;QACrB,SAASA,KAAK,aAAa,IAAI,CAACA,KAAK,iBAAiB;QACtD,oBAAoBd;QACpB,SAASc,KAAK,OAAO;QACrB,iBAAiBA,KAAK,UAAU;QAChC,kBAAkBF;sBAEtB,oBAACa,gBAAcA;QACX,MAAM,CAACX,KAAK,aAAa,IAAIA,KAAK,IAAI,CAAC,YAAY;QACnD,UAAUA,KAAK,iBAAiB;QAChC,cAAcV;QACd,aAAaE;QACb,SAASQ,KAAK,eAAe;UAIxCA,KAAK,iBAAiB,IAAI,WAAJ,GAAI,oBAACY,aAAWA,SAhCK,WAAH,GAC7C,oBAACC,WAASA;QAAC,OAAOjC,CAAC,CAAC,iBAAiB,CAAC;QAAE,QAAQ;;AAqCpE"}

package/views/Logs/Preview/AuditLogDetailsPresenter.d.ts

@@ -0,0 +1,13 @@
+import { AuditLogDetailsPresenter as Abstraction, type IAuditLogDetailsVm } from "./abstractions.js";
+import type { IAuditLog } from "../../../types.js";
+declare class AuditLogDetailsPresenterImpl implements Abstraction.Interface {
+    private _auditLog;
+    constructor();
+    get vm(): IAuditLogDetailsVm;
+    init(auditLog: IAuditLog): void;
+    private parseContent;
+}
+export declare const AuditLogDetailsPresenter: typeof AuditLogDetailsPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("./abstractions.js").IAuditLogDetailsPresenter>;
+};
+export {};

package/views/Logs/Preview/AuditLogDetailsPresenter.js

@@ -0,0 +1,36 @@
+import { computed, makeAutoObservable } from "mobx";
+import { AuditLogDetailsPresenter } from "./abstractions.js";
+class AuditLogDetailsPresenterImpl {
+    constructor(){
+        this._auditLog = null;
+        makeAutoObservable(this, {
+            vm: computed
+        }, {
+            autoBind: true
+        });
+    }
+    get vm() {
+        return {
+            auditLog: this._auditLog,
+            content: this.parseContent()
+        };
+    }
+    init(auditLog) {
+        this._auditLog = auditLog;
+    }
+    parseContent() {
+        if (!this._auditLog) return {};
+        try {
+            return JSON.parse(this._auditLog.content);
+        } catch  {
+            return {};
+        }
+    }
+}
+const AuditLogDetailsPresenter_AuditLogDetailsPresenter = AuditLogDetailsPresenter.createImplementation({
+    implementation: AuditLogDetailsPresenterImpl,
+    dependencies: []
+});
+export { AuditLogDetailsPresenter_AuditLogDetailsPresenter as AuditLogDetailsPresenter };
+
+//# sourceMappingURL=AuditLogDetailsPresenter.js.map

package/views/Logs/Preview/AuditLogDetailsPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/AuditLogDetailsPresenter.js","sources":["../../../../src/views/Logs/Preview/AuditLogDetailsPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed } from \"mobx\";\nimport {\n    AuditLogDetailsPresenter as Abstraction,\n    type IAuditLogDetailsVm\n} from \"./abstractions.js\";\nimport type { IAuditLog } from \"~/types.js\";\n\nclass AuditLogDetailsPresenterImpl implements Abstraction.Interface {\n    private _auditLog: IAuditLog | null = null;\n\n    constructor() {\n        makeAutoObservable(this, { vm: computed }, { autoBind: true });\n    }\n\n    get vm(): IAuditLogDetailsVm {\n        return {\n            auditLog: this._auditLog,\n            content: this.parseContent()\n        };\n    }\n\n    init(auditLog: IAuditLog): void {\n        this._auditLog = auditLog;\n    }\n\n    private parseContent(): Record<string, unknown> {\n        if (!this._auditLog) {\n            return {};\n        }\n        try {\n            return JSON.parse(this._auditLog.content);\n        } catch {\n            return {};\n        }\n    }\n}\n\nexport const AuditLogDetailsPresenter = Abstraction.createImplementation({\n    implementation: AuditLogDetailsPresenterImpl,\n    dependencies: []\n});\n"],"names":["AuditLogDetailsPresenterImpl","makeAutoObservable","computed","auditLog","JSON","AuditLogDetailsPresenter","Abstraction"],"mappings":";;AAOA,MAAMA;IAGF,aAAc;aAFN,SAAS,GAAqB;QAGlCC,mBAAmB,IAAI,EAAE;YAAE,IAAIC;QAAS,GAAG;YAAE,UAAU;QAAK;IAChE;IAEA,IAAI,KAAyB;QACzB,OAAO;YACH,UAAU,IAAI,CAAC,SAAS;YACxB,SAAS,IAAI,CAAC,YAAY;QAC9B;IACJ;IAEA,KAAKC,QAAmB,EAAQ;QAC5B,IAAI,CAAC,SAAS,GAAGA;IACrB;IAEQ,eAAwC;QAC5C,IAAI,CAAC,IAAI,CAAC,SAAS,EACf,OAAO,CAAC;QAEZ,IAAI;YACA,OAAOC,KAAK,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO;QAC5C,EAAE,OAAM;YACJ,OAAO,CAAC;QACZ;IACJ;AACJ;AAEO,MAAMC,oDAA2BC,yBAAAA,oBAAgC,CAAC;IACrE,gBAAgBN;IAChB,cAAc,EAAE;AACpB"}

package/views/Logs/Preview/Preview.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import type { IAuditLog } from "../../../types.js";
-interface HeaderProps {
+interface PreviewProps {
     auditLog: IAuditLog | null;
     onClose: () => void;
     hasAccessToUsers: boolean;
 }
-export declare const Preview: ({ auditLog, onClose, hasAccessToUsers }: HeaderProps) => React.JSX.Element | null;
+export declare const Preview: (({ auditLog, onClose, hasAccessToUsers }: PreviewProps) => React.JSX.Element | null) & React.NamedExoticComponent<PreviewProps> & {
+    readonly type: ({ auditLog, onClose, hasAccessToUsers }: PreviewProps) => React.JSX.Element | null;
+};
 export {};