@itwin/reports-config-widget-react 0.0.1

package/src/widget/components/Reports.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.reports-list-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: $iui-baseline $iui-m;
+  min-height: 0;
+
+  .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;
+  }
+
+  .search-bar-container {
+    flex-basis: $iui-3xl;
+    flex-shrink: 1;
+    flex-grow: 1;
+  }
+
+  .reports-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: overlay;
+    gap: 7.5px;
+    margin-top: 7.5px;
+  }
+}

package/src/widget/components/Reports.tsx

@@ -0,0 +1,248 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import {
+  SvgAdd,
+  SvgDelete,
+  SvgEdit,
+  SvgMore,
+} from "@itwin/itwinui-icons-react";
+import {
+  Button,
+  DropdownMenu,
+  IconButton,
+  MenuItem,
+  Surface,
+} 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 "./Reports.scss";
+import DeleteModal from "./DeleteModal";
+import type { Report } from "@itwin/insights-client";
+import { REPORTING_BASE_PATH, ReportingClient } from "@itwin/insights-client";
+import ReportAction from "./ReportAction";
+import { ReportMappings } from "./ReportMappings";
+import { HorizontalTile } from "./HorizontalTile";
+import { SearchBar } from "./SearchBar";
+import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import { useActiveIModelConnection } from "@itwin/appui-react";
+
+export type ReportType = CreateTypeFromInterface<Report>;
+
+enum ReportsView {
+  REPORTS = "reports",
+  REPORTSMAPPING = "reportsmapping",
+  ADDING = "adding",
+  MODIFYING = "modifying",
+}
+
+const fetchReports = async (
+  setReports: React.Dispatch<React.SetStateAction<Report[]>>,
+  iTwinId: string | undefined,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  apiContext: ReportsApiConfig
+) => {
+  try {
+    if (!iTwinId) return;
+    setIsLoading(true);
+    const reportingClientApi = new ReportingClient(
+      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
+    );
+    const accessToken = await apiContext.getAccessToken();
+    const reports = await reportingClientApi.getReports(accessToken, iTwinId);
+    setReports(reports ?? []);
+  } catch (error: any) {
+    handleError(error.status);
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+export const Reports = () => {
+  const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
+  const apiConfig = useReportsApiConfig();
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
+  const [reportsView, setReportsView] = useState<ReportsView>(
+    ReportsView.REPORTS
+  );
+  const [selectedReport, setSelectedReport] = useState<Report | undefined>(
+    undefined
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [reports, setReports] = useState<Report[]>([]);
+
+  useEffect(() => {
+    void fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
+  }, [apiConfig, iTwinId, setIsLoading]);
+
+  const refresh = useCallback(async () => {
+    setReportsView(ReportsView.REPORTS);
+    setSelectedReport(undefined);
+    await fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
+  }, [apiConfig, iTwinId, setReports]);
+
+  const addReport = () => {
+    setReportsView(ReportsView.ADDING);
+  };
+
+  const filteredReports = useMemo(
+    () =>
+      reports.filter((x) =>
+        [x.displayName, x.description]
+          .join(" ")
+          .toLowerCase()
+          .includes(searchValue.toLowerCase())
+      ),
+    [reports, searchValue]
+  );
+
+  switch (reportsView) {
+    case ReportsView.ADDING:
+      return iTwinId ? (
+        <ReportAction iTwinId={iTwinId ?? ""} returnFn={refresh} />
+      ) : null;
+    case ReportsView.MODIFYING:
+      return iTwinId ? (
+        <ReportAction
+          iTwinId={iTwinId}
+          report={selectedReport}
+          returnFn={refresh}
+        />
+      ) : null;
+    case ReportsView.REPORTSMAPPING:
+      return selectedReport ? (
+        <ReportMappings report={selectedReport} goBack={refresh} />
+      ) : null;
+    default:
+      return (
+        <>
+          <WidgetHeader
+            title={ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:ITwinReports"
+            )}
+          />
+          <Surface className="reports-list-container">
+            <div className="toolbar">
+              <Button
+                startIcon={<SvgAdd />}
+                onClick={() => addReport()}
+                styleType="high-visibility"
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:New"
+                )}
+              </Button>
+              <div className="search-bar-container" data-testid="search-bar">
+                <SearchBar
+                  searchValue={searchValue}
+                  setSearchValue={setSearchValue}
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+            {isLoading ? (
+              <LoadingOverlay />
+            ) : reports.length === 0 ? (
+              <EmptyMessage>
+                <>
+                  {ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:NoReports"
+                  )}
+                  <div>
+                    <Button onClick={() => addReport()} styleType="cta">
+                      {ReportsConfigWidget.localization.getLocalizedString(
+                        "ReportsConfigWidget:CreateOneReportCTA"
+                      )}
+                    </Button>
+                  </div>
+                </>
+              </EmptyMessage>
+            ) : (
+              <div className="reports-list">
+                {filteredReports.map((report) => (
+                  <HorizontalTile
+                    key={report.id}
+                    title={report.displayName ?? ""}
+                    subText={report.description ?? ""}
+                    subtextToolTip={report.description ?? ""}
+                    titleTooltip={report.displayName}
+                    onClickTitle={() => {
+                      setSelectedReport(report);
+                      setReportsView(ReportsView.REPORTSMAPPING);
+                    }}
+                    button={
+                      <DropdownMenu
+                        menuItems={(close: () => void) => [
+                          <MenuItem
+                            key={0}
+                            onClick={() => {
+                              setSelectedReport(report);
+                              setReportsView(ReportsView.MODIFYING);
+                            }}
+                            icon={<SvgEdit />}
+                          >
+                            {ReportsConfigWidget.localization.getLocalizedString(
+                              "ReportsConfigWidget:Modify"
+                            )}
+                          </MenuItem>,
+                          <MenuItem
+                            key={1}
+                            onClick={() => {
+                              setSelectedReport(report);
+                              setShowDeleteModal(true);
+                              close();
+                            }}
+                            icon={<SvgDelete />}
+                          >
+                            {ReportsConfigWidget.localization.getLocalizedString(
+                              "ReportsConfigWidget:Remove"
+                            )}
+                          </MenuItem>,
+                        ]}
+                      >
+                        <IconButton styleType="borderless">
+                          <SvgMore
+                            style={{
+                              width: "16px",
+                              height: "16px",
+                            }}
+                          />
+                        </IconButton>
+                      </DropdownMenu>
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </Surface>
+          <DeleteModal
+            entityName={selectedReport?.displayName ?? ""}
+            show={showDeleteModal}
+            setShow={setShowDeleteModal}
+            onDelete={async () => {
+              const reportingClientApi = new ReportingClient(
+                generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
+              );
+              const accessToken = await apiConfig.getAccessToken();
+              await reportingClientApi.deleteReport(
+                accessToken,
+                selectedReport?.id ?? ""
+              );
+            }}
+            refresh={refresh}
+          />
+        </>
+      );
+  }
+};

package/src/widget/components/ReportsContainer.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.reports-container {
+  display: flex;
+  flex-direction: column;
+  padding: $iui-baseline $iui-m;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  gap: $iui-baseline;
+}

package/src/widget/components/ReportsContainer.tsx

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import type { AccessToken } from "@itwin/core-bentley";
+import { IModelApp } from "@itwin/core-frontend";
+import * as React from "react";
+import { Reports } from "../components/Reports";
+import { ReportsApiConfigContext } from "../context/ReportsApiConfigContext";
+import "./ReportsContainer.scss";
+
+interface ReportsContainerProps {
+  getAccessToken?: () => Promise<AccessToken>;
+  baseUrl: string;
+}
+
+const ReportsContainer = ({
+  getAccessToken,
+  baseUrl,
+}: ReportsContainerProps) => (
+  <ReportsApiConfigContext.Provider
+    value={{
+      getAccessToken:
+        getAccessToken ??
+        (async () =>
+          (await IModelApp.authorizationClient?.getAccessToken()) ?? ""),
+      baseUrl,
+    }}
+  >
+    <div className="reports-container">
+      <Reports />
+    </div>
+  </ReportsApiConfigContext.Provider>
+);
+
+export default ReportsContainer;

package/src/widget/components/SearchBar.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+@keyframes rcw-expand {
+  0% {
+    opacity: 0;
+    width: 20%;
+  }
+  100% {
+    opacity: 1;
+    width: 100%;
+  }
+}
+
+@keyframes rcw-shrink {
+  100% {
+    opacity: 0;
+    width: 20%;
+  }
+  0% {
+    opacity: 1;
+    width: 100%;
+  }
+}

package/src/widget/components/SearchBar.tsx

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
+import { IconButton, LabeledInput } from "@itwin/itwinui-react";
+import React, { useState } from "react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import "./SearchBar.scss";
+
+interface SearchBarProps {
+  searchValue: string;
+  setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+  disabled?: boolean;
+}
+
+export const SearchBar = ({
+  searchValue,
+  setSearchValue,
+  disabled,
+}: SearchBarProps) => {
+  const [searchBarOpen, setSearchBarOpened] = useState<boolean>(false);
+  const [searchBarClosing, setSearchBarClosing] = useState<boolean>(false);
+
+  return searchBarOpen || searchValue ? (
+    <div
+      style={{
+        animation: searchBarClosing ? "rcw-shrink .5s" : "rcw-expand .5s",
+      }}
+      onAnimationEnd={() => {
+        if (searchBarClosing) {
+          setSearchBarClosing(false);
+          setSearchBarOpened(false);
+          setSearchValue("");
+        }
+      }}
+    >
+      <LabeledInput
+        aria-label="search-textbox"
+        placeholder={ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Search"
+        )}
+        svgIcon={
+          <IconButton
+            onClick={() => setSearchBarClosing(true)}
+            styleType="borderless"
+          >
+            <SvgCloseSmall />
+          </IconButton>
+        }
+        iconDisplayStyle="inline"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
+        disabled={disabled}
+      />{" "}
+    </div>
+  ) : (
+    <IconButton styleType="borderless" onClick={() => setSearchBarOpened(true)}>
+      <SvgSearch />
+    </IconButton>
+  );
+};

package/src/widget/components/SelectIModel.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.reports-select-imodel {
+  position: relative;
+  margin-bottom: $iui-baseline * 2;
+  .combobox {
+    display: flex;
+    gap: $iui-s;
+    width: 100%;
+  }
+}

package/src/widget/components/SelectIModel.tsx

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
+import type {
+  GetIModelListParams,
+  IModelsClientOptions,
+  MinimalIModel,
+} from "@itwin/imodels-client-management";
+import {
+  Constants,
+  IModelsClient,
+  toArray,
+} from "@itwin/imodels-client-management";
+import { ComboBox, Label } from "@itwin/itwinui-react";
+import React, { useEffect, useMemo, useState } from "react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import "./SelectIModel.scss";
+import { generateUrl } from "./utils";
+
+const fetchIModels = async (
+  setiModels: React.Dispatch<React.SetStateAction<MinimalIModel[]>>,
+  iTwinId: string,
+  apiContext: ReportsApiConfig
+) => {
+  const iModelClientOptions: IModelsClientOptions = {
+    api: { baseUrl: generateUrl(Constants.api.baseUrl, apiContext.baseUrl) },
+  };
+
+  const iModelsClient: IModelsClient = new IModelsClient(iModelClientOptions);
+  const accessToken = await apiContext.getAccessToken();
+  const authorization = AccessTokenAdapter.toAuthorizationCallback(accessToken);
+  const getiModelListParams: GetIModelListParams = {
+    urlParams: { projectId: iTwinId },
+    authorization,
+  };
+  const iModels = await toArray(
+    iModelsClient.iModels.getMinimalList(getiModelListParams)
+  );
+  setiModels(iModels);
+};
+
+interface SelectedIModelProps {
+  selectedIModelId: string;
+  setSelectedIModelId: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const SelectIModel = ({
+  selectedIModelId,
+  setSelectedIModelId,
+}: SelectedIModelProps) => {
+  const apiConfig = useReportsApiConfig();
+  const iModelId = useActiveIModelConnection()?.iModelId ?? "";
+  const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
+  const [iModels, setIModels] = useState<MinimalIModel[]>([]);
+
+  useEffect(() => {
+    if (iModelId && iTwinId) {
+      void fetchIModels(setIModels, iTwinId, apiConfig);
+    }
+  }, [apiConfig, setIModels, iModelId, iTwinId]);
+
+  useEffect(() => {
+    if (iModelId && iModels.length > 0) {
+      setSelectedIModelId(iModelId);
+    }
+  }, [iModelId, iModels, setSelectedIModelId]);
+
+  const iModelOptions = useMemo(() => {
+    return iModels.map((iModel) => ({
+      label: iModel.displayName,
+      value: iModel.id,
+    }));
+  }, [iModels]);
+
+  return (
+    <div className="reports-select-imodel">
+      <Label htmlFor="combo-input">
+        {ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:SelectIModel"
+        )}
+      </Label>
+      <div className="combobox">
+        <ComboBox<string>
+          options={iModelOptions}
+          value={selectedIModelId}
+          onChange={(value) => {
+            setSelectedIModelId(value);
+          }}
+          inputProps={{
+            id: "combo-input",
+          }}
+          style={{ flexGrow: 1, maxWidth: "395px" }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/widget/components/utils.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";
+@import "~@itwin/itwinui-css/scss/icon/index";
+@import "~@itwin/itwinui-css/scss/button/index";
+
+.rcw-widget-header-container {
+  display: flex;
+  margin-bottom: $iui-baseline;
+  align-items: center;
+
+  .title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-bottom: 3px;
+  }
+}
+
+.rcw-loading-spinner {
+  display: flex;
+  align-items: center;
+}
+
+.rcw-center-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: $iui-baseline;
+  height: 100%;
+}
+
+.rcw-skeleton-block {
+  height: $iui-baseline * 3;
+  width: 100%;
+}