@itwin/reports-config-widget-react 0.0.1

package/src/widget/components/AddMappingsModal.tsx

@@ -0,0 +1,175 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { Modal, Table, tableFilters } from "@itwin/itwinui-react";
+import React, { useEffect, useMemo, useState } from "react";
+import type { Mapping } from "@itwin/insights-client";
+import { REPORTING_BASE_PATH, ReportingClient } from "@itwin/insights-client";
+import ActionPanel from "./ActionPanel";
+import "./AddMappingsModal.scss";
+import { LocalizedTablePaginator } from "./LocalizedTablePaginator";
+import type { ReportMappingAndMapping } from "./ReportMappings";
+import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { SelectIModel } from "./SelectIModel";
+import type { CreateTypeFromInterface } from "./utils";
+import { generateUrl, handleError } from "./utils";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export type MappingType = CreateTypeFromInterface<Mapping>;
+
+const fetchMappings = async (
+  setMappings: React.Dispatch<React.SetStateAction<Mapping[]>>,
+  iModelId: string,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  apiContext: ReportsApiConfig
+) => {
+  try {
+    setIsLoading(true);
+    const reportingClientApi = new ReportingClient(
+      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
+    );
+    const accessToken = await apiContext.getAccessToken();
+    const mappings = await reportingClientApi.getMappings(
+      accessToken,
+      iModelId
+    );
+    setMappings(mappings);
+  } catch (error: any) {
+    handleError(error.status);
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+interface AddMappingsModalProps {
+  reportId: string;
+  existingMappings: ReportMappingAndMapping[];
+  show: boolean;
+  returnFn: () => Promise<void>;
+}
+
+const AddMappingsModal = ({
+  reportId,
+  existingMappings,
+  show,
+  returnFn,
+}: AddMappingsModalProps) => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [selectedMappings, setSelectedMappings] = useState<Mapping[]>([]);
+  const [selectedIModelId, setSelectediModelId] = useState<string>("");
+  const [mappings, setMappings] = useState<Mapping[]>([]);
+  const apiConfig = useReportsApiConfig();
+
+  useEffect(() => {
+    if (selectedIModelId) {
+      void fetchMappings(
+        setMappings,
+        selectedIModelId,
+        setIsLoading,
+        apiConfig
+      );
+    }
+  }, [apiConfig, selectedIModelId, setIsLoading]);
+
+  const mappingsColumns = useMemo(
+    () => [
+      {
+        Header: "Table",
+        columns: [
+          {
+            id: "mappingName",
+            Header: ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:MappingName"
+            ),
+            accessor: "mappingName",
+            Filter: tableFilters.TextFilter(),
+          },
+          {
+            id: "description",
+            Header: ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:Description"
+            ),
+            accessor: "description",
+            Filter: tableFilters.TextFilter(),
+          },
+        ],
+      },
+    ],
+    []
+  );
+
+  const onSave = async () => {
+    try {
+      if (!selectedIModelId) return;
+      setIsLoading(true);
+      const reportingClientApi = new ReportingClient(
+        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+      );
+      const accessToken = await apiConfig.getAccessToken();
+      for (const mapping of selectedMappings) {
+        await reportingClientApi.createReportMapping(accessToken, reportId, {
+          imodelId: selectedIModelId,
+          mappingId: mapping.id ?? "",
+        });
+      }
+
+      await returnFn();
+    } catch (error: any) {
+      handleError(error.status);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:AddMappings"
+      )}
+      isOpen={show}
+      isDismissible={!isLoading}
+      onClose={async () => {
+        await returnFn();
+      }}
+      style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
+    >
+      <div className="add-mappings-container">
+        <SelectIModel
+          selectedIModelId={selectedIModelId}
+          setSelectedIModelId={setSelectediModelId}
+        />
+        <Table<MappingType>
+          data={isLoading ? [] : mappings}
+          columns={mappingsColumns}
+          className="add-mappings-table"
+          emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:NoMappingsAvailable"
+          )}
+          isSortable
+          isSelectable
+          isLoading={isLoading}
+          isRowDisabled={(rowData) =>
+            existingMappings.some((v) => v.mappingId === rowData.id)
+          }
+          onSelect={(selectData: Mapping[] | undefined) => {
+            selectData && setSelectedMappings(selectData);
+          }}
+          paginatorRenderer={LocalizedTablePaginator}
+        />
+      </div>
+      <ActionPanel
+        actionLabel={ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Add"
+        )}
+        onAction={onSave}
+        onCancel={returnFn}
+        isSavingDisabled={selectedMappings.length === 0}
+        isLoading={isLoading}
+      />
+    </Modal>
+  );
+};
+
+export default AddMappingsModal;

package/src/widget/components/DeleteModal.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+
+.delete-modal-body-text {
+  display: flex;
+  gap: $iui-xs;
+  flex-wrap: wrap;
+  > strong {
+    min-width: 0px;
+  }
+}
+
+.rcw-loading-delete {
+  margin-right: $iui-s;
+}

package/src/widget/components/DeleteModal.tsx

@@ -0,0 +1,100 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import {
+  Button,
+  Leading,
+  MiddleTextTruncation,
+  Modal,
+  ModalButtonBar,
+  ModalContent,
+} from "@itwin/itwinui-react";
+import React, { useState } from "react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import "./DeleteModal.scss";
+import { handleError, LoadingSpinner } from "./utils";
+
+export interface DeleteModalProps {
+  entityName: string;
+  show: boolean;
+  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  onDelete: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+export const DeleteModal = ({
+  entityName,
+  show,
+  setShow,
+  onDelete,
+  refresh,
+}: DeleteModalProps) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const deleteCallback = async () => {
+    try {
+      setIsLoading(true);
+      await onDelete();
+      setShow(false);
+      await refresh();
+    } catch (error: any) {
+      handleError(error.status);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Confirm"
+      )}
+      isOpen={show}
+      isDismissible={!isLoading}
+      onClose={() => {
+        setShow(false);
+      }}
+    >
+      <ModalContent>
+        <div className="delete-modal-body-text">
+          <Leading>
+            {ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:AreYouSureYouWantToDelete"
+            )}
+          </Leading>
+          <strong>{<MiddleTextTruncation text={`${entityName}?`} />}</strong>
+        </div>
+      </ModalContent>
+      <ModalButtonBar>
+        {isLoading && (
+          <div className="rcw-loading-delete" data-testid="rcw-loading-delete">
+            <LoadingSpinner />
+          </div>
+        )}
+        <Button
+          styleType="high-visibility"
+          onClick={deleteCallback}
+          disabled={isLoading}
+        >
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Delete"
+          )}
+        </Button>
+        <Button
+          styleType="default"
+          onClick={() => {
+            setShow(false);
+          }}
+          disabled={isLoading}
+        >
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Cancel"
+          )}
+        </Button>
+      </ModalButtonBar>
+    </Modal>
+  );
+};
+
+export default DeleteModal;

package/src/widget/components/Extraction.scss

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+
+.extraction-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $iui-s;
+  .extraction-combo-box {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+  .extraction-status-container {
+    display: flex;
+  }
+}
+
+.extraction-status {
+  display: flex;
+  align-items: center;
+  margin: 0 $iui-s;
+  .status-icon {
+    width: $iui-icons-default;
+    height: $iui-icons-default;
+  }
+}
+
+@keyframes rcw-fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/src/widget/components/Extraction.tsx

@@ -0,0 +1,315 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import type { SelectOption } from "@itwin/itwinui-react";
+import {
+  ComboBox,
+  Label,
+  ProgressRadial,
+  StatusMessage,
+} from "@itwin/itwinui-react";
+import * as React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { REPORTING_BASE_PATH, ReportingClient } from "@itwin/insights-client";
+import { generateUrl, handleError, SkeletonBlock } from "./utils";
+import "./Extraction.scss";
+import {
+  SvgStatusError,
+  SvgStatusPending,
+  SvgStatusPendingHollow,
+  SvgStatusSuccess,
+} from "@itwin/itwinui-icons-color-react";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export const REFRESH_DELAY = 2000;
+
+export enum ExtractionStates {
+  None,
+  Starting,
+  FetchingUpdate,
+  Queued,
+  Running,
+  Succeeded,
+  Failed,
+}
+interface ExtractionStatusProps {
+  state: ExtractionStates;
+  setExtractionState?: React.Dispatch<React.SetStateAction<ExtractionStates>>;
+  children?: React.ReactNode;
+}
+
+export const ExtractionStatus = ({
+  state,
+  children,
+  setExtractionState,
+}: ExtractionStatusProps) => {
+  const [fadeOut, setFadeOut] = useState<boolean>(false);
+
+  const onAnimationEnd = () => {
+    if (setExtractionState) {
+      setExtractionState(ExtractionStates.None);
+      setFadeOut(false);
+    }
+  };
+
+  useEffect(() => {
+    let timer: number;
+    switch (state) {
+      case ExtractionStates.Succeeded:
+      case ExtractionStates.Failed:
+        timer = window.setTimeout(() => setFadeOut(true), 5000);
+    }
+    return () => clearTimeout(timer);
+  }, [state, setExtractionState]);
+
+  switch (state) {
+    case ExtractionStates.Starting:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Starting"
+          )}
+          className="extraction-status"
+        >
+          <div className="status-icon">
+            <SvgStatusPendingHollow />
+          </div>
+        </div>
+      );
+    case ExtractionStates.FetchingUpdate:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Loading"
+          )}
+          className="extraction-status"
+        >
+          <ProgressRadial size="x-small" indeterminate />
+        </div>
+      );
+    case ExtractionStates.Queued:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Queued"
+          )}
+          className="extraction-status"
+        >
+          <div className="status-icon">
+            <SvgStatusPending />
+          </div>
+        </div>
+      );
+    case ExtractionStates.Running:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Running"
+          )}
+          className="extraction-status"
+        >
+          <ProgressRadial size="x-small" indeterminate />
+        </div>
+      );
+    case ExtractionStates.Succeeded:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Success"
+          )}
+          className="extraction-status"
+        >
+          <div
+            className={`status-icon`}
+            style={{
+              animationName: fadeOut ? "rcw-fade-out" : "",
+              animationDelay: "5s",
+              animationDuration: "1s",
+            }}
+            onAnimationEnd={onAnimationEnd}
+          >
+            <SvgStatusSuccess />
+          </div>
+        </div>
+      );
+    case ExtractionStates.Failed:
+      return (
+        <div
+          title={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Failed"
+          )}
+          className="extraction-status"
+        >
+          <div
+            className={`status-icon`}
+            style={{
+              animationName: fadeOut ? "rcw-fade-out" : "",
+              animationDelay: "5s",
+              animationDuration: "1s",
+            }}
+            onAnimationEnd={onAnimationEnd}
+          >
+            <SvgStatusError />
+          </div>
+        </div>
+      );
+    default:
+      return <>{children}</>;
+  }
+};
+
+interface ExtractionProps {
+  iModels: Map<string, string>;
+  setExtractingIModelId: React.Dispatch<React.SetStateAction<string>>;
+  extractionState: ExtractionStates;
+  setExtractionState: React.Dispatch<React.SetStateAction<ExtractionStates>>;
+  isLoading: boolean;
+}
+
+export const Extraction = ({
+  iModels,
+  setExtractingIModelId,
+  extractionState,
+  setExtractionState,
+  isLoading,
+}: ExtractionProps) => {
+  const jobId = useRef<string>("");
+  const intervalId = useRef<number>();
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [currentIModelId, setCurrentIModelId] = useState<string>();
+  const apiConfig = useReportsApiConfig();
+
+  const runExtraction = async (iModelId: string) => {
+    try {
+      setExtractionState(ExtractionStates.Starting);
+      setExtractingIModelId(iModelId);
+      const reportingClientApi = new ReportingClient(
+        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+      );
+      const accessToken = await apiConfig.getAccessToken();
+      const response = await reportingClientApi.runExtraction(
+        accessToken,
+        iModelId
+      );
+      jobId.current = response.run?.id ?? "";
+      setIsRunning(true);
+      setExtractionState(ExtractionStates.FetchingUpdate);
+    } catch (error: any) {
+      handleError(error.status);
+      setExtractionState(ExtractionStates.Failed);
+      setIsRunning(false);
+      setCurrentIModelId(undefined);
+    }
+  };
+
+  useEffect(() => {
+    if (!intervalId.current && isRunning) {
+      const newIntervalId = window.setInterval(async () => {
+        const reportingClientApi = new ReportingClient(
+          generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+        );
+        const accessToken = await apiConfig.getAccessToken();
+        const response = await reportingClientApi.getExtractionStatus(
+          accessToken,
+          jobId.current
+        );
+        if (response.status?.state === "Queued") {
+          setExtractionState(ExtractionStates.Queued);
+        } else if (response.status?.state === "Running") {
+          setExtractionState(ExtractionStates.Running);
+        } else if (response.status?.state === "Succeeded") {
+          setExtractionState(ExtractionStates.Succeeded);
+          setIsRunning(false);
+          setCurrentIModelId(undefined);
+        } else if (response.status?.state === "Failed") {
+          setExtractionState(ExtractionStates.Failed);
+          setIsRunning(false);
+          setCurrentIModelId(undefined);
+        }
+      }, REFRESH_DELAY);
+      intervalId.current = newIntervalId;
+    } else if (intervalId && !isRunning) {
+      window.clearInterval(intervalId.current);
+      intervalId.current = undefined;
+    }
+    return () => window.clearInterval(intervalId.current);
+  }, [apiConfig, isRunning, jobId, setExtractionState]);
+
+  const iModelOptions = useMemo(() => {
+    // TODO Report ComboBox bug. Unique key error happens when the options list becomes reduced.
+    const newIModelOptions: SelectOption<string>[] = [];
+
+    for (const [iModelId, iModelName] of iModels.entries()) {
+      newIModelOptions.push({
+        label: iModelName,
+        value: iModelId,
+        key: iModelId,
+        disabled: extractionState !== ExtractionStates.None,
+      });
+    }
+    return newIModelOptions;
+  }, [iModels, extractionState]);
+
+  return (
+    <div className="extraction-container">
+      <div className="extraction-combo-box" data-testid="extraction-combo-box">
+        <Label htmlFor="combo-input">
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:UpdateDataset"
+          )}
+        </Label>
+        {isLoading ? (
+          <SkeletonBlock />
+        ) : (
+          <ComboBox
+            options={iModelOptions}
+            value={currentIModelId}
+            onChange={async (value) => {
+              setCurrentIModelId(value);
+              await runExtraction(value);
+            }}
+            inputProps={{
+              id: "combo-input",
+              placeholder: ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:SelectIModel"
+              ),
+            }}
+            message={
+              extractionState !== ExtractionStates.None && (
+                <StatusMessage>
+                  <div className="extraction-status-container">
+                    <ExtractionStatus
+                      state={extractionState}
+                      setExtractionState={setExtractionState}
+                    />
+                    {(() => {
+                      switch (extractionState) {
+                        case ExtractionStates.Succeeded: {
+                          return ReportsConfigWidget.localization.getLocalizedString(
+                            "ReportsConfigWidget:Success"
+                          );
+                        }
+                        case ExtractionStates.Failed: {
+                          return ReportsConfigWidget.localization.getLocalizedString(
+                            "ReportsConfigWidget:Failed"
+                          );
+                        }
+                        default: {
+                          return ReportsConfigWidget.localization.getLocalizedString(
+                            "ReportsConfigWidget:UpdateInProgress"
+                          );
+                        }
+                      }
+                    })()}
+                  </div>
+                </StatusMessage>
+              )
+            }
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/widget/components/HorizontalTile.scss

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+
+.rcw-horizontal-tile-container {
+  display: flex;
+  justify-content: space-between;
+  border-radius: 5px;
+  background-color: var(--iui-color-background-2);
+  height: $iui-baseline * 4;
+  padding: 5.5px $iui-s;
+  .body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    justify-content: center;
+    &-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .action-button {
+    margin-left: 0;
+    align-self: center;
+    min-width: 36px;
+    margin-right: $iui-xs;
+    flex-shrink: 0;
+  }
+}