@webiny/app-security-access-management 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/ui/views/ApiKeys/ApiKeyForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","ButtonWrapper","styled","display","justifyContent","ApiKeyForm","useRouter","location","history","useSnackbar","showSnackbar","newEntry","URLSearchParams","search","get","id","getQuery","useQuery","GQL","READ_API_KEY","variables","skip","onCompleted","data","error","security","apiKey","push","message","useMutation","CREATE_API_KEY","refetchQueries","query","LIST_API_KEYS","create","createMutation","UPDATE_API_KEY","update","updateMutation","loading","find","item","onSubmit","useCallback","permissions","length","timeout","dismissesOnAction","action","isUpdate","createdOn","pickDataForAPI","operation","args","response","showEmptyView","isEmpty","form","Bind","name","validation","token","background","padding","paddingLeft","lineHeight","verticalAlign","position","right","bind","ev","submit"],"sources":["ApiKeyForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Form } from \"@webiny/form\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { ButtonDefault, ButtonIcon, ButtonPrimary, CopyButton } from \"@webiny/ui/Button\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Permissions } from \"@webiny/app-admin/components/Permissions\";\nimport { validation } from \"@webiny/validation\";\nimport {\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin/components/SimpleForm\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { pickDataForAPI } from \"./utils\";\nimport * as GQL from \"./graphql\";\nimport { SnackbarAction } from \"@webiny/ui/Snackbar\";\nimport isEmpty from \"lodash/isEmpty\";\nimport EmptyView from \"@webiny/app-admin/components/EmptyView\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport styled from \"@emotion/styled\";\nimport { ApiKey } from \"~/types\";\n\nconst t = i18n.ns(\"app-security-admin-users/admin/api-keys/form\");\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\"\n});\nexport interface ApiKeyFormProps {\n    // TODO @ts-refactor delete and go up the tree and sort it out\n    [key: string]: any;\n}\nexport const ApiKeyForm: React.FC<ApiKeyFormProps> = () => {\n    const { location, history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const newEntry = new URLSearchParams(location.search).get(\"new\") === \"true\";\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const getQuery = useQuery(GQL.READ_API_KEY, {\n        variables: { id },\n        skip: !id,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.security.apiKey;\n            if (error) {\n                history.push(\"/access-management/api-keys\");\n                showSnackbar(error.message);\n            }\n        }\n    });\n\n    const [create, createMutation] = useMutation(GQL.CREATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const [update, updateMutation] = useMutation(GQL.UPDATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);\n\n    const onSubmit = useCallback(\n        async data => {\n            if (!data.permissions || !data.permissions.length) {\n                showSnackbar(t`You must configure permissions before saving!`, {\n                    timeout: 60000,\n                    dismissesOnAction: true,\n                    action: <SnackbarAction label={\"OK\"} />\n                });\n                return;\n            }\n\n            const isUpdate = data.createdOn;\n            const [operation, args] = isUpdate\n                ? [update, { variables: { id: data.id, data: pickDataForAPI(data) } }]\n                : [create, { variables: { data: pickDataForAPI(data) } }];\n\n            const response = await operation(args);\n\n            const { error } = response.data.security.apiKey;\n            if (error) {\n                return showSnackbar(error.message);\n            }\n\n            const { id } = response.data.security.apiKey.data;\n\n            !isUpdate && history.push(`/access-management/api-keys?id=${id}`);\n            showSnackbar(t`API key saved successfully.`);\n        },\n        [id]\n    );\n\n    const data: ApiKey[] = get(getQuery, \"data.security.apiKey.data\", {});\n\n    const showEmptyView = !newEntry && !loading && isEmpty(data);\n    // Render \"No content\" selected view.\n    if (showEmptyView) {\n        return (\n            <EmptyView\n                title={t`Click on the left side list to display API key details or create a...`}\n                action={\n                    <ButtonDefault\n                        data-testid=\"new-record-button\"\n                        onClick={() => history.push(\"/access-management/api-keys?new=true\")}\n                    >\n                        <ButtonIcon icon={<AddIcon />} /> {t`New API Key`}\n                    </ButtonDefault>\n                }\n            />\n        );\n    }\n\n    return (\n        <Form data={data} onSubmit={onSubmit}>\n            {({ data, form, Bind }) => {\n                return (\n                    <SimpleForm>\n                        {loading && <CircularProgress />}\n                        <SimpleFormHeader title={data.name ? data.name : \"Untitled\"} />\n                        <SimpleFormContent>\n                            <Grid>\n                                <Cell span={12}>\n                                    <Bind name=\"name\" validators={validation.create(\"required\")}>\n                                        <Input\n                                            label={t`Name`}\n                                            data-testid=\"sam.key.new.form.name\"\n                                        />\n                                    </Bind>\n                                </Cell>\n                            </Grid>\n                            <Grid>\n                                <Cell span={12}>\n                                    <Bind\n                                        name=\"description\"\n                                        validators={validation.create(\"required\")}\n                                    >\n                                        <Input\n                                            label={t`Description`}\n                                            rows={4}\n                                            data-testid=\"sam.key.new.form.description\"\n                                        />\n                                    </Bind>\n                                </Cell>\n                            </Grid>\n                            <Grid>\n                                <Cell span={12}>\n                                    <div>\n                                        <Typography use={\"subtitle1\"}>{t`Token`}</Typography>\n                                        {data.token ? (\n                                            <div\n                                                style={{\n                                                    background: \"var(--mdc-theme-background)\",\n                                                    padding: \"8px\",\n                                                    paddingLeft: \"16px\"\n                                                }}\n                                            >\n                                                <span\n                                                    style={{\n                                                        lineHeight: \"48px\",\n                                                        verticalAlign: \"middle\"\n                                                    }}\n                                                >\n                                                    {data.token}\n                                                </span>\n                                                <span\n                                                    style={{ position: \"absolute\", right: \"32px\" }}\n                                                >\n                                                    <CopyButton\n                                                        value={data.token}\n                                                        onCopy={() =>\n                                                            showSnackbar(\"Successfully copied!\")\n                                                        }\n                                                    />\n                                                </span>\n                                            </div>\n                                        ) : (\n                                            <FormElementMessage>\n                                                Your token will be shown once you submit the form.\n                                            </FormElementMessage>\n                                        )}\n                                    </div>\n                                </Cell>\n                            </Grid>\n                            <Grid>\n                                <Cell span={12}>\n                                    <Typography use={\"subtitle1\"}>{t`Permissions`}</Typography>\n                                </Cell>\n                                <Cell span={12}>\n                                    <Bind name={\"permissions\"} defaultValue={[]}>\n                                        {bind => <Permissions id={data.id || \"new\"} {...bind} />}\n                                    </Bind>\n                                </Cell>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter>\n                            <ButtonWrapper>\n                                <ButtonDefault\n                                    onClick={() => history.push(\"/access-management/api-keys\")}\n                                    data-testid=\"sam.key.new.form.button.cancel\"\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    onClick={ev => {\n                                        form.submit(ev);\n                                    }}\n                                    data-testid=\"sam.key.new.form.button.save\"\n                                >{t`Save API key`}</ButtonPrimary>\n                            </ButtonWrapper>\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ui/views/ApiKeys/ApiKeyForm.js","sources":["../../../../src/ui/views/ApiKeys/ApiKeyForm.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\nimport get from \"lodash/get.js\";\nimport isEmpty from \"lodash/isEmpty.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Bind, Form, useForm, useGenerateSlug } from \"@webiny/form\";\nimport {\n    useRouter,\n    Permissions,\n    EmptyView,\n    SimpleForm,\n    SimpleFormFooter,\n    SimpleFormContent,\n    SimpleFormHeader\n} from \"@webiny/app-admin\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { pickDataForCreate, pickDataForUpdate } from \"./utils.js\";\nimport * as GQL from \"./graphql.js\";\nimport type { ApiKey } from \"~/types.js\";\nimport {\n    Alert,\n    Button,\n    CopyButton,\n    Grid,\n    Icon,\n    IconButton,\n    Input,\n    Label,\n    OverlayLoader,\n    Textarea,\n    Tooltip,\n    useToast\n} from \"@webiny/admin-ui\";\nimport { Routes } from \"~/routes.js\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\n\nconst t = i18n.ns(\"app-security-admin-users/admin/api-keys/form\");\n\ninterface ApiKeyFormProps {\n    newEntry: boolean;\n    id: string | undefined;\n}\n\nexport const ApiKeyForm = ({ id, newEntry }: ApiKeyFormProps) => {\n    const { goToRoute } = useRouter();\n    const toast = useToast();\n\n    const getQuery = useQuery(GQL.READ_API_KEY, {\n        variables: { id },\n        skip: !id,\n        onCompleted: data => {\n            if (!data) {\n                return;\n            }\n\n            const { error } = data.security.apiKey;\n            if (error) {\n                goToRoute(Routes.ApiKeys.List);\n                toast.showWarningToast({ title: error.message });\n            }\n        }\n    });\n\n    const [create, createMutation] = useMutation(GQL.CREATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const [update, updateMutation] = useMutation(GQL.UPDATE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const loading = [getQuery, createMutation, updateMutation].find(item => item.loading);\n\n    const onSubmit = useCallback(\n        async (formData: ApiKey) => {\n            if (!formData.permissions || !formData.permissions.length) {\n                toast.showWarningToast({\n                    title: t`You must configure permissions before saving!`,\n                    duration: Infinity\n                });\n                return;\n            }\n\n            const isUpdate = formData.createdOn;\n            const [operation, args] = isUpdate\n                ? [update, { variables: { id: formData.id, data: pickDataForUpdate(formData) } }]\n                : [create, { variables: { data: pickDataForCreate(formData) } }];\n\n            const response = await operation(args);\n\n            const { error } = response.data.security.apiKey;\n            if (error) {\n                toast.showWarningToast({ title: error.message });\n                return;\n            }\n\n            const { id } = response.data.security.apiKey.data;\n\n            if (!isUpdate) {\n                goToRoute(Routes.ApiKeys.List, { id });\n            }\n\n            toast.showSuccessToast({ title: t`API key saved successfully.` });\n        },\n        [id]\n    );\n\n    const data: ApiKey = get(getQuery, \"data.security.apiKey.data\", {});\n\n    const showEmptyView = !newEntry && !loading && isEmpty(data);\n\n    if (showEmptyView) {\n        return (\n            <EmptyView\n                icon={<SettingsIcon />}\n                title={t`Click on the left side list to display API key details or create a...`}\n                action={\n                    <Button\n                        icon={<AddIcon />}\n                        text={t`New API Key`}\n                        data-testid=\"new-record-button\"\n                        onClick={() => {\n                            goToRoute(Routes.ApiKeys.List, { new: true });\n                        }}\n                    />\n                }\n            />\n        );\n    }\n\n    return (\n        <Form data={data} onSubmit={onSubmit}>\n            {({ data, form, Bind }) => {\n                return (\n                    <SimpleForm size={\"lg\"}>\n                        {loading && <OverlayLoader />}\n                        <SimpleFormHeader title={data.name ? data.name : \"Untitled\"} />\n                        <SimpleFormContent>\n                            <FormContent newEntry={newEntry} />\n                        </SimpleFormContent>\n                        <SimpleFormHeader title={\"Permissions\"} rounded={false}>\n                            <div className={\"flex justify-end\"}>\n                                <CopyPermissionsToJson permissions={data.permissions} />\n                            </div>\n                        </SimpleFormHeader>\n                        <SimpleFormContent>\n                            <Grid>\n                                <Grid.Column span={12}>\n                                    <Bind name={\"permissions\"} defaultValue={[]}>\n                                        {bind => <Permissions id={data.id || \"new\"} {...bind} />}\n                                    </Bind>\n                                </Grid.Column>\n                            </Grid>\n                        </SimpleFormContent>\n                        <SimpleFormFooter>\n                            <Button\n                                variant={\"secondary\"}\n                                text={t`Cancel`}\n                                onClick={() => {\n                                    goToRoute(Routes.ApiKeys.List);\n                                }}\n                                data-testid=\"sam.key.new.form.button.cancel\"\n                            />\n                            <Button\n                                text={t`Save`}\n                                data-testid=\"sam.key.new.form.button.save\"\n                                onClick={form.submit}\n                            />\n                        </SimpleFormFooter>\n                    </SimpleForm>\n                );\n            }}\n        </Form>\n    );\n};\n\ninterface FormContentProps {\n    newEntry: boolean;\n}\n\nconst FormContent = (props: FormContentProps) => {\n    const { newEntry } = props;\n    const form = useForm();\n    const toast = useToast();\n    const { generateSlug } = useGenerateSlug(form, \"name\", \"slug\");\n    const data = form.data;\n\n    return (\n        <Grid>\n            <Grid.Column span={6}>\n                <Bind name=\"name\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Name`}\n                        data-testid=\"sam.key.new.form.name\"\n                        onBlur={generateSlug}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={6}>\n                <Bind name=\"slug\" validators={validation.create(\"required\")}>\n                    <Input\n                        label={t`Slug`}\n                        data-testid=\"sam.key.new.form.name\"\n                        disabled={!newEntry}\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <Bind name=\"description\" validators={validation.create(\"required\")}>\n                    <Textarea\n                        size={\"lg\"}\n                        label={t`Description`}\n                        rows={4}\n                        data-testid=\"sam.key.new.form.description\"\n                    />\n                </Bind>\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <div>\n                    <Label text={t`Token`} />\n                    {data.token ? (\n                        <div\n                            className={\n                                \"py-sm pl-sm-extra pr-xs rounded-md mt-xs bg-neutral-disabled flex justify-between items-center\"\n                            }\n                        >\n                            <div>{data.token}</div>\n                            <CopyButton\n                                variant={\"ghost\"}\n                                value={data.token}\n                                onCopy={() => {\n                                    toast.showSuccessToast({ title: \"Successfully copied!\" });\n                                }}\n                            />\n                        </div>\n                    ) : (\n                        <Alert className={\"mt-xs\"}>\n                            {\"Your token will be shown once you submit the form.\"}\n                        </Alert>\n                    )}\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n\ninterface CopyPermissionsToJsonProps {\n    permissions: GenericRecord[];\n}\n\nconst CopyPermissionsToJson = ({ permissions }: CopyPermissionsToJsonProps) => {\n    const toast = useToast();\n\n    return (\n        <Tooltip\n            content=\"Copy permissions as JSON\"\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<CopyIcon />}\n                    onClick={() => {\n                        navigator.clipboard.writeText(JSON.stringify(permissions, null, 2));\n                        toast.showToast({\n                            title: \"JSON data copied to clipboard.\",\n                            icon: <Icon icon={<PasteIcon />} label={\"Paste\"} />\n                        });\n                    }}\n                />\n            }\n        />\n    );\n};\n"],"names":["t","i18n","ApiKeyForm","id","newEntry","goToRoute","useRouter","toast","useToast","getQuery","useQuery","GQL","data","error","Routes","create","createMutation","useMutation","update","updateMutation","loading","item","onSubmit","useCallback","formData","Infinity","isUpdate","operation","args","pickDataForUpdate","pickDataForCreate","response","get","showEmptyView","isEmpty","EmptyView","SettingsIcon","Button","AddIcon","Form","form","Bind","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","FormContent","CopyPermissionsToJson","Grid","bind","Permissions","SimpleFormFooter","props","useForm","generateSlug","useGenerateSlug","validation","Input","Textarea","Label","CopyButton","Alert","permissions","Tooltip","IconButton","CopyIcon","navigator","JSON","Icon","PasteIcon"],"mappings":"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"}

package/ui/views/ApiKeys/ApiKeys.d.ts

@@ -1,8 +1,2 @@
 import * as React from "react";
-import { ApiKeysDataListProps } from "./ApiKeysDataList";
-import { ApiKeyFormProps } from "./ApiKeyForm";
-export interface ApiKeysProps {
-    listProps?: ApiKeysDataListProps;
-    formProps?: ApiKeyFormProps;
-}
-export declare const ApiKeys: React.FC<ApiKeysProps>;
+export declare const ApiKeys: () => React.JSX.Element;

package/ui/views/ApiKeys/ApiKeys.js

@@ -1,26 +1,17 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ApiKeys = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _SplitView = require("@webiny/app-admin/components/SplitView");
-
-var _ApiKeysDataList = require("./ApiKeysDataList");
-
-var _ApiKeyForm = require("./ApiKeyForm");
-
-var ApiKeys = function ApiKeys(_ref) {
-  var _ref$formProps = _ref.formProps,
-      formProps = _ref$formProps === void 0 ? {} : _ref$formProps,
-      _ref$listProps = _ref.listProps,
-      listProps = _ref$listProps === void 0 ? {} : _ref$listProps;
-  return /*#__PURE__*/React.createElement(_SplitView.SplitView, null, /*#__PURE__*/React.createElement(_SplitView.LeftPanel, null, /*#__PURE__*/React.createElement(_ApiKeysDataList.ApiKeysDataList, listProps)), /*#__PURE__*/React.createElement(_SplitView.RightPanel, null, /*#__PURE__*/React.createElement(_ApiKeyForm.ApiKeyForm, formProps)));
+import { LeftPanel, RightPanel, SplitView, useRoute } from "@webiny/app-admin";
+import { ApiKeysDataList } from "./ApiKeysDataList.js";
+import { ApiKeyForm } from "./ApiKeyForm.js";
+import { Routes } from "../../../routes.js";
+import * as __rspack_external_react from "react";
+const ApiKeys = ()=>{
+    const { route } = useRoute(Routes.ApiKeys.List);
+    return /*#__PURE__*/ __rspack_external_react.createElement(SplitView, null, /*#__PURE__*/ __rspack_external_react.createElement(LeftPanel, null, /*#__PURE__*/ __rspack_external_react.createElement(ApiKeysDataList, {
+        activeId: route.params.id
+    })), /*#__PURE__*/ __rspack_external_react.createElement(RightPanel, null, /*#__PURE__*/ __rspack_external_react.createElement(ApiKeyForm, {
+        newEntry: true === route.params.new,
+        id: route.params.id
+    })));
 };
+export { ApiKeys };
 
-exports.ApiKeys = ApiKeys;
+//# sourceMappingURL=ApiKeys.js.map

package/ui/views/ApiKeys/ApiKeys.js.map

@@ -1 +1 @@
-{"version":3,"names":["ApiKeys","formProps","listProps"],"sources":["ApiKeys.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { SplitView, LeftPanel, RightPanel } from \"@webiny/app-admin/components/SplitView\";\nimport { ApiKeysDataList, ApiKeysDataListProps } from \"./ApiKeysDataList\";\nimport { ApiKeyForm, ApiKeyFormProps } from \"./ApiKeyForm\";\n\nexport interface ApiKeysProps {\n    listProps?: ApiKeysDataListProps;\n    formProps?: ApiKeyFormProps;\n}\nexport const ApiKeys: React.FC<ApiKeysProps> = ({ formProps = {}, listProps = {} }) => {\n    return (\n        <SplitView>\n            <LeftPanel>\n                <ApiKeysDataList {...listProps} />\n            </LeftPanel>\n            <RightPanel>\n                <ApiKeyForm {...formProps} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,OAAwC;EAAA,0BAArCC,SAAqC;EAAA,IAArCA,SAAqC,+BAAzB,EAAyB;EAAA,0BAArBC,SAAqB;EAAA,IAArBA,SAAqB,+BAAT,EAAS;EACnF,oBACI,oBAAC,oBAAD,qBACI,oBAAC,oBAAD,qBACI,oBAAC,gCAAD,EAAqBA,SAArB,CADJ,CADJ,eAII,oBAAC,qBAAD,qBACI,oBAAC,sBAAD,EAAgBD,SAAhB,CADJ,CAJJ,CADJ;AAUH,CAXM"}
+{"version":3,"file":"ui/views/ApiKeys/ApiKeys.js","sources":["../../../../src/ui/views/ApiKeys/ApiKeys.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRoute, SplitView, LeftPanel, RightPanel } from \"@webiny/app-admin\";\nimport { ApiKeysDataList } from \"./ApiKeysDataList.js\";\nimport { ApiKeyForm } from \"./ApiKeyForm.js\";\nimport { Routes } from \"~/routes.js\";\n\nexport const ApiKeys = () => {\n    const { route } = useRoute(Routes.ApiKeys.List);\n\n    return (\n        <SplitView>\n            <LeftPanel>\n                <ApiKeysDataList activeId={route.params.id} />\n            </LeftPanel>\n            <RightPanel>\n                <ApiKeyForm newEntry={route.params.new === true} id={route.params.id} />\n            </RightPanel>\n        </SplitView>\n    );\n};\n"],"names":["ApiKeys","route","useRoute","Routes","SplitView","LeftPanel","ApiKeysDataList","RightPanel","ApiKeyForm"],"mappings":";;;;;AAMO,MAAMA,UAAU;IACnB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,OAAO,CAAC,IAAI;IAE9C,OAAO,WAAP,GACI,sCAACC,WAASA,MAAAA,WAAAA,GACN,sCAACC,WAASA,MAAAA,WAAAA,GACN,sCAACC,iBAAeA;QAAC,UAAUL,MAAM,MAAM,CAAC,EAAE;uBAE9C,sCAACM,YAAUA,MAAAA,WAAAA,GACP,sCAACC,YAAUA;QAAC,UAAUP,AAAqB,SAArBA,MAAM,MAAM,CAAC,GAAG;QAAW,IAAIA,MAAM,MAAM,CAAC,EAAE;;AAIpF"}

package/ui/views/ApiKeys/ApiKeysDataList.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 export interface ApiKeysDataListProps {
-    [key: string]: any;
+    activeId: string | undefined;
 }
-export declare const ApiKeysDataList: React.FC<ApiKeysDataListProps>;
+export declare const ApiKeysDataList: ({ activeId }: ApiKeysDataListProps) => React.JSX.Element;

package/ui/views/ApiKeys/ApiKeysDataList.js

@@ -1,232 +1,140 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ApiKeysDataList = void 0;
-
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
-
-var _i18n = require("@webiny/app/i18n");
-
-var _List = require("@webiny/ui/List");
-
-var _Button = require("@webiny/ui/Button");
-
-var _icons = require("@webiny/ui/List/DataList/icons");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Select = require("@webiny/ui/Select");
-
-var _reactRouter = require("@webiny/react-router");
-
-var _SearchUI = _interopRequireDefault(require("@webiny/app-admin/components/SearchUI"));
-
-var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
-
-var _reactHooks = require("@apollo/react-hooks");
-
-var _useConfirmationDialog = require("@webiny/app-admin/hooks/useConfirmationDialog");
-
-var GQL = _interopRequireWildcard(require("./graphql"));
-
-var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
-
-var _filter24px = require("@webiny/app-admin/assets/icons/filter-24px.svg");
-
-var _utils = require("../utils");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-var t = _i18n.i18n.ns("app-security/admin/groups/data-list");
-
-var SORTERS = [{
-  label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Newest to oldest"]))),
-  sorter: "createdOn_DESC"
-}, {
-  label: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Oldest to newest"]))),
-  sorter: "createdOn_ASC"
-}, {
-  label: t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Name A-Z"]))),
-  sorter: "name_ASC"
-}, {
-  label: t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Name Z-A"]))),
-  sorter: "name_DESC"
-}];
-
-var ApiKeysDataList = function ApiKeysDataList() {
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filter = _useState2[0],
-      setFilter = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(SORTERS[0].sorter),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sort = _useState4[0],
-      setSort = _useState4[1];
-
-  var _useRouter = (0, _reactRouter.useRouter)(),
-      history = _useRouter.history,
-      location = _useRouter.location;
-
-  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-      showSnackbar = _useSnackbar.showSnackbar;
-
-  var _useConfirmationDialo = (0, _useConfirmationDialog.useConfirmationDialog)({
-    dataTestId: "default-data-list.delete-dialog"
-  }),
-      showConfirmation = _useConfirmationDialo.showConfirmation;
-
-  var filterAPIKey = (0, _react.useCallback)(function (_ref) {
-    var description = _ref.description,
-        name = _ref.name;
-    return description && description.toLowerCase().includes(filter) || name.toLowerCase().includes(filter);
-  }, [filter]);
-  var sortKeys = (0, _react.useCallback)(function (list) {
-    if (!sort) {
-      return list;
+import react, { useCallback, useMemo, useState } from "react";
+import orderBy from "lodash/orderBy.js";
+import { Button, DataList, DataListModal, DeleteIcon, Grid, List, Select, useToast } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { deserializeSorters } from "../utils.js";
+import { SearchUI, useConfirmationDialog, useRouter } from "@webiny/app-admin";
+import { Routes } from "../../../routes.js";
+import * as __rspack_external__graphql_js_d64db012 from "./graphql.js";
+const t = i18n.ns("app-security/admin/roles/data-list");
+const SORTERS = [
+    {
+        label: t`Newest to oldest`,
+        sorter: "createdOn_DESC"
+    },
+    {
+        label: t`Oldest to newest`,
+        sorter: "createdOn_ASC"
+    },
+    {
+        label: t`Name A-Z`,
+        sorter: "name_ASC"
+    },
+    {
+        label: t`Name Z-A`,
+        sorter: "name_DESC"
     }
-
-    var _deserializeSorters = (0, _utils.deserializeSorters)(sort),
-        _deserializeSorters2 = (0, _slicedToArray2.default)(_deserializeSorters, 2),
-        key = _deserializeSorters2[0],
-        value = _deserializeSorters2[1];
-
-    return (0, _orderBy.default)(list, [key], [value]);
-  }, [sort]);
-
-  var _useQuery = (0, _reactHooks.useQuery)(GQL.LIST_API_KEYS),
-      listResponse = _useQuery.data,
-      listLoading = _useQuery.loading;
-
-  var _useMutation = (0, _reactHooks.useMutation)(GQL.DELETE_API_KEY, {
-    refetchQueries: [{
-      query: GQL.LIST_API_KEYS
-    }]
-  }),
-      _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 2),
-      deleteIt = _useMutation2[0],
-      deleteLoading = _useMutation2[1].loading;
-
-  var data = listLoading && !listResponse ? [] : listResponse.security.apiKeys.data;
-  var id = new URLSearchParams(location.search).get("id");
-  var deleteItem = (0, _react.useCallback)(function (item) {
-    showConfirmation( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-      var _yield$deleteIt, data, error;
-
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return deleteIt({
+];
+const ApiKeysDataList = ({ activeId })=>{
+    const { goToRoute } = useRouter();
+    const [filter, setFilter] = useState("");
+    const [sort, setSort] = useState(SORTERS[0].sorter);
+    const toast = useToast();
+    const { showConfirmation } = useConfirmationDialog({
+        dataTestId: "default-data-list.delete-dialog"
+    });
+    const filterAPIKey = useCallback(({ description, name })=>description && description.toLowerCase().includes(filter) || name.toLowerCase().includes(filter), [
+        filter
+    ]);
+    const sortKeys = useCallback((list)=>{
+        if (!sort) return list;
+        const [key, value] = deserializeSorters(sort);
+        return orderBy(list, [
+            key
+        ], [
+            value
+        ]);
+    }, [
+        sort
+    ]);
+    const { data: listResponse, loading: listLoading } = useQuery(__rspack_external__graphql_js_d64db012.LIST_API_KEYS);
+    const [deleteIt, { loading: deleteLoading }] = useMutation(__rspack_external__graphql_js_d64db012.DELETE_API_KEY, {
+        refetchQueries: [
+            {
+                query: __rspack_external__graphql_js_d64db012.LIST_API_KEYS
+            }
+        ]
+    });
+    const data = listLoading && !listResponse ? [] : listResponse?.security.apiKeys.data || [];
+    const deleteItem = useCallback((item)=>{
+        showConfirmation(async ()=>{
+            const { data } = await deleteIt({
                 variables: item
-              });
-
-            case 2:
-              _yield$deleteIt = _context.sent;
-              data = _yield$deleteIt.data;
-              error = data.security.deleteApiKey.error;
-
-              if (!error) {
-                _context.next = 7;
-                break;
-              }
-
-              return _context.abrupt("return", showSnackbar(error.message));
-
-            case 7:
-              showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Api key \"{id}\" deleted."])))({
-                id: item.id
-              }));
-
-              if (id === item.id) {
-                history.push("/access-management/api-keys");
-              }
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-  }, [id]);
-  var groupsDataListModalOverlay = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(_List.DataListModalOverlay, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12
-    }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
-      value: sort,
-      onChange: setSort,
-      label: t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Sort by"])))
-    }, SORTERS.map(function (_ref3) {
-      var label = _ref3.label,
-          sorter = _ref3.sorter;
-      return /*#__PURE__*/_react.default.createElement("option", {
-        key: label,
-        value: sorter
-      }, label);
-    })))));
-  }, [sort]);
-  var filteredData = filter === "" ? data : data.filter(filterAPIKey);
-  var list = sortKeys(filteredData);
-  return /*#__PURE__*/_react.default.createElement(_List.DataList, {
-    title: t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["API Keys"]))),
-    actions: /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-      "data-testid": "new-record-button",
-      onClick: function onClick() {
-        return history.push("/access-management/api-keys?new=true");
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
-      icon: /*#__PURE__*/_react.default.createElement(_add18px.ReactComponent, null)
-    }), " ", t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["New API Key"])))),
-    data: list,
-    loading: listLoading || deleteLoading,
-    search: /*#__PURE__*/_react.default.createElement(_SearchUI.default, {
-      value: filter,
-      onChange: setFilter,
-      inputPlaceholder: t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Search API keys"])))
-    }),
-    modalOverlay: groupsDataListModalOverlay,
-    modalOverlayAction: /*#__PURE__*/_react.default.createElement(_List.DataListModalOverlayAction, {
-      icon: /*#__PURE__*/_react.default.createElement(_filter24px.ReactComponent, null),
-      "data-testid": "default-data-list.filter"
-    })
-  }, function (_ref4) {
-    var data = _ref4.data;
-    return /*#__PURE__*/_react.default.createElement(_List.ScrollList, {
-      "data-testid": "default-data-list"
-    }, data.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
-        key: item.id,
-        selected: item.id === id
-      }, /*#__PURE__*/_react.default.createElement(_List.ListItemText, {
-        onClick: function onClick() {
-          return history.push("/access-management/api-keys?id=".concat(item.id));
-        }
-      }, item.name, /*#__PURE__*/_react.default.createElement(_List.ListItemTextSecondary, null, item.description)), /*#__PURE__*/_react.default.createElement(_List.ListItemMeta, null, /*#__PURE__*/_react.default.createElement(_List.ListActions, null, /*#__PURE__*/_react.default.createElement(_icons.DeleteIcon, {
-        onClick: function onClick() {
-          return deleteItem(item);
-        },
-        "data-testid": "default-data-list.delete"
-      }))));
-    }));
-  });
+            });
+            const { error } = data.security.deleteApiKey;
+            if (error) return void toast.showWarningToast({
+                title: error.message
+            });
+            toast.showSuccessToast({
+                title: t`Api key "{name}" was deleted.`({
+                    name: item.name
+                })
+            });
+            if (activeId === item.id) goToRoute(Routes.ApiKeys.List);
+        });
+    }, [
+        activeId
+    ]);
+    const rolesDataListModalOverlay = useMemo(()=>/*#__PURE__*/ react.createElement(DataListModal.Content, null, /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Select, {
+            value: sort,
+            onChange: setSort,
+            label: t`Sort by`,
+            options: SORTERS.map(({ label, sorter: value })=>({
+                    label,
+                    value
+                }))
+        })))), [
+        sort
+    ]);
+    const filteredData = "" === filter ? data : data.filter(filterAPIKey);
+    const list = sortKeys(filteredData);
+    return /*#__PURE__*/ react.createElement(DataList, {
+        title: t`API keys`,
+        actions: /*#__PURE__*/ react.createElement(Button, {
+            text: t`New`,
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            className: "ml-xs",
+            "data-testid": "new-record-button",
+            onClick: ()=>{
+                goToRoute(Routes.ApiKeys.List, {
+                    new: true
+                });
+            }
+        }),
+        data: list,
+        loading: listLoading || deleteLoading,
+        search: /*#__PURE__*/ react.createElement(SearchUI, {
+            value: filter,
+            onChange: setFilter,
+            inputPlaceholder: t`Search API keys...`
+        }),
+        modalOverlay: rolesDataListModalOverlay,
+        modalOverlayAction: /*#__PURE__*/ react.createElement(DataListModal.Trigger, {
+            "data-testid": "default-data-list.filter"
+        })
+    }, ({ data })=>/*#__PURE__*/ react.createElement(List, {
+            "data-testid": "default-data-list"
+        }, data.map((item)=>/*#__PURE__*/ react.createElement(List.Item, {
+                key: item.id,
+                selected: item.id === activeId,
+                title: item.name,
+                description: item.description,
+                onClick: ()=>{
+                    goToRoute(Routes.ApiKeys.List, {
+                        id: item.id
+                    });
+                },
+                actions: /*#__PURE__*/ react.createElement(DeleteIcon, {
+                    onClick: ()=>deleteItem(item),
+                    "data-testid": "default-data-list.delete"
+                })
+            }))));
 };
+export { ApiKeysDataList };
 
-exports.ApiKeysDataList = ApiKeysDataList;
+//# sourceMappingURL=ApiKeysDataList.js.map

package/ui/views/ApiKeys/ApiKeysDataList.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","SORTERS","label","sorter","ApiKeysDataList","useState","filter","setFilter","sort","setSort","useRouter","history","location","useSnackbar","showSnackbar","useConfirmationDialog","dataTestId","showConfirmation","filterAPIKey","useCallback","description","name","toLowerCase","includes","sortKeys","list","deserializeSorters","key","value","orderBy","useQuery","GQL","LIST_API_KEYS","listResponse","data","listLoading","loading","useMutation","DELETE_API_KEY","refetchQueries","query","deleteIt","deleteLoading","security","apiKeys","id","URLSearchParams","search","get","deleteItem","item","variables","error","deleteApiKey","message","push","groupsDataListModalOverlay","useMemo","map","filteredData"],"sources":["ApiKeysDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    DataList,\n    ScrollList,\n    ListItem,\n    ListItemText,\n    ListItemTextSecondary,\n    ListItemMeta,\n    ListActions,\n    DataListModalOverlayAction,\n    DataListModalOverlay\n} from \"@webiny/ui/List\";\nimport { ButtonIcon, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { DeleteIcon } from \"@webiny/ui/List/DataList/icons\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Select } from \"@webiny/ui/Select\";\nimport { useRouter } from \"@webiny/react-router\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport { useConfirmationDialog } from \"@webiny/app-admin/hooks/useConfirmationDialog\";\nimport * as GQL from \"./graphql\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport { ReactComponent as FilterIcon } from \"@webiny/app-admin/assets/icons/filter-24px.svg\";\nimport { deserializeSorters } from \"../utils\";\nimport { ApiKey } from \"~/types\";\n\nconst t = i18n.ns(\"app-security/admin/groups/data-list\");\n\nconst SORTERS = [\n    {\n        label: t`Newest to oldest`,\n        sorter: \"createdOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorter: \"createdOn_ASC\"\n    },\n    {\n        label: t`Name A-Z`,\n        sorter: \"name_ASC\"\n    },\n    {\n        label: t`Name Z-A`,\n        sorter: \"name_DESC\"\n    }\n];\nexport interface ApiKeysDataListProps {\n    // TODO @ts-refactor delete and go up the tree and sort it out\n    [key: string]: any;\n}\nexport const ApiKeysDataList: React.FC<ApiKeysDataListProps> = () => {\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorter);\n    const { history, location } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\"\n    });\n\n    const filterAPIKey = useCallback(\n        ({ description, name }) => {\n            return (\n                (description && description.toLowerCase().includes(filter)) ||\n                name.toLowerCase().includes(filter)\n            );\n        },\n        [filter]\n    );\n\n    const sortKeys = useCallback(\n        list => {\n            if (!sort) {\n                return list;\n            }\n            const [key, value] = deserializeSorters(sort);\n            return orderBy(list, [key], [value]);\n        },\n        [sort]\n    );\n\n    const { data: listResponse, loading: listLoading } = useQuery(GQL.LIST_API_KEYS);\n\n    const [deleteIt, { loading: deleteLoading }] = useMutation(GQL.DELETE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const data = listLoading && !listResponse ? [] : listResponse.security.apiKeys.data;\n    const id = new URLSearchParams(location.search).get(\"id\");\n\n    const deleteItem = useCallback(\n        item => {\n            showConfirmation(async () => {\n                const { data } = await deleteIt({\n                    variables: item\n                });\n\n                const { error } = data.security.deleteApiKey;\n                if (error) {\n                    return showSnackbar(error.message);\n                }\n\n                showSnackbar(t`Api key \"{id}\" deleted.`({ id: item.id }));\n\n                if (id === item.id) {\n                    history.push(`/access-management/api-keys`);\n                }\n            });\n        },\n        [id]\n    );\n\n    const groupsDataListModalOverlay = useMemo(\n        () => (\n            <DataListModalOverlay>\n                <Grid>\n                    <Cell span={12}>\n                        <Select value={sort} onChange={setSort} label={t`Sort by`}>\n                            {SORTERS.map(({ label, sorter }) => {\n                                return (\n                                    <option key={label} value={sorter}>\n                                        {label}\n                                    </option>\n                                );\n                            })}\n                        </Select>\n                    </Cell>\n                </Grid>\n            </DataListModalOverlay>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? data : data.filter(filterAPIKey);\n    const list = sortKeys(filteredData);\n\n    return (\n        <DataList\n            title={t`API Keys`}\n            actions={\n                <ButtonSecondary\n                    data-testid=\"new-record-button\"\n                    onClick={() => history.push(\"/access-management/api-keys?new=true\")}\n                >\n                    <ButtonIcon icon={<AddIcon />} /> {t`New API Key`}\n                </ButtonSecondary>\n            }\n            data={list}\n            loading={listLoading || deleteLoading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search API keys`}\n                />\n            }\n            modalOverlay={groupsDataListModalOverlay}\n            modalOverlayAction={\n                <DataListModalOverlayAction\n                    icon={<FilterIcon />}\n                    data-testid={\"default-data-list.filter\"}\n                />\n            }\n        >\n            {({ data }: { data: ApiKey[] }) => (\n                <ScrollList data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <ListItem key={item.id} selected={item.id === id}>\n                            <ListItemText\n                                onClick={() =>\n                                    history.push(`/access-management/api-keys?id=${item.id}`)\n                                }\n                            >\n                                {item.name}\n                                <ListItemTextSecondary>{item.description}</ListItemTextSecondary>\n                            </ListItemText>\n\n                            <ListItemMeta>\n                                <ListActions>\n                                    <DeleteIcon\n                                        onClick={() => deleteItem(item)}\n                                        data-testid={\"default-data-list.delete\"}\n                                    />\n                                </ListActions>\n                            </ListItemMeta>\n                        </ListItem>\n                    ))}\n                </ScrollList>\n            )}\n        </DataList>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ui/views/ApiKeys/ApiKeysDataList.js","sources":["../../../../src/ui/views/ApiKeys/ApiKeysDataList.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { Button, Grid, Select, useToast } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { List, DataList, DataListModal, DeleteIcon } from \"@webiny/admin-ui\";\n\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport * as GQL from \"./graphql.js\";\nimport { deserializeSorters } from \"../utils.js\";\nimport type { ApiKey } from \"~/types.js\";\nimport { useConfirmationDialog, useRouter, SearchUI } from \"@webiny/app-admin\";\nimport { Routes } from \"~/routes.js\";\n\nconst t = i18n.ns(\"app-security/admin/roles/data-list\");\n\nconst SORTERS = [\n    {\n        label: t`Newest to oldest`,\n        sorter: \"createdOn_DESC\"\n    },\n    {\n        label: t`Oldest to newest`,\n        sorter: \"createdOn_ASC\"\n    },\n    {\n        label: t`Name A-Z`,\n        sorter: \"name_ASC\"\n    },\n    {\n        label: t`Name Z-A`,\n        sorter: \"name_DESC\"\n    }\n];\nexport interface ApiKeysDataListProps {\n    activeId: string | undefined;\n}\n\nexport const ApiKeysDataList = ({ activeId }: ApiKeysDataListProps) => {\n    const { goToRoute } = useRouter();\n    const [filter, setFilter] = useState(\"\");\n    const [sort, setSort] = useState<string>(SORTERS[0].sorter);\n    const toast = useToast();\n    const { showConfirmation } = useConfirmationDialog({\n        dataTestId: \"default-data-list.delete-dialog\"\n    });\n\n    const filterAPIKey = useCallback(\n        ({ description, name }: ApiKey) => {\n            return (\n                (description && description.toLowerCase().includes(filter)) ||\n                name.toLowerCase().includes(filter)\n            );\n        },\n        [filter]\n    );\n\n    const sortKeys = useCallback(\n        (list: ApiKey[]) => {\n            if (!sort) {\n                return list;\n            }\n            const [key, value] = deserializeSorters(sort);\n            return orderBy(list, [key], [value]);\n        },\n        [sort]\n    );\n\n    const { data: listResponse, loading: listLoading } = useQuery<GQL.ListApiKeysResponse>(\n        GQL.LIST_API_KEYS\n    );\n\n    const [deleteIt, { loading: deleteLoading }] = useMutation(GQL.DELETE_API_KEY, {\n        refetchQueries: [{ query: GQL.LIST_API_KEYS }]\n    });\n\n    const data = listLoading && !listResponse ? [] : listResponse?.security.apiKeys.data || [];\n\n    const deleteItem = useCallback(\n        (item: ApiKey) => {\n            showConfirmation(async () => {\n                const { data } = await deleteIt({\n                    variables: item\n                });\n\n                const { error } = data.security.deleteApiKey;\n                if (error) {\n                    toast.showWarningToast({\n                        title: error.message\n                    });\n                    return;\n                }\n\n                toast.showSuccessToast({\n                    title: t`Api key \"{name}\" was deleted.`({ name: item.name })\n                });\n\n                if (activeId === item.id) {\n                    goToRoute(Routes.ApiKeys.List);\n                }\n            });\n        },\n        [activeId]\n    );\n\n    const rolesDataListModalOverlay = useMemo(\n        () => (\n            <DataListModal.Content>\n                <Grid>\n                    <Grid.Column span={12}>\n                        <Select\n                            value={sort}\n                            onChange={setSort}\n                            label={t`Sort by`}\n                            options={SORTERS.map(({ label, sorter: value }) => {\n                                return {\n                                    label,\n                                    value\n                                };\n                            })}\n                        />\n                    </Grid.Column>\n                </Grid>\n            </DataListModal.Content>\n        ),\n        [sort]\n    );\n\n    const filteredData = filter === \"\" ? data : data.filter(filterAPIKey);\n    const list = sortKeys(filteredData);\n\n    return (\n        <DataList\n            title={t`API keys`}\n            actions={\n                <Button\n                    text={t`New`}\n                    icon={<AddIcon />}\n                    size={\"sm\"}\n                    className={\"ml-xs\"}\n                    data-testid=\"new-record-button\"\n                    onClick={() => {\n                        goToRoute(Routes.ApiKeys.List, { new: true });\n                    }}\n                />\n            }\n            data={list}\n            loading={listLoading || deleteLoading}\n            search={\n                <SearchUI\n                    value={filter}\n                    onChange={setFilter}\n                    inputPlaceholder={t`Search API keys...`}\n                />\n            }\n            modalOverlay={rolesDataListModalOverlay}\n            modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n        >\n            {({ data }: { data: ApiKey[] }) => (\n                <List data-testid=\"default-data-list\">\n                    {data.map(item => (\n                        <List.Item\n                            key={item.id}\n                            selected={item.id === activeId}\n                            title={item.name}\n                            description={item.description}\n                            onClick={() => {\n                                goToRoute(Routes.ApiKeys.List, { id: item.id });\n                            }}\n                            actions={\n                                <DeleteIcon\n                                    onClick={() => deleteItem(item)}\n                                    data-testid={\"default-data-list.delete\"}\n                                />\n                            }\n                        />\n                    ))}\n                </List>\n            )}\n        </DataList>\n    );\n};\n"],"names":["t","i18n","SORTERS","ApiKeysDataList","activeId","goToRoute","useRouter","filter","setFilter","useState","sort","setSort","toast","useToast","showConfirmation","useConfirmationDialog","filterAPIKey","useCallback","description","name","sortKeys","list","key","value","deserializeSorters","orderBy","listResponse","listLoading","useQuery","GQL","deleteIt","deleteLoading","useMutation","data","deleteItem","item","error","Routes","rolesDataListModalOverlay","useMemo","DataListModal","Grid","Select","label","filteredData","DataList","Button","AddIcon","SearchUI","List","DeleteIcon"],"mappings":"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"}

package/ui/views/ApiKeys/graphql.d.ts

@@ -1,3 +1,11 @@
+import type { ApiKey } from "../../../types.js";
+export interface ListApiKeysResponse {
+    security: {
+        apiKeys: {
+            data: ApiKey[];
+        };
+    };
+}
 export declare const LIST_API_KEYS: import("graphql").DocumentNode;
 export declare const READ_API_KEY: import("graphql").DocumentNode;
 export declare const CREATE_API_KEY: import("graphql").DocumentNode;