@itwin/reports-config-widget-react 0.0.1

package/src/widget/components/HorizontalTile.tsx

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import type { ReactNode } from "react";
+import React from "react";
+import { Text } from "@itwin/itwinui-react";
+import "./HorizontalTile.scss";
+
+interface HorizontalTileProps {
+  title: string;
+  button: ReactNode;
+  subText?: string;
+  onClickTitle?: () => void;
+  titleTooltip?: string;
+  subtextToolTip?: string;
+}
+
+export const HorizontalTile = ({
+  title,
+  subText,
+  onClickTitle,
+  titleTooltip,
+  subtextToolTip,
+  button,
+}: HorizontalTileProps) => {
+  return (
+    <div
+      className="rcw-horizontal-tile-container"
+      data-testid="horizontal-tile"
+    >
+      <div className="body">
+        <Text
+          className={`body-text ${onClickTitle ? "iui-anchor" : ""}`}
+          onClick={onClickTitle}
+          variant="body"
+          title={titleTooltip}
+        >
+          {title}
+        </Text>
+        {subText && (
+          <Text
+            className="body-text"
+            isMuted={true}
+            title={subtextToolTip}
+            variant="small"
+          >
+            {subText}
+          </Text>
+        )}
+      </div>
+      <div className="action-button" data-testid="tile-action-button">
+        {button}
+      </div>
+    </div>
+  );
+};

package/src/widget/components/LocalizedTablePaginator.tsx

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import type { TablePaginatorRendererProps } from "@itwin/itwinui-react";
+import { TablePaginator } from "@itwin/itwinui-react";
+import React, { useMemo } from "react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export const LocalizedTablePaginator = (props: TablePaginatorRendererProps) => {
+  const pageSizeList = useMemo(() => [10, 25, 50], []);
+  const paginationLocalization = useMemo(
+    () => ({
+      pageSizeLabel: (size: number) =>
+        ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Table.SizePerPage",
+          { size }
+        ),
+      rangeLabel: (
+        startIndex: number,
+        endIndex: number,
+        totalRows: number,
+        isLoading: boolean
+      ) =>
+        isLoading
+          ? ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Table.StartIndexEndIndex",
+            { startIndex, endIndex }
+          )
+          : ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Table.StartIndexEndIndexOf",
+            { startIndex, endIndex, totalRows }
+          ),
+      previousPage: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Table.PreviousPage"
+      ),
+      nextPage: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Table.NextPage"
+      ),
+      goToPageLabel: (page: number) =>
+        ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Table.GoToPage",
+          { page }
+        ),
+      rowsPerPageLabel: ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Table.RowsPerPage"
+      ),
+    }),
+    []
+  );
+
+  return (
+    <TablePaginator
+      {...props}
+      pageSizeList={pageSizeList}
+      localization={paginationLocalization}
+    />
+  );
+};

package/src/widget/components/ReportAction.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* 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-details-form-container {
+  overflow-x: auto;
+  height: 100%;
+
+  .details-form {
+    display: flex;
+    flex-direction: column;
+    gap: $iui-baseline;
+  }
+}

package/src/widget/components/ReportAction.tsx

@@ -0,0 +1,146 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { Fieldset, LabeledInput, Small } from "@itwin/itwinui-react";
+import React, { useState } from "react";
+import ActionPanel from "./ActionPanel";
+import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
+import {
+  generateUrl,
+  handleError,
+  handleInputChange,
+  WidgetHeader,
+} from "./utils";
+import "./ReportAction.scss";
+import type { Report } from "@itwin/insights-client";
+import { REPORTING_BASE_PATH, ReportingClient } from "@itwin/insights-client";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+interface ReportActionProps {
+  iTwinId: string;
+  report?: Report;
+  returnFn: () => Promise<void>;
+}
+
+const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
+  const apiConfig = useReportsApiConfig();
+  const [values, setValues] = useState({
+    name: report?.displayName ?? "",
+    description: report?.description ?? "",
+  });
+  const [validator, showValidationMessage] = useValidator();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const onSave = async () => {
+    try {
+      if (!validator.allValid()) {
+        showValidationMessage(true);
+        return;
+      }
+      setIsLoading(true);
+      const reportingClientApi = new ReportingClient(
+        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+      );
+      const accessToken = await apiConfig.getAccessToken();
+      report
+        ? await reportingClientApi.updateReport(accessToken, report.id ?? "", {
+          displayName: values.name,
+          description: values.description,
+        })
+        : await reportingClientApi.createReport(accessToken, {
+          displayName: values.name,
+          description: values.description,
+          projectId: iTwinId,
+        });
+      await returnFn();
+    } catch (error: any) {
+      handleError(error.status);
+      setIsLoading(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <WidgetHeader
+        title={
+          report
+            ? ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:ModifyReport"
+            )
+            : ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:AddReport"
+            )
+        }
+        returnFn={returnFn}
+      />
+      <div className="rcw-details-form-container">
+        <Fieldset
+          legend={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:ReportDetails"
+          )}
+          className="details-form"
+        >
+          <Small className="field-legend">
+            {ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:MandatoryFields"
+            )}
+          </Small>
+          <LabeledInput
+            id="name"
+            name="name"
+            label={ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:Name"
+            )}
+            value={values.name}
+            required
+            disabled={isLoading}
+            onChange={(event) => {
+              handleInputChange(event, values, setValues);
+              validator.showMessageFor("name");
+            }}
+            message={validator.message("name", values.name, NAME_REQUIREMENTS)}
+            status={
+              validator.message("name", values.name, NAME_REQUIREMENTS)
+                ? "negative"
+                : undefined
+            }
+            onBlur={() => {
+              validator.showMessageFor("name");
+            }}
+            onBlurCapture={(event) => {
+              handleInputChange(event, values, setValues);
+              validator.showMessageFor("name");
+            }}
+          />
+          <LabeledInput
+            id="description"
+            name="description"
+            label={ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:Description"
+            )}
+            value={values.description}
+            onChange={(event) => {
+              handleInputChange(event, values, setValues);
+            }}
+            disabled={isLoading}
+          />
+        </Fieldset>
+      </div>
+      <ActionPanel
+        actionLabel={ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Add"
+        )}
+        onAction={onSave}
+        onCancel={returnFn}
+        isSavingDisabled={!values.name}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default ReportAction;

package/src/widget/components/ReportMappings.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.report-mapping-misc {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+}
+
+.report-mappings-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: $iui-baseline $iui-m;
+  min-height: 0;
+
+  .odata-url-input {
+    margin-bottom: $iui-baseline * 2;
+  }
+
+  .toolbar {
+    display: flex;
+    justify-content: space-between;
+    gap: $iui-s;
+    border-bottom: 1px solid var(--iui-color-background-4);
+    padding-bottom: $iui-baseline;
+    flex-wrap: wrap;
+  }
+
+  .mapping-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: overlay;
+    gap: 7.5px;
+    margin-top: 7.5px;
+  }
+
+  .search-bar-container {
+    flex-basis: $iui-3xl;
+    flex-shrink: 1;
+    flex-grow: 1;
+  }
+}

package/src/widget/components/ReportMappings.tsx

@@ -0,0 +1,350 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import {
+  SvgAdd,
+  SvgCopy,
+  SvgDelete,
+  SvgMore,
+} from "@itwin/itwinui-icons-react";
+import {
+  Button,
+  DropdownMenu,
+  IconButton,
+  LabeledInput,
+  MenuItem,
+  Surface,
+  Text,
+  toaster,
+} from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import type { CreateTypeFromInterface } from "./utils";
+import {
+  EmptyMessage,
+  generateUrl,
+  handleError,
+  LoadingOverlay,
+  WidgetHeader,
+} from "./utils";
+import "./ReportMappings.scss";
+import DeleteModal from "./DeleteModal";
+import type { Report, ReportMapping } from "@itwin/insights-client";
+import { REPORTING_BASE_PATH, ReportingClient } from "@itwin/insights-client";
+import AddMappingsModal from "./AddMappingsModal";
+import type {
+  GetSingleIModelParams,
+  IModelsClientOptions,
+} from "@itwin/imodels-client-management";
+import { Constants, IModelsClient } from "@itwin/imodels-client-management";
+import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
+import { HorizontalTile } from "./HorizontalTile";
+import { Extraction, ExtractionStates, ExtractionStatus } from "./Extraction";
+import { SearchBar } from "./SearchBar";
+import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+export type ReportMappingType = CreateTypeFromInterface<ReportMapping>;
+
+export type ReportMappingAndMapping = ReportMappingType & {
+  mappingName: string;
+  mappingDescription: string;
+  iModelName: string;
+};
+
+enum ReportMappingsView {
+  REPORTMAPPINGS = "reportmappings",
+  ADDING = "adding",
+}
+
+const fetchReportMappings = async (
+  setReportMappings: React.Dispatch<
+  React.SetStateAction<ReportMappingAndMapping[]>
+  >,
+  reportId: 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 reportMappings = await reportingClientApi.getReportMappings(
+      accessToken,
+      reportId
+    );
+    const iModelClientOptions: IModelsClientOptions = {
+      api: { baseUrl: generateUrl(Constants.api.baseUrl, apiContext.baseUrl) },
+    };
+
+    const iModelsClient: IModelsClient = new IModelsClient(iModelClientOptions);
+    const authorization =
+      AccessTokenAdapter.toAuthorizationCallback(accessToken);
+    const iModelNames = new Map<string, string>();
+    const reportMappingsAndMapping = await Promise.all(
+      reportMappings?.map(async (reportMapping) => {
+        const iModelId = reportMapping.imodelId ?? "";
+        let iModelName = "";
+        const mapping = await reportingClientApi.getMapping(
+          accessToken,
+          reportMapping.mappingId ?? "",
+          iModelId
+        );
+        if (iModelNames.has(iModelId)) {
+          iModelName = iModelNames.get(iModelId) ?? "";
+        } else {
+          const getSingleParams: GetSingleIModelParams = {
+            authorization,
+            iModelId,
+          };
+          const iModel = await iModelsClient.iModels.getSingle(getSingleParams);
+          iModelName = iModel.displayName;
+          iModelNames.set(iModelId, iModelName);
+        }
+        const reportMappingAndMapping: ReportMappingAndMapping = {
+          ...reportMapping,
+          iModelName,
+          mappingName: mapping.mapping?.mappingName ?? "",
+          mappingDescription: mapping.mapping?.description ?? "",
+        };
+        return reportMappingAndMapping;
+      }) ?? []
+    );
+
+    setReportMappings(reportMappingsAndMapping);
+  } catch (error: any) {
+    handleError(error.status);
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+interface ReportMappingsProps {
+  report: Report;
+  goBack: () => Promise<void>;
+}
+
+export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
+  const apiConfig = useReportsApiConfig();
+  const [reportMappingsView, setReportMappingsView] =
+    useState<ReportMappingsView>(ReportMappingsView.REPORTMAPPINGS);
+  const [selectedReportMapping, setSelectedReportMapping] = useState<
+  ReportMappingAndMapping | undefined
+  >(undefined);
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const [extractionState, setExtractionState] = useState<ExtractionStates>(
+    ExtractionStates.None
+  );
+  const [runningIModelId, setRunningIModelId] = useState<string>("");
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [reportMappings, setReportMappings] = useState<
+  ReportMappingAndMapping[]
+  >([]);
+
+  useEffect(() => {
+    void fetchReportMappings(
+      setReportMappings,
+      report.id ?? "",
+      setIsLoading,
+      apiConfig
+    );
+  }, [apiConfig, report.id, setIsLoading]);
+
+  const refresh = useCallback(async () => {
+    setReportMappingsView(ReportMappingsView.REPORTMAPPINGS);
+    await fetchReportMappings(
+      setReportMappings,
+      report.id ?? "",
+      setIsLoading,
+      apiConfig
+    );
+  }, [apiConfig, report.id, setReportMappings]);
+
+  const addMapping = () => {
+    setReportMappingsView(ReportMappingsView.ADDING);
+  };
+
+  const uniqueIModels = useMemo(
+    () =>
+      new Map(
+        reportMappings.map((mapping) => [
+          mapping.imodelId ?? "",
+          mapping.iModelName,
+        ])
+      ),
+    [reportMappings]
+  );
+
+  const odataFeedUrl = `${generateUrl(
+    REPORTING_BASE_PATH,
+    apiConfig.baseUrl
+  )}/odata/${report.id}`;
+
+  const filteredReportMappings = useMemo(
+    () =>
+      reportMappings.filter((x) =>
+        [x.iModelName, x.mappingName, x.mappingDescription]
+          .join(" ")
+          .toLowerCase()
+          .includes(searchValue.toLowerCase())
+      ),
+    [reportMappings, searchValue]
+  );
+
+  return (
+    <>
+      <WidgetHeader title={report.displayName ?? ""} returnFn={goBack} />
+      <div className="report-mapping-misc">
+        <LabeledInput
+          label={ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:ODataFeedURL"
+          )}
+          className="odata-url-input"
+          readOnly={true}
+          value={odataFeedUrl}
+          svgIcon={
+            <IconButton
+              title={ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:Copy"
+              )}
+              styleType="borderless"
+              onClick={async (_) => {
+                await navigator.clipboard.writeText(odataFeedUrl);
+                toaster.positive(
+                  ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:CopiedToClipboard"
+                  )
+                );
+              }}
+            >
+              <SvgCopy />
+            </IconButton>
+          }
+          iconDisplayStyle="inline"
+        />
+        <Extraction
+          iModels={uniqueIModels}
+          extractionState={extractionState}
+          setExtractionState={setExtractionState}
+          setExtractingIModelId={setRunningIModelId}
+          isLoading={isLoading}
+        />
+      </div>
+      <Surface className="report-mappings-container">
+        <div className="toolbar">
+          <Button
+            startIcon={<SvgAdd />}
+            onClick={() => addMapping()}
+            styleType="high-visibility"
+          >
+            {ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:AddMapping"
+            )}
+          </Button>
+          <div className="search-bar-container" data-testid="search-bar">
+            <SearchBar
+              searchValue={searchValue}
+              setSearchValue={setSearchValue}
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+        {isLoading ? (
+          <LoadingOverlay />
+        ) : reportMappings.length === 0 ? (
+          <EmptyMessage>
+            <>
+              <Text>
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:NoReportMappings"
+                )}
+              </Text>
+              <div>
+                <Button onClick={() => addMapping()} styleType="cta">
+                  {ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:LetsAddSomeMappingsCTA"
+                  )}
+                </Button>
+              </div>
+            </>
+          </EmptyMessage>
+        ) : (
+          <div className="mapping-list">
+            {filteredReportMappings.map((mapping) => (
+              <HorizontalTile
+                key={mapping.mappingId}
+                title={mapping.mappingName}
+                subText={mapping.iModelName}
+                titleTooltip={mapping.mappingDescription}
+                button={
+                  <ExtractionStatus
+                    state={
+                      mapping.imodelId === runningIModelId
+                        ? extractionState
+                        : ExtractionStates.None
+                    }
+                  >
+                    <DropdownMenu
+                      menuItems={(close: () => void) => [
+                        <MenuItem
+                          key={0}
+                          onClick={() => {
+                            setSelectedReportMapping(mapping);
+                            setShowDeleteModal(true);
+                            close();
+                          }}
+                          icon={<SvgDelete />}
+                        >
+                          {ReportsConfigWidget.localization.getLocalizedString(
+                            "ReportsConfigWidget:Remove"
+                          )}
+                        </MenuItem>,
+                      ]}
+                    >
+                      <IconButton styleType="borderless">
+                        <SvgMore
+                          style={{
+                            width: "16px",
+                            height: "16px",
+                          }}
+                        />
+                      </IconButton>
+                    </DropdownMenu>
+                  </ExtractionStatus>
+                }
+              />
+            ))}
+          </div>
+        )}
+      </Surface>
+      <AddMappingsModal
+        show={reportMappingsView === ReportMappingsView.ADDING}
+        reportId={report.id ?? ""}
+        existingMappings={reportMappings}
+        returnFn={refresh}
+      />
+      <DeleteModal
+        entityName={selectedReportMapping?.mappingName ?? ""}
+        show={showDeleteModal}
+        setShow={setShowDeleteModal}
+        onDelete={async () => {
+          const reportingClientApi = new ReportingClient(
+            generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+          );
+          const accessToken = await apiConfig.getAccessToken();
+          await reportingClientApi.deleteReportMapping(
+            accessToken,
+            report.id ?? "",
+            selectedReportMapping?.mappingId ?? ""
+          );
+        }}
+        refresh={refresh}
+      />
+    </>
+  );
+};