@oneuptime/common 11.0.0 → 11.0.1

package/UI/Components/ModelTable/ModelTable.tsx

@@ -1,15 +1,35 @@
 import ModelAPI, { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
+import API from "../../Utils/API/API";
+import ModelImportExportUtil, {
+  ImportResult,
+} from "../../Utils/ModelImportExport";
+import PermissionUtil from "../../Utils/Permission";
+import User from "../../Utils/User";
 import { FormType, ModelField } from "../Forms/ModelForm";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
-import BaseModelTable, { BaseTableProps, ModalType } from "./BaseModelTable";
+import BaseModelTable, {
+  BaseTableProps,
+  BulkActionProps,
+  ModalType,
+} from "./BaseModelTable";
+import {
+  BulkActionButtonSchema,
+  BulkActionFailed,
+  BulkActionOnClickProps,
+} from "../BulkUpdate/BulkUpdateForm";
+import ImportModelsModal from "../ImportExport/ImportModelsModal";
+import { ButtonStyleType } from "../Button/Button";
+import { ComponentProps as CardComponentProps } from "../Card/Card";
 import { AnalyticsBaseModelType } from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import BaseModel, {
   DatabaseBaseModelType,
 } from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import Dictionary from "../../../Types/Dictionary";
+import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
-import React, { ReactElement } from "react";
+import Permission from "../../../Types/Permission";
+import React, { ReactElement, useState } from "react";
 import Query from "../../../Types/BaseDatabase/Query";
 import GroupBy from "../../../Types/BaseDatabase/GroupBy";
 import Sort from "../../../Types/BaseDatabase/Sort";
@@ -18,6 +38,7 @@ import Select from "../../../Types/BaseDatabase/Select";
 export interface ComponentProps<TBaseModel extends BaseModel>
   extends BaseTableProps<TBaseModel> {
   modelAPI?: typeof ModelAPI | undefined;
+  enableJsonImportExport?: boolean | undefined;
 }
 
 const ModelTable: <TBaseModel extends BaseModel>(
@@ -28,160 +49,290 @@ const ModelTable: <TBaseModel extends BaseModel>(
   const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
   const model: TBaseModel = new props.modelType();
 
-  return (
-    <BaseModelTable
-      {...props}
-      callbacks={{
-        getJSONFromModel: (item: TBaseModel): JSONObject => {
-          return BaseModel.toJSONObject(item, props.modelType);
-        },
+  const [showImportModal, setShowImportModal] = useState<boolean>(false);
+  const [importRefreshCounter, setImportRefreshCounter] = useState<number>(0);
 
-        updateById: async (args: { id: ObjectID; data: JSONObject }) => {
-          const { id, data } = args;
+  type GetExportBulkActionFunction = () => BulkActionButtonSchema<TBaseModel>;
 
-          await modelAPI.updateById({
-            modelType: props.modelType,
-            id: new ObjectID(id),
-            data: data,
-          });
-        },
+  const getExportBulkAction: GetExportBulkActionFunction =
+    (): BulkActionButtonSchema<TBaseModel> => {
+      return {
+        title: "Export JSON",
+        buttonStyleType: ButtonStyleType.NORMAL,
+        icon: IconProp.Download,
+        onClick: async ({
+          items,
+          onProgressInfo,
+          onBulkActionStart,
+          onBulkActionEnd,
+        }: BulkActionOnClickProps<TBaseModel>) => {
+          onBulkActionStart();
 
-        toJSONArray: (items: TBaseModel[]): JSONObject[] => {
-          return BaseModel.toJSONObjectArray(items, props.modelType);
-        },
+          const inProgressItems: Array<TBaseModel> = [...items];
+          const successItems: Array<TBaseModel> = [];
+          const failedItems: Array<BulkActionFailed<TBaseModel>> = [];
+          const itemsToExport: Array<TBaseModel> = [];
 
-        getList: async (data: {
-          modelType: DatabaseBaseModelType | AnalyticsBaseModelType;
-          query: Query<TBaseModel>;
-          groupBy?: GroupBy<TBaseModel> | undefined;
-          limit: number;
-          skip: number;
-          sort: Sort<TBaseModel>;
-          select: Select<TBaseModel>;
-          requestOptions?: RequestOptions | undefined;
-        }) => {
-          return await modelAPI.getList<TBaseModel>({
-            modelType: data.modelType as { new (): TBaseModel },
-            query: data.query,
-            limit: data.limit,
-            groupBy: data.groupBy,
-            skip: data.skip,
-            sort: data.sort,
-            select: data.select,
-            requestOptions: data.requestOptions,
-          });
-        },
+          for (const item of items) {
+            inProgressItems.splice(inProgressItems.indexOf(item), 1);
 
-        addSlugToSelect: (select: Select<TBaseModel>): Select<TBaseModel> => {
-          const slugifyColumn: string | null = (
-            model as BaseModel
-          ).getSlugifyColumn();
+            try {
+              if (!item.id) {
+                throw new Error(
+                  `${model.singularName || "Item"} id not found.`,
+                );
+              }
+
+              const fetchedItem: TBaseModel =
+                await ModelImportExportUtil.fetchItemForExport<TBaseModel>({
+                  modelType: props.modelType,
+                  modelId: item.id,
+                  modelAPI: modelAPI,
+                });
+
+              itemsToExport.push(fetchedItem);
+              successItems.push(item);
+            } catch (err) {
+              failedItems.push({
+                item: item,
+                failedMessage: API.getFriendlyMessage(err),
+              });
+            }
+
+            onProgressInfo({
+              totalItems: items,
+              inProgressItems: [...inProgressItems],
+              successItems: [...successItems],
+              failed: [...failedItems],
+            });
+          }
 
-          if (slugifyColumn) {
-            (select as Dictionary<boolean>)[slugifyColumn] = true;
+          if (itemsToExport.length > 0) {
+            ModelImportExportUtil.downloadExportFile({
+              modelType: props.modelType,
+              items: itemsToExport,
+            });
           }
 
-          return select;
+          onBulkActionEnd();
         },
+      };
+    };
 
-        showCreateEditModal: (data: {
-          modalType: ModalType;
-          modelIdToEdit?: ObjectID | undefined;
-          onBeforeCreate?:
-            | ((
-                item: TBaseModel,
-                miscDataProps: JSONObject,
-              ) => Promise<TBaseModel>)
-            | undefined;
-          onSuccess?: ((item: TBaseModel) => void) | undefined;
-          onClose?: (() => void) | undefined;
-        }): ReactElement => {
-          const {
-            modalType,
-            modelIdToEdit,
-            onBeforeCreate,
-            onSuccess,
-            onClose,
-          } = data;
-
-          return (
-            <ModelFormModal<TBaseModel>
-              modelAPI={props.modelAPI}
-              title={
-                modalType === ModalType.Create
-                  ? `${props.createVerb || "Create"} New ${
-                      props.singularName || model.singularName
-                    }`
-                  : `Edit ${props.singularName || model.singularName}`
-              }
-              formRef={props.createEditFromRef}
-              modalWidth={props.createEditModalWidth}
-              name={
-                modalType === ModalType.Create
-                  ? `${props.name} > ${props.createVerb || "Create"} New ${
-                      props.singularName || model.singularName
-                    }`
-                  : `${props.name} > Edit ${
-                      props.singularName || model.singularName
-                    }`
-              }
-              initialValues={
-                modalType === ModalType.Create
-                  ? props.createInitialValues
-                  : undefined
-              }
-              onClose={onClose}
-              submitButtonText={
-                modalType === ModalType.Create
-                  ? `${props.createVerb || "Create"} ${
-                      props.singularName || model.singularName
-                    }`
-                  : `Save Changes`
-              }
-              onSuccess={onSuccess}
-              onBeforeCreate={onBeforeCreate}
-              modelType={props.modelType}
-              formProps={{
-                summary: props.formSummary,
-                name: `create-${props.modelType.name}-from`,
-                modelType: props.modelType,
-                id: `create-${props.modelType.name}-from`,
-                fields:
-                  props.formFields?.filter((field: ModelField<TBaseModel>) => {
-                    // If the field has doNotShowWhenEditing set to true, then don't show it when editing
-
-                    if (modelIdToEdit) {
-                      return !field.doNotShowWhenEditing;
-                    }
-
-                    // If the field has doNotShowWhenCreating set to true, then don't show it when creating
-
-                    return !field.doNotShowWhenCreating;
-                  }) || [],
-                steps: props.formSteps || [],
-                formType:
+  let bulkActions: BulkActionProps<TBaseModel> | undefined = props.bulkActions;
+  let cardProps: CardComponentProps | undefined = props.cardProps;
+  let refreshToggle: string | undefined = props.refreshToggle;
+
+  if (props.enableJsonImportExport) {
+    bulkActions = {
+      ...(props.bulkActions || {}),
+      buttons: [...(props.bulkActions?.buttons || []), getExportBulkAction()],
+    };
+
+    const permissions: Array<Permission> | null =
+      PermissionUtil.getAllPermissions();
+
+    const hasPermissionToCreate: boolean = permissions
+      ? model.hasCreatePermissions(permissions) || User.isMasterAdmin()
+      : false;
+
+    if (hasPermissionToCreate) {
+      cardProps = {
+        ...(props.cardProps || {}),
+        buttons: [
+          ...(props.cardProps?.buttons || []),
+          {
+            title: "Import JSON",
+            buttonStyle: ButtonStyleType.OUTLINE,
+            icon: IconProp.Upload,
+            onClick: () => {
+              setShowImportModal(true);
+            },
+          },
+        ],
+      };
+    }
+
+    refreshToggle = `${props.refreshToggle || ""}-import-${importRefreshCounter}`;
+  }
+
+  return (
+    <>
+      {showImportModal && (
+        <ImportModelsModal<TBaseModel>
+          modelType={props.modelType as { new (): TBaseModel }}
+          modelAPI={modelAPI}
+          onClose={() => {
+            setShowImportModal(false);
+          }}
+          onImportComplete={(result: ImportResult) => {
+            if (result.successCount > 0) {
+              setImportRefreshCounter((counter: number) => {
+                return counter + 1;
+              });
+            }
+          }}
+        />
+      )}
+      <BaseModelTable
+        {...props}
+        bulkActions={bulkActions}
+        cardProps={cardProps}
+        refreshToggle={refreshToggle}
+        callbacks={{
+          getJSONFromModel: (item: TBaseModel): JSONObject => {
+            return BaseModel.toJSONObject(item, props.modelType);
+          },
+
+          updateById: async (args: { id: ObjectID; data: JSONObject }) => {
+            const { id, data } = args;
+
+            await modelAPI.updateById({
+              modelType: props.modelType,
+              id: new ObjectID(id),
+              data: data,
+            });
+          },
+
+          toJSONArray: (items: TBaseModel[]): JSONObject[] => {
+            return BaseModel.toJSONObjectArray(items, props.modelType);
+          },
+
+          getList: async (data: {
+            modelType: DatabaseBaseModelType | AnalyticsBaseModelType;
+            query: Query<TBaseModel>;
+            groupBy?: GroupBy<TBaseModel> | undefined;
+            limit: number;
+            skip: number;
+            sort: Sort<TBaseModel>;
+            select: Select<TBaseModel>;
+            requestOptions?: RequestOptions | undefined;
+          }) => {
+            return await modelAPI.getList<TBaseModel>({
+              modelType: data.modelType as { new (): TBaseModel },
+              query: data.query,
+              limit: data.limit,
+              groupBy: data.groupBy,
+              skip: data.skip,
+              sort: data.sort,
+              select: data.select,
+              requestOptions: data.requestOptions,
+            });
+          },
+
+          addSlugToSelect: (select: Select<TBaseModel>): Select<TBaseModel> => {
+            const slugifyColumn: string | null = (
+              model as BaseModel
+            ).getSlugifyColumn();
+
+            if (slugifyColumn) {
+              (select as Dictionary<boolean>)[slugifyColumn] = true;
+            }
+
+            return select;
+          },
+
+          showCreateEditModal: (data: {
+            modalType: ModalType;
+            modelIdToEdit?: ObjectID | undefined;
+            onBeforeCreate?:
+              | ((
+                  item: TBaseModel,
+                  miscDataProps: JSONObject,
+                ) => Promise<TBaseModel>)
+              | undefined;
+            onSuccess?: ((item: TBaseModel) => void) | undefined;
+            onClose?: (() => void) | undefined;
+          }): ReactElement => {
+            const {
+              modalType,
+              modelIdToEdit,
+              onBeforeCreate,
+              onSuccess,
+              onClose,
+            } = data;
+
+            return (
+              <ModelFormModal<TBaseModel>
+                modelAPI={props.modelAPI}
+                title={
                   modalType === ModalType.Create
-                    ? FormType.Create
-                    : FormType.Update,
-              }}
-              modelIdToEdit={modelIdToEdit}
-            />
-          );
-        },
+                    ? `${props.createVerb || "Create"} New ${
+                        props.singularName || model.singularName
+                      }`
+                    : `Edit ${props.singularName || model.singularName}`
+                }
+                formRef={props.createEditFromRef}
+                modalWidth={props.createEditModalWidth}
+                name={
+                  modalType === ModalType.Create
+                    ? `${props.name} > ${props.createVerb || "Create"} New ${
+                        props.singularName || model.singularName
+                      }`
+                    : `${props.name} > Edit ${
+                        props.singularName || model.singularName
+                      }`
+                }
+                initialValues={
+                  modalType === ModalType.Create
+                    ? props.createInitialValues
+                    : undefined
+                }
+                onClose={onClose}
+                submitButtonText={
+                  modalType === ModalType.Create
+                    ? `${props.createVerb || "Create"} ${
+                        props.singularName || model.singularName
+                      }`
+                    : `Save Changes`
+                }
+                onSuccess={onSuccess}
+                onBeforeCreate={onBeforeCreate}
+                modelType={props.modelType}
+                formProps={{
+                  summary: props.formSummary,
+                  name: `create-${props.modelType.name}-from`,
+                  modelType: props.modelType,
+                  id: `create-${props.modelType.name}-from`,
+                  fields:
+                    props.formFields?.filter(
+                      (field: ModelField<TBaseModel>) => {
+                        // If the field has doNotShowWhenEditing set to true, then don't show it when editing
 
-        getModelFromJSON: (item: JSONObject): TBaseModel => {
-          return BaseModel.fromJSON(item, props.modelType) as TBaseModel;
-        },
+                        if (modelIdToEdit) {
+                          return !field.doNotShowWhenEditing;
+                        }
 
-        deleteItem: async (item: TBaseModel) => {
-          await modelAPI.deleteItem({
-            modelType: props.modelType,
-            id: item.id as ObjectID,
-            requestOptions: props.deleteRequestOptions,
-          });
-        },
-      }}
-    />
+                        // If the field has doNotShowWhenCreating set to true, then don't show it when creating
+
+                        return !field.doNotShowWhenCreating;
+                      },
+                    ) || [],
+                  steps: props.formSteps || [],
+                  formType:
+                    modalType === ModalType.Create
+                      ? FormType.Create
+                      : FormType.Update,
+                }}
+                modelIdToEdit={modelIdToEdit}
+              />
+            );
+          },
+
+          getModelFromJSON: (item: JSONObject): TBaseModel => {
+            return BaseModel.fromJSON(item, props.modelType) as TBaseModel;
+          },
+
+          deleteItem: async (item: TBaseModel) => {
+            await modelAPI.deleteItem({
+              modelType: props.modelType,
+              id: item.id as ObjectID,
+              requestOptions: props.deleteRequestOptions,
+            });
+          },
+        }}
+      />
+    </>
   );
 };
 

package/UI/Utils/ModelImportExport.ts

@@ -0,0 +1,207 @@
+import BaseModel from "../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { JSONObject } from "../../Types/JSON";
+import ObjectID from "../../Types/ObjectID";
+import BadDataException from "../../Types/Exception/BadDataException";
+import ModelImportExport from "../../Utils/ModelImportExport";
+import API from "./API/API";
+import ModelAPI from "./ModelAPI/ModelAPI";
+
+export interface ImportFailure {
+  itemName: string;
+  errorMessage: string;
+}
+
+export interface ImportResult {
+  successCount: number;
+  failures: Array<ImportFailure>;
+}
+
+export default class ModelImportExportUtil {
+  public static async fetchItemForExport<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    modelId: ObjectID;
+    modelAPI?: typeof ModelAPI | undefined;
+  }): Promise<TBaseModel> {
+    const modelAPI: typeof ModelAPI = data.modelAPI || ModelAPI;
+
+    const item: TBaseModel | null = await modelAPI.getItem<TBaseModel>({
+      modelType: data.modelType,
+      id: data.modelId,
+      select: ModelImportExport.getImportExportSelect(data.modelType),
+    });
+
+    if (!item || !item.id) {
+      const model: BaseModel = new data.modelType();
+      throw new BadDataException(
+        `${model.singularName || "Item"} not found. It may have been deleted.`,
+      );
+    }
+
+    return item;
+  }
+
+  public static downloadExportFile<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    items: Array<TBaseModel>;
+  }): void {
+    const model: BaseModel = new data.modelType();
+
+    const envelope: JSONObject = ModelImportExport.buildExportEnvelope({
+      modelType: data.modelType,
+      items: data.items,
+      exportedAt: new Date(),
+    });
+
+    const resourceName: string = (model.tableName || "resources")
+      .replace(/[^a-zA-Z0-9-]/g, "-")
+      .toLowerCase();
+
+    const timestamp: string = new Date()
+      .toISOString()
+      .replace(/[:.]/g, "-")
+      .slice(0, 19);
+
+    this.downloadJSONFile({
+      content: JSON.stringify(envelope, null, 2),
+      filename: `${resourceName}-export-${timestamp}.json`,
+    });
+  }
+
+  public static downloadJSONFile(data: {
+    content: string;
+    filename: string;
+  }): void {
+    const blob: Blob = new Blob([data.content], {
+      type: "application/json;charset=utf-8;",
+    });
+    const url: string = window.URL.createObjectURL(blob);
+    const anchor: HTMLAnchorElement = document.createElement("a");
+    anchor.href = url;
+    anchor.download = data.filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    window.URL.revokeObjectURL(url);
+  }
+
+  public static parseImportFileText(data: {
+    modelType: { new (): BaseModel };
+    fileText: string;
+  }): Array<JSONObject> {
+    let payload: unknown = null;
+
+    try {
+      payload = JSON.parse(data.fileText);
+    } catch {
+      throw new BadDataException(
+        "This file is not valid JSON. Please select a JSON export file.",
+      );
+    }
+
+    return ModelImportExport.parseImportPayload({
+      modelType: data.modelType,
+      payload: payload as JSONObject,
+    });
+  }
+
+  /*
+   * Creates each item through the regular create API so all server-side
+   * validation, permission checks and hooks apply. When an item fails only
+   * because a resource with the same name already exists, it is retried once
+   * with an "(Imported)" suffix so re-importing into the same project works.
+   */
+  public static async importItems<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    itemJsons: Array<JSONObject>;
+    modelAPI?: typeof ModelAPI | undefined;
+    onProgress?:
+      | ((completedCount: number, totalCount: number) => void)
+      | undefined;
+  }): Promise<ImportResult> {
+    const modelAPI: typeof ModelAPI = data.modelAPI || ModelAPI;
+
+    const result: ImportResult = {
+      successCount: 0,
+      failures: [],
+    };
+
+    /*
+     * The column that holds the human-readable name of the resource - used
+     * to label failures and to rename on duplicate-name conflicts. Most
+     * models use "name"; template models use "templateName".
+     */
+    const displayNameColumn: string | undefined = [
+      "name",
+      "templateName",
+      "title",
+    ].find((columnName: string) => {
+      return new data.modelType().getTableColumns().hasColumn(columnName);
+    });
+
+    let completedCount: number = 0;
+
+    for (const itemJson of data.itemJsons) {
+      const itemName: string =
+        (displayNameColumn &&
+          typeof itemJson[displayNameColumn] === "string" &&
+          (itemJson[displayNameColumn] as string)) ||
+        `Item ${completedCount + 1}`;
+
+      try {
+        const item: TBaseModel = ModelImportExport.fromImportJSON({
+          json: itemJson,
+          modelType: data.modelType,
+        });
+
+        try {
+          await modelAPI.create<TBaseModel>({
+            model: item,
+            modelType: data.modelType,
+          });
+
+          result.successCount += 1;
+        } catch (err) {
+          const errorMessage: string = API.getFriendlyMessage(err);
+
+          const canRetryWithNewName: boolean = Boolean(
+            errorMessage.toLowerCase().includes("already exists") &&
+              displayNameColumn &&
+              typeof item.getValue(displayNameColumn) === "string",
+          );
+
+          if (canRetryWithNewName) {
+            item.setValue(
+              displayNameColumn!,
+              `${item.getValue(displayNameColumn!)?.toString()} (Imported)`,
+            );
+
+            await modelAPI.create<TBaseModel>({
+              model: item,
+              modelType: data.modelType,
+            });
+
+            result.successCount += 1;
+          } else {
+            result.failures.push({
+              itemName: itemName,
+              errorMessage: errorMessage,
+            });
+          }
+        }
+      } catch (err) {
+        result.failures.push({
+          itemName: itemName,
+          errorMessage: API.getFriendlyMessage(err),
+        });
+      }
+
+      completedCount += 1;
+
+      if (data.onProgress) {
+        data.onProgress(completedCount, data.itemJsons.length);
+      }
+    }
+
+    return result;
+  }
+}