@itwin/reports-config-widget-react 0.0.8 → 0.1.0

package/src/widget/components/HorizontalTile.tsx

@@ -6,51 +6,62 @@ import type { ReactNode } from "react";
 import React from "react";
 import { Text } from "@itwin/itwinui-react";
 import "./HorizontalTile.scss";
+import classNames from "classnames";
 
-interface HorizontalTileProps {
+export interface HorizontalTileProps extends React.ComponentPropsWithoutRef<"div"> {
   title: string;
-  button: ReactNode;
-  subText?: string;
-  onClickTitle?: () => void;
-  titleTooltip?: string;
+  actionGroup: ReactNode;
+  subText: string;
+  onClickTitle?: React.MouseEventHandler;
+  titleTooltip: string;
   subtextToolTip?: string;
+  selected?: boolean;
 }
 
-export const HorizontalTile = ({
-  title,
-  subText,
-  onClickTitle,
-  titleTooltip,
-  subtextToolTip,
-  button,
-}: HorizontalTileProps) => {
+export const HorizontalTile = (props: HorizontalTileProps) => {
+  const {
+    title,
+    titleTooltip,
+    subText,
+    subtextToolTip,
+    actionGroup,
+    selected,
+    className,
+    onClickTitle,
+    ...rest
+  } = props;
+
   return (
     <div
-      className="rcw-horizontal-tile-container"
+      className={classNames(
+        "rcw-horizontal-tile-container",
+        { "rcw-horizontal-tile-selected": selected },
+        className
+      )}
+      onClick={rest.onClick}
       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}
+      <div className="rcw-body-container">
+        <div className="rcw-body">
+          <Text className={classNames("rcw-body-text", { "iui-anchor": !!onClickTitle })}
+            onClick={onClickTitle}
+            variant="body"
+            title={titleTooltip}>{title}
           </Text>
-        )}
+          {
+            subText &&
+            <Text className="rcw-body-text"
+              isMuted={true}
+              title={subtextToolTip}
+              variant="small">{subText}
+            </Text>
+          }
+        </div>
       </div>
-      <div className="action-button" data-testid="tile-action-button">
-        {button}
+      <div
+        className="rcw-action-button"
+        data-testid="tile-action-button">
+        {actionGroup}
       </div>
     </div>
   );

package/src/widget/components/ReportHorizontalTile.tsx

@@ -0,0 +1,131 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { useEffect, useRef, useState } from "react";
+import React from "react";
+import type BulkExtractor from "./BulkExtractor";
+import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
+import type { BeEvent } from "@itwin/core-bentley";
+import { STATUS_CHECK_INTERVAL } from "./Constants";
+import type { Report } from "@itwin/insights-client";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import {
+  DropdownMenu,
+  IconButton,
+  MenuItem,
+} from "@itwin/itwinui-react";
+import {
+  SvgDelete,
+  SvgEdit,
+  SvgMore,
+} from "@itwin/itwinui-icons-react";
+import { HorizontalTile } from "./HorizontalTile";
+import type { HorizontalTileProps } from "./HorizontalTile";
+
+export interface ReportHorizontalTileProps extends Pick<HorizontalTileProps, "onClickTitle"> {
+  selected: boolean;
+  onSelectionChange: (reportId: string, controlPressed: boolean) => void;
+  bulkExtractor: BulkExtractor;
+  jobStartEvent: BeEvent<(reportId: string) => void>;
+  report: Report;
+  onClickDelete: () => void;
+  onClickModify: () => void;
+}
+
+export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
+  const [jobStarted, setJobStarted] = useState<boolean>(false);
+  const [extractionState, setExtractionState] = useState<ExtractionStates>(ExtractionStates.None);
+  const interval = useRef<number>();
+
+  useEffect(() => {
+    const listener = (startedReportId: string) => {
+      if (startedReportId === props.report.id) {
+        setExtractionState(ExtractionStates.Starting);
+        setJobStarted(true);
+      }
+    };
+    props.jobStartEvent.addListener(listener);
+
+    return () => {
+      props.jobStartEvent.removeListener(listener);
+    };
+  }, [props.jobStartEvent, props.report.id]);
+
+  useEffect(() => {
+    if (jobStarted) {
+      window.clearInterval(interval.current);
+      interval.current = window.setInterval(async () => {
+        const state = props.bulkExtractor.getState(props.report.id);
+        if (state) {
+          setExtractionState(state);
+          if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded) {
+            setJobStarted(false);
+          }
+        }
+      }, STATUS_CHECK_INTERVAL);
+    }
+    return () => window.clearInterval(interval.current);
+  }, [props.report.id, props.bulkExtractor, jobStarted]);
+
+  const onClickTile = (e: React.MouseEvent) => {
+    if (e?.currentTarget.className?.toString().split(" ").includes("rcw-horizontal-tile-container")) {
+      props.onSelectionChange(props.report.id, e.ctrlKey);
+    }
+  };
+
+  return (
+    <HorizontalTile
+      title={props.report.displayName}
+      subText={props.report.description ?? ""}
+      subtextToolTip={props.report.description ?? ""}
+      titleTooltip={props.report.displayName}
+      onClick={onClickTile}
+      onClickTitle={props.onClickTitle}
+      selected={props.selected}
+      actionGroup={extractionState === ExtractionStates.None ? (
+        <div
+          className="rcw-action-button"
+          data-testid="tile-action-button">
+          <DropdownMenu
+            menuItems={(close: () => void) => [
+              <MenuItem
+                key={0}
+                onClick={props.onClickModify}
+                icon={<SvgEdit />}
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:Modify"
+                )}
+              </MenuItem>,
+              <MenuItem
+                key={1}
+                onClick={() => {
+                  props.onClickDelete();
+                  close();
+                }}
+                icon={<SvgDelete />}
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:Remove"
+                )}
+              </MenuItem>,
+            ]}
+          >
+            <IconButton styleType="borderless">
+              <SvgMore />
+            </IconButton>
+          </DropdownMenu>
+        </div>
+      ) : (
+        <ExtractionStatus
+          state={extractionState}
+          clearExtractionState={() => {
+            props.bulkExtractor.clearJob(props.report.id);
+            setExtractionState(ExtractionStates.None);
+          }}
+        ></ExtractionStatus>
+      )}
+    ></HorizontalTile>
+  );
+};

package/src/widget/components/ReportMappings.tsx

@@ -59,9 +59,7 @@ enum ReportMappingsView {
 }
 
 const fetchReportMappings = async (
-  setReportMappings: React.Dispatch<
-  React.SetStateAction<ReportMappingAndMapping[]>
-  >,
+  setReportMappings: (mappings: ReportMappingAndMapping[]) => void,
   reportId: string,
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
   apiContext: ReportsApiConfig
@@ -134,9 +132,7 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
   const apiConfig = useReportsApiConfig();
   const [reportMappingsView, setReportMappingsView] =
     useState<ReportMappingsView>(ReportMappingsView.REPORTMAPPINGS);
-  const [selectedReportMapping, setSelectedReportMapping] = useState<
-  ReportMappingAndMapping | undefined
-  >(undefined);
+  const [selectedReportMapping, setSelectedReportMapping] = useState<ReportMappingAndMapping | undefined>(undefined);
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
@@ -145,9 +141,7 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
   );
   const [runningIModelId, setRunningIModelId] = useState<string>("");
   const [searchValue, setSearchValue] = useState<string>("");
-  const [reportMappings, setReportMappings] = useState<
-  ReportMappingAndMapping[]
-  >([]);
+  const [reportMappings, setReportMappings] = useState<ReportMappingAndMapping[]>([]);
 
   useEffect(() => {
     void fetchReportMappings(
@@ -284,7 +278,7 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
                 title={mapping.mappingName}
                 subText={mapping.iModelName}
                 titleTooltip={mapping.mappingDescription}
-                button={
+                actionGroup={
                   <ExtractionStatus
                     state={
                       mapping.imodelId === runningIModelId

package/src/widget/components/Reports.scss

@@ -11,7 +11,7 @@
   padding: $iui-baseline $iui-m;
   min-height: 0;
 
-  .toolbar {
+  .rcw-toolbar {
     display: flex;
     justify-content: space-between;
     gap: $iui-s;
@@ -20,13 +20,13 @@
     flex-wrap: wrap;
   }
 
-  .search-bar-container {
+  .rcw-search-bar-container {
     flex-basis: $iui-3xl;
     flex-shrink: 1;
     flex-grow: 1;
   }
 
-  .reports-list {
+  .rcw-reports-list {
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
@@ -34,3 +34,7 @@
     margin-top: 7.5px;
   }
 }
+
+.rcw-button-container {
+  display: flex;
+}

package/src/widget/components/Reports.tsx

@@ -4,15 +4,11 @@
 *--------------------------------------------------------------------------------------------*/
 import {
   SvgAdd,
-  SvgDelete,
-  SvgEdit,
-  SvgMore,
+  SvgRefresh,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
-  DropdownMenu,
   IconButton,
-  MenuItem,
   Surface,
 } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -30,12 +26,14 @@ import type { Report } from "@itwin/insights-client";
 import { REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
 import ReportAction from "./ReportAction";
 import { ReportMappings } from "./ReportMappings";
-import { HorizontalTile } from "./HorizontalTile";
+import { ReportHorizontalTile } from "./ReportHorizontalTile";
 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";
+import BulkExtractor from "./BulkExtractor";
+import { BeEvent } from "@itwin/core-bentley";
 
 export type ReportType = CreateTypeFromInterface<Report>;
 
@@ -71,6 +69,7 @@ const fetchReports = async (
 export const Reports = () => {
   const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
   const apiConfig = useReportsApiConfig();
+  const [selectedReportIds, setSelectedReportIds] = useState<string[]>([]);
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
   const [reportsView, setReportsView] = useState<ReportsView>(
     ReportsView.REPORTS
@@ -81,6 +80,14 @@ export const Reports = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState<string>("");
   const [reports, setReports] = useState<Report[]>([]);
+  const bulkExtractor = useMemo(
+    () => new BulkExtractor(apiConfig, reports.map((r) => r.id)),
+    [apiConfig, reports]
+  );
+  const jobStartEvent = useMemo(
+    () => new BeEvent<(reportId: string) => void>(),
+    []
+  );
 
   useEffect(() => {
     void fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
@@ -107,6 +114,25 @@ export const Reports = () => {
     [reports, searchValue]
   );
 
+  const onSelectionChange = (reportId: string, control: boolean) => {
+    if (!control)
+      setSelectedReportIds([]);
+
+    setSelectedReportIds((sr) =>
+      sr.some((r) => reportId === r)
+        ? sr.filter(
+          (r) => reportId !== r
+        )
+        : [...sr, reportId]
+    );
+  };
+
+  const updateDatasets = useCallback(async () => {
+    selectedReportIds.map((reportId) => jobStartEvent.raiseEvent(reportId));
+    setSelectedReportIds([]);
+    await bulkExtractor.startJobs(selectedReportIds);
+  }, [selectedReportIds, jobStartEvent, bulkExtractor]);
+
   switch (reportsView) {
     case ReportsView.ADDING:
       return iTwinId ? (
@@ -133,7 +159,7 @@ export const Reports = () => {
             )}
           />
           <Surface className="reports-list-container">
-            <div className="toolbar">
+            <div className="rcw-toolbar">
               <Button
                 startIcon={<SvgAdd />}
                 onClick={() => addReport()}
@@ -143,12 +169,23 @@ export const Reports = () => {
                   "ReportsConfigWidget:New"
                 )}
               </Button>
-              <div className="search-bar-container" data-testid="search-bar">
-                <SearchBar
-                  searchValue={searchValue}
-                  setSearchValue={setSearchValue}
-                  disabled={isLoading}
-                />
+              <IconButton
+                title={ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:UpdateDatasets"
+                )}
+                onClick={updateDatasets}
+                disabled={selectedReportIds.length === 0}
+              >
+                <SvgRefresh />
+              </IconButton>
+              <div className="rcw-search-bar-container" data-testid="search-bar">
+                <div className="rcw-search-button">
+                  <SearchBar
+                    searchValue={searchValue}
+                    setSearchValue={setSearchValue}
+                    disabled={isLoading}
+                  />
+                </div>
               </div>
             </div>
             {isLoading ? (
@@ -160,7 +197,7 @@ export const Reports = () => {
                     "ReportsConfigWidget:NoReports"
                   )}
                   <div>
-                    <Button onClick={() => addReport()} styleType="cta">
+                    <Button onClick={addReport} styleType="cta">
                       {ReportsConfigWidget.localization.getLocalizedString(
                         "ReportsConfigWidget:CreateOneReportCTA"
                       )}
@@ -169,58 +206,27 @@ export const Reports = () => {
                 </>
               </EmptyMessage>
             ) : (
-              <div className="reports-list">
+              <div className="rcw-reports-list">
                 {filteredReports.map((report) => (
-                  <HorizontalTile
+                  <ReportHorizontalTile
                     key={report.id}
-                    title={report.displayName}
-                    subText={report.description ?? ""}
-                    subtextToolTip={report.description ?? ""}
-                    titleTooltip={report.displayName}
+                    report={report}
                     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>
-                    }
+                    jobStartEvent={jobStartEvent}
+                    bulkExtractor={bulkExtractor}
+                    onClickDelete={() => {
+                      setSelectedReport(report);
+                      setShowDeleteModal(true);
+                    }}
+                    onClickModify={() => {
+                      setSelectedReport(report);
+                      setReportsView(ReportsView.MODIFYING);
+                    }}
+                    onSelectionChange={onSelectionChange}
+                    selected={selectedReportIds.some((reportId) => report.id === reportId)}
                   />
                 ))}
               </div>

package/src/widget/components/SearchBar.scss

@@ -9,6 +9,7 @@
     opacity: 0;
     width: 20%;
   }
+
   100% {
     opacity: 1;
     width: 100%;
@@ -20,8 +21,13 @@
     opacity: 0;
     width: 20%;
   }
+
   0% {
     opacity: 1;
     width: 100%;
   }
 }
+
+.rcw-search-button {
+  float: right;
+}

package/src/widget/components/SearchBar.tsx

@@ -23,7 +23,7 @@ export const SearchBar = ({
   const [searchBarClosing, setSearchBarClosing] = useState<boolean>(false);
 
   return searchBarOpen || searchValue ? (
-    <div
+    <div className="rcw-search-button"
       style={{
         animation: searchBarClosing ? "rcw-shrink .5s" : "rcw-expand .5s",
       }}