@bigbinary/neeto-api-keys-frontend 2.2.8 → 2.3.0

package/README.md

@@ -128,6 +128,7 @@ for easily finding specific API keys.
 - `headerProps`: Props for configuring the header section of the component.
 - `titleHelpPopoverProps`: Props for configuring the help popover in the title
   section.
+- `zapierIntegrableType`  : If the host app has Zapier integration, the table will display Zapier keys only if the integrable type is "Organization." This prop **is required** if the integrable type is not "Organization" and is scoped to another entity.
 
 ##### Usage
 

package/app/javascript/src/translations/en.json

@@ -3,7 +3,10 @@
     "common": {
       "apiKey_one": "API key",
       "apiKey_other": "API keys",
-      "never": "Never"
+      "never": "Never",
+      "general": "General",
+      "zapier": "Zapier",
+      "type": "Type"
     },
     "headers": {
       "createApiKey": "Add new API key",
@@ -18,7 +21,8 @@
         "deleteApiKey": "Delete API key?"
       },
       "descriptions": {
-        "deleteApiKey": "You are permanently deleting the API key named <strong>{{name}}</strong>. This cannot be undone."
+        "deleteApiKey": "You are permanently deleting the API key named <strong>{{name}}</strong>. This cannot be undone.",
+        "deleteZapierApiKey": "You are permanently deleting the API Key <strong>{{name}}</strong>. All associated Zaps with this API Key will be turned off. This can't be undone."
       }
     },
     "buttons": {
@@ -48,7 +52,8 @@
         "token": "API key",
         "expiresAt": "Expires at",
         "createdAt": "Created at",
-        "status": "Status"
+        "status": "Status",
+        "type": "Type"
       }
     },
     "fields": {

package/dist/ApiKeys.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect, useRef } from 'react';
 import { t } from 'i18next';
-import { isNotEmpty, isPresent, isNotPresent } from '@bigbinary/neeto-cist';
+import { isNotEmpty, isPresent, humanize, isNotPresent } from '@bigbinary/neeto-cist';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation, withT, withTitle, useQueryParams, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Header from '@bigbinary/neeto-molecules/Header';
@@ -15,11 +15,14 @@ import { getQueryParams, buildUrl, dateFormat, dayjs as dayjs$1 } from '@bigbina
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import dayjs from 'dayjs';
+import * as yup from 'yup';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import Pane from '@bigbinary/neetoui/Pane';
 import Typography from '@bigbinary/neetoui/Typography';
 import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
 import Input from '@bigbinary/neetoui/formik/Input';
+import Radio from '@bigbinary/neetoui/formik/Radio';
 import Checkbox from '@bigbinary/neetoui/formik/Checkbox';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { Field } from 'formik';
@@ -27,8 +30,6 @@ import NeetoUIDatePicker from '@bigbinary/neetoui/DatePicker';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Tag from '@bigbinary/neetoui/Tag';
-import dayjs from 'dayjs';
-import * as yup from 'yup';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
@@ -107,8 +108,12 @@ var update = function update(_ref) {
     apiKey: payload
   });
 };
-var destroy = function destroy(id) {
-  return axios["delete"]("".concat(API_KEYS_BASE_URL, "/").concat(id));
+var destroy = function destroy(_ref2) {
+  var id = _ref2.id,
+    params = _ref2.params;
+  return axios["delete"]("".concat(API_KEYS_BASE_URL, "/").concat(id), {
+    params: params
+  });
 };
 var apiKeysApi = {
   fetch: fetch,
@@ -160,10 +165,15 @@ var useDeleteApiKey = function useDeleteApiKey(onSuccess) {
   });
 };
 
+var API_KEY_TYPES = {
+  GENERAL: "general",
+  ZAPIER: "zapier"
+};
 var INITIAL_VALUES = {
   expiresAt: null,
   label: "",
-  hasNoExpiry: true
+  hasNoExpiry: true,
+  type: API_KEY_TYPES.GENERAL
 };
 var NEXT_DAY = dayjs().add(1, "day").startOf("day");
 var VALIDATION_SCHEMA = yup.object({
@@ -194,10 +204,12 @@ var formatExpiry = function formatExpiry(date) {
 };
 var getMenuItems = function getMenuItems(_ref) {
   var onEdit = _ref.onEdit,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    isEditVisible = _ref.isEditVisible;
   return [{
     key: MENU_ITEMS.EDIT,
     label: t("neetoApiKeys.buttons.edit"),
+    isVisible: isEditVisible,
     "data-cy": "api-key-edit-button",
     onClick: onEdit
   }, {
@@ -209,16 +221,18 @@ var getMenuItems = function getMenuItems(_ref) {
 };
 var buildColumnData = function buildColumnData(_ref2) {
   var handleDelete = _ref2.handleDelete,
-    handleEdit = _ref2.handleEdit;
-  return [{
+    handleEdit = _ref2.handleEdit,
+    isZapierAvailable = _ref2.isZapierAvailable;
+  var columns = [{
     title: t("neetoApiKeys.table.headers.label"),
     key: "label",
     dataIndex: "label",
-    width: 400,
+    width: 200,
     render: function render(label, apiKey) {
       return /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between space-x-3",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-cy": "api-keys-label-field",
           style: "body2",
           children: label
         }), /*#__PURE__*/jsx(MoreDropdown, {
@@ -231,7 +245,8 @@ var buildColumnData = function buildColumnData(_ref2) {
             },
             onDelete: function onDelete() {
               return handleDelete(apiKey);
-            }
+            },
+            isEditVisible: apiKey.type === API_KEY_TYPES.GENERAL
           })
         })]
       });
@@ -240,11 +255,12 @@ var buildColumnData = function buildColumnData(_ref2) {
     title: t("neetoApiKeys.table.headers.token"),
     key: "token",
     dataIndex: "token",
-    width: 400,
+    width: 300,
     render: function render(token) {
       return /*#__PURE__*/jsxs("div", {
         className: "flex items-center justify-between gap-x-3",
         children: [/*#__PURE__*/jsx(Typography, {
+          "data-cy": "api-keys-token-field",
           style: "body2",
           children: partlyHideToken(token)
         }), /*#__PURE__*/jsx(CopyToClipboardButton, {
@@ -271,11 +287,14 @@ var buildColumnData = function buildColumnData(_ref2) {
     title: t("neetoApiKeys.table.headers.expiresAt"),
     key: "expiresAt",
     dataIndex: "expiresAt",
-    width: 200,
+    width: 150,
     render: function render(expiresAt) {
-      return isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/jsx(Typography, {
-        style: "body2",
-        children: t("neetoApiKeys.common.never")
+      return /*#__PURE__*/jsx("span", {
+        "data-cy": "api-keys-expires-at-field",
+        children: isPresent(expiresAt) ? formatExpiry(expiresAt) : /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: t("neetoApiKeys.common.never")
+        })
       });
     }
   }, {
@@ -284,12 +303,30 @@ var buildColumnData = function buildColumnData(_ref2) {
     dataIndex: "createdAt",
     width: 200,
     render: function render(createdAt) {
-      return isPresent(createdAt) ? dateFormat.dateTime(createdAt) : /*#__PURE__*/jsx(Typography, {
-        style: "body2",
-        children: t("neetoApiKeys.common.never")
+      return /*#__PURE__*/jsx("span", {
+        "data-cy": "api-keys-created-at-field",
+        children: isPresent(createdAt) ? dateFormat.dateTime(createdAt) : /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: t("neetoApiKeys.common.never")
+        })
       });
     }
   }];
+  if (isZapierAvailable) {
+    columns.splice(2, 0, {
+      title: t("neetoApiKeys.table.headers.type"),
+      key: "type",
+      dataIndex: "type",
+      width: 144,
+      render: function render(type) {
+        return /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: humanize(type)
+        });
+      }
+    });
+  }
+  return columns;
 };
 var getStartOfTime = function getStartOfTime(time, unit) {
   return dayjs$1(time).startOf(unit);
@@ -339,7 +376,11 @@ var Form = withT(function (_ref) {
     isSubmitting = _ref.isSubmitting,
     onClose = _ref.onClose,
     onSubmit = _ref.onSubmit,
-    initialFocusRef = _ref.initialFocusRef;
+    initialFocusRef = _ref.initialFocusRef,
+    _ref$isEdit = _ref.isEdit,
+    isEdit = _ref$isEdit === void 0 ? false : _ref$isEdit,
+    _ref$isZapierAvailabl = _ref.isZapierAvailable,
+    isZapierAvailable = _ref$isZapierAvailabl === void 0 ? false : _ref$isZapierAvailabl;
   return /*#__PURE__*/jsx(NeetoUIForm, {
     formikProps: {
       validationSchema: VALIDATION_SCHEMA,
@@ -351,7 +392,8 @@ var Form = withT(function (_ref) {
         _ref2$values = _ref2.values,
         _ref2$values2 = _ref2$values === void 0 ? {} : _ref2$values,
         hasNoExpiry = _ref2$values2.hasNoExpiry,
-        expiresAt = _ref2$values2.expiresAt;
+        expiresAt = _ref2$values2.expiresAt,
+        type = _ref2$values2.type;
       return /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Pane.Body, {
           children: /*#__PURE__*/jsxs("div", {
@@ -363,23 +405,37 @@ var Form = withT(function (_ref) {
               placeholder: t("neetoApiKeys.placeholders.label"),
               ref: initialFocusRef
             }), /*#__PURE__*/jsxs("div", {
-              className: "space-y-2",
-              children: [!hasNoExpiry && /*#__PURE__*/jsx(DatePicker, {
-                defaultValue: expiresAt,
-                disabledDate: function disabledDate(date) {
-                  return date < NEXT_DAY;
-                },
-                label: t("neetoApiKeys.fields.expiryDate"),
-                name: "expiresAt",
-                placeholder: t("neetoApiKeys.placeholders.selectExpiryDate")
-              }), /*#__PURE__*/jsx(Checkbox, {
-                checked: hasNoExpiry,
-                label: t("neetoApiKeys.fields.neverExpire"),
-                name: "hasNoExpiry",
-                onChange: function onChange() {
-                  setFieldValue("expiresAt", null);
-                  setFieldValue("hasNoExpiry", !hasNoExpiry);
-                }
+              className: "space-y-4",
+              children: [!isEdit && isZapierAvailable && /*#__PURE__*/jsxs(Radio, {
+                label: t("neetoApiKeys.common.type"),
+                name: "type",
+                children: [/*#__PURE__*/jsx(Radio.Item, {
+                  label: t("neetoApiKeys.common.general"),
+                  name: "type",
+                  value: API_KEY_TYPES.GENERAL
+                }), /*#__PURE__*/jsx(Radio.Item, {
+                  label: t("neetoApiKeys.common.zapier"),
+                  name: "type",
+                  value: API_KEY_TYPES.ZAPIER
+                })]
+              }), type === API_KEY_TYPES.GENERAL && /*#__PURE__*/jsxs(Fragment, {
+                children: [!hasNoExpiry && /*#__PURE__*/jsx(DatePicker, {
+                  defaultValue: expiresAt,
+                  disabledDate: function disabledDate(date) {
+                    return date < NEXT_DAY;
+                  },
+                  label: t("neetoApiKeys.fields.expiryDate"),
+                  name: "expiresAt",
+                  placeholder: t("neetoApiKeys.placeholders.selectExpiryDate")
+                }), /*#__PURE__*/jsx(Checkbox, {
+                  checked: hasNoExpiry,
+                  label: t("neetoApiKeys.fields.neverExpire"),
+                  name: "hasNoExpiry",
+                  onChange: function onChange() {
+                    setFieldValue("expiresAt", null);
+                    setFieldValue("hasNoExpiry", !hasNoExpiry);
+                  }
+                })]
               })]
             })]
           })
@@ -398,7 +454,9 @@ var Form = withT(function (_ref) {
 
 var Create = function Create(_ref) {
   var onClose = _ref.onClose,
-    isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen,
+    _ref$isZapierAvailabl = _ref.isZapierAvailable,
+    isZapierAvailable = _ref$isZapierAvailabl === void 0 ? false : _ref$isZapierAvailabl;
   var initialFocusRef = useRef(null);
   var _useCreateApiKey = useCreateApiKey(onClose),
     createApiKey = _useCreateApiKey.mutate,
@@ -423,6 +481,7 @@ var Create = function Create(_ref) {
       })
     }), /*#__PURE__*/jsx(Form, {
       initialFocusRef: initialFocusRef,
+      isZapierAvailable: isZapierAvailable,
       onClose: onClose,
       isSubmitting: isCreating,
       onSubmit: createApiKey
@@ -470,6 +529,7 @@ var Update = function Update(_ref) {
       initialFocusRef: initialFocusRef,
       initialValues: initialValues,
       onClose: onClose,
+      isEdit: true,
       isSubmitting: isUpdating,
       onSubmit: handleUpdate
     })]
@@ -488,7 +548,8 @@ var Table = function Table(_ref) {
     data = _ref.data,
     isLoading = _ref.isLoading,
     isFetching = _ref.isFetching,
-    handlePageChange = _ref.handlePageChange;
+    handlePageChange = _ref.handlePageChange,
+    isZapierAvailable = _ref.isZapierAvailable;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   if (isLoading) return /*#__PURE__*/jsx(PageLoader, {});
@@ -522,15 +583,16 @@ var Table = function Table(_ref) {
     children: /*#__PURE__*/jsx(NeetoUITable, {
       handlePageChange: handlePageChange,
       fixedHeight: true,
-      columnData: buildColumnData({
-        handleDelete: handleDelete,
-        handleEdit: handleEdit
-      }),
       currentPageNumber: currentPage,
       defaultPageSize: DEFAULT_PAGE_SIZE,
       loading: isFetching,
       rowData: data === null || data === void 0 ? void 0 : data.apiKeys,
-      totalCount: data === null || data === void 0 ? void 0 : data.totalCount
+      totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
+      columnData: buildColumnData({
+        handleDelete: handleDelete,
+        handleEdit: handleEdit,
+        isZapierAvailable: isZapierAvailable
+      })
     })
   });
 };
@@ -540,7 +602,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ApiKeys = function ApiKeys(_ref) {
   var noDataProps = _ref.noDataProps,
     headerProps = _ref.headerProps,
-    titleHelpPopoverProps = _ref.titleHelpPopoverProps;
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps,
+    _ref$zapierIntegrable = _ref.zapierIntegrableType,
+    zapierIntegrableType = _ref$zapierIntegrable === void 0 ? "Organization" : _ref$zapierIntegrable;
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     apiKeyToBeDeleted = _useState2[0],
@@ -576,7 +640,9 @@ var ApiKeys = function ApiKeys(_ref) {
     pageSize: DEFAULT_PAGE_SIZE
   };
   var _useFetchApiKeys = useFetchApiKeys({
-      params: queryParams
+      params: _objectSpread(_objectSpread({}, queryParams), {}, {
+        zapierIntegrableType: zapierIntegrableType
+      })
     }),
     data = _useFetchApiKeys.data,
     isLoading = _useFetchApiKeys.isLoading,
@@ -586,6 +652,9 @@ var ApiKeys = function ApiKeys(_ref) {
     if (!data) return;
     onFetchSuccess(data);
   }, [data]);
+  var _ref2 = data || {},
+    _ref2$isZapierAvailab = _ref2.isZapierAvailable,
+    isZapierAvailable = _ref2$isZapierAvailab === void 0 ? false : _ref2$isZapierAvailab;
   return /*#__PURE__*/jsxs("div", {
     className: "flex h-full w-full flex-col",
     children: [/*#__PURE__*/jsx(Header, _objectSpread({
@@ -612,6 +681,7 @@ var ApiKeys = function ApiKeys(_ref) {
       handlePageChange: handlePageChange,
       isFetching: isFetching,
       isLoading: isLoading,
+      isZapierAvailable: isZapierAvailable,
       noDataProps: noDataProps,
       setIsCreatePaneOpen: setIsCreatePaneOpen,
       handleDelete: setApiKeyToBeDeleted,
@@ -625,18 +695,24 @@ var ApiKeys = function ApiKeys(_ref) {
         components: {
           bold: /*#__PURE__*/jsx("strong", {})
         },
-        i18nKey: "neetoApiKeys.alert.descriptions.deleteApiKey",
         values: {
           name: apiKeyToBeDeleted.label
-        }
+        },
+        i18nKey: apiKeyToBeDeleted.type === API_KEY_TYPES.ZAPIER ? "neetoApiKeys.alert.descriptions.deleteZapierApiKey" : "neetoApiKeys.alert.descriptions.deleteApiKey"
       }),
       onClose: function onClose() {
         return setApiKeyToBeDeleted({});
       },
       onSubmit: function onSubmit() {
-        return deleteApiKey(apiKeyToBeDeleted.id);
+        return deleteApiKey({
+          id: apiKeyToBeDeleted.id,
+          params: {
+            type: apiKeyToBeDeleted.type
+          }
+        });
       }
     }), /*#__PURE__*/jsx(Create, {
+      isZapierAvailable: isZapierAvailable,
       isOpen: isCreatePaneOpen,
       onClose: function onClose() {
         return setIsCreatePaneOpen(false);