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

package/src/widget/components/ReportMappings.tsx

@@ -5,15 +5,11 @@
 import {
   SvgAdd,
   SvgCopy,
-  SvgDelete,
-  SvgMore,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
-  DropdownMenu,
   IconButton,
   LabeledInput,
-  MenuItem,
   Surface,
   Text,
   toaster,
@@ -31,19 +27,21 @@ import "./ReportMappings.scss";
 import DeleteModal from "./DeleteModal";
 import type { Report, ReportMapping } from "@itwin/insights-client";
 import { MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
-import AddMappingsModal from "./AddMappingsModal";
+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";
+import { ReportMappingHorizontalTile } from "./ReportMappingHorizontalTile";
+import type BulkExtractor from "./BulkExtractor";
+import { BeEvent } from "@itwin/core-bentley";
+import { LoadingSpinner } from "./utils";
 
 export type ReportMappingType = CreateTypeFromInterface<ReportMapping>;
 
@@ -59,9 +57,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
@@ -87,37 +83,37 @@ const fetchReportMappings = async (
     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 mappingsClientApi.getMapping(
-          accessToken,
+
+    const reportMappingsAndMappings = [];
+    for (const reportMapping of reportMappings) {
+      const iModelId = reportMapping.imodelId;
+      let iModelName = "";
+      const mapping = await mappingsClientApi.getMapping(
+        accessToken,
+        iModelId,
+        reportMapping.mappingId
+      );
+      if (iModelNames.has(iModelId)) {
+        iModelName = iModelNames.get(iModelId) ?? "";
+      } else {
+        const getSingleParams: GetSingleIModelParams = {
+          authorization,
           iModelId,
-          reportMapping.mappingId
-        );
-        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.mappingName,
-          mappingDescription: mapping.description ?? "",
         };
-        return reportMappingAndMapping;
-      }) ?? []
-    );
+        const iModel = await iModelsClient.iModels.getSingle(getSingleParams);
+        iModelName = iModel.displayName;
+        iModelNames.set(iModelId, iModelName);
+      }
+      const reportMappingAndMapping: ReportMappingAndMapping = {
+        ...reportMapping,
+        iModelName,
+        mappingName: mapping.mappingName,
+        mappingDescription: mapping.description ?? "",
+      };
+      reportMappingsAndMappings.push(reportMappingAndMapping);
+    }
 
-    setReportMappings(reportMappingsAndMapping);
+    setReportMappings(reportMappingsAndMappings);
   } catch (error: any) {
     handleError(error.status);
   } finally {
@@ -127,27 +123,25 @@ const fetchReportMappings = async (
 
 interface ReportMappingsProps {
   report: Report;
+  bulkExtractor: BulkExtractor;
   goBack: () => Promise<void>;
 }
 
-export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
+export const ReportMappings = ({ report, bulkExtractor, 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);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [reportMappings, setReportMappings] = useState<ReportMappingAndMapping[]>([]);
+  const [jobRunning, setJobRunning] = useState<boolean>(false);
 
-  const [extractionState, setExtractionState] = useState<ExtractionStates>(
-    ExtractionStates.None
+  const jobStartEvent = useMemo(
+    () => new BeEvent<(iModelId: string) => void>(),
+    []
   );
-  const [runningIModelId, setRunningIModelId] = useState<string>("");
-  const [searchValue, setSearchValue] = useState<string>("");
-  const [reportMappings, setReportMappings] = useState<
-  ReportMappingAndMapping[]
-  >([]);
 
   useEffect(() => {
     void fetchReportMappings(
@@ -158,6 +152,10 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
     );
   }, [apiConfig, report.id, setIsLoading]);
 
+  useEffect(() => {
+    bulkExtractor.setHook(setJobRunning, reportMappings.map((x) => x.imodelId));
+  }, [bulkExtractor, reportMappings]);
+
   const refresh = useCallback(async () => {
     setReportMappingsView(ReportMappingsView.REPORTMAPPINGS);
     await fetchReportMappings(
@@ -172,17 +170,6 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
     setReportMappingsView(ReportMappingsView.ADDING);
   };
 
-  const uniqueIModels = useMemo(
-    () =>
-      new Map(
-        reportMappings.map((mapping) => [
-          mapping.imodelId,
-          mapping.iModelName,
-        ])
-      ),
-    [reportMappings]
-  );
-
   const odataFeedUrl = `${generateUrl(
     REPORTING_BASE_PATH,
     apiConfig.baseUrl
@@ -202,12 +189,12 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
   return (
     <>
       <WidgetHeader title={report.displayName} returnFn={goBack} />
-      <div className="report-mapping-misc">
+      <div className="rcw-report-mapping-misc">
         <LabeledInput
           label={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ODataFeedURL"
           )}
-          className="odata-url-input"
+          className="rcw-odata-url-input"
           readOnly={true}
           value={odataFeedUrl}
           svgIcon={
@@ -230,16 +217,9 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
           }
           iconDisplayStyle="inline"
         />
-        <Extraction
-          iModels={uniqueIModels}
-          extractionState={extractionState}
-          setExtractionState={setExtractionState}
-          setExtractingIModelId={setRunningIModelId}
-          isLoading={isLoading}
-        />
       </div>
-      <Surface className="report-mappings-container">
-        <div className="toolbar">
+      <Surface className="rcw-report-mappings-container">
+        <div className="rcw-toolbar">
           <Button
             startIcon={<SvgAdd />}
             onClick={() => addMapping()}
@@ -249,7 +229,7 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
               "ReportsConfigWidget:AddMapping"
             )}
           </Button>
-          <div className="search-bar-container" data-testid="search-bar">
+          <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
             <SearchBar
               searchValue={searchValue}
               setSearchValue={setSearchValue}
@@ -277,49 +257,18 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
             </>
           </EmptyMessage>
         ) : (
-          <div className="mapping-list">
+          <div className="rcw-mapping-list">
             {filteredReportMappings.map((mapping) => (
-              <HorizontalTile
+              <ReportMappingHorizontalTile
                 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>
-                }
+                bulkExtractor={bulkExtractor}
+                mapping={mapping}
+                onClickDelete={() => {
+                  setSelectedReportMapping(mapping);
+                  setShowDeleteModal(true);
+                }}
+                odataFeedUrl={odataFeedUrl}
+                jobStartEvent={jobStartEvent}
               />
             ))}
           </div>
@@ -348,6 +297,35 @@ export const ReportMappings = ({ report, goBack }: ReportMappingsProps) => {
         }}
         refresh={refresh}
       />
+      <div className="rcw-action-panel">
+        {isLoading && <LoadingSpinner />}
+        <Button
+          disabled={isLoading || jobRunning || reportMappings.length === 0}
+          styleType="high-visibility"
+          onClick={async () => {
+            setJobRunning(true);
+            const uniqueIModels = Array.from(new Set(reportMappings.map((x) => x.imodelId)));
+            await bulkExtractor.runIModelExtractions(uniqueIModels);
+            reportMappings.forEach((reportMapping) => {
+              jobStartEvent.raiseEvent(reportMapping.imodelId);
+            });
+          }}
+        >
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:UpdateAllDatasets"
+          )}
+        </Button>
+        <Button
+          styleType="default"
+          type="button"
+          onClick={goBack}
+          disabled={isLoading}
+        >
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Close"
+          )}
+        </Button>
+      </div>
     </>
   );
 };

package/src/widget/components/Reports.scss

@@ -4,14 +4,14 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.reports-list-container {
+.rcw-reports-list-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   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,16 +4,13 @@
 *--------------------------------------------------------------------------------------------*/
 import {
   SvgAdd,
-  SvgDelete,
-  SvgEdit,
-  SvgMore,
+  SvgPlay,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
-  DropdownMenu,
   IconButton,
-  MenuItem,
   Surface,
+  toaster,
 } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
@@ -30,12 +27,15 @@ 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";
+import { FailedExtractionToast, SuccessfulExtractionToast } from "./ExtractionToast";
 
 export type ReportType = CreateTypeFromInterface<Report>;
 
@@ -69,8 +69,17 @@ const fetchReports = async (
 };
 
 export const Reports = () => {
+  const successfulExtractionToast = (iModelName: string, odataFeedUrl: string) => {
+    toaster.positive(<SuccessfulExtractionToast iModelName={iModelName} odataFeedUrl={odataFeedUrl} />);
+  };
+
+  const failedExtractionToast = (iModelName: string) => {
+    toaster.negative(<FailedExtractionToast iModelName={iModelName} />);
+  };
+
   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 +90,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, successfulExtractionToast, failedExtractionToast),
+    [apiConfig]
+  );
+  const jobStartEvent = useMemo(
+    () => new BeEvent<(reportId: string) => void>(),
+    []
+  );
 
   useEffect(() => {
     void fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
@@ -107,6 +124,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 () => {
+    await bulkExtractor.runReportExtractions(selectedReportIds);
+    selectedReportIds.map((reportId) => jobStartEvent.raiseEvent(reportId));
+    setSelectedReportIds([]);
+  }, [selectedReportIds, jobStartEvent, bulkExtractor]);
+
   switch (reportsView) {
     case ReportsView.ADDING:
       return iTwinId ? (
@@ -122,7 +158,7 @@ export const Reports = () => {
       ) : null;
     case ReportsView.REPORTSMAPPING:
       return selectedReport ? (
-        <ReportMappings report={selectedReport} goBack={refresh} />
+        <ReportMappings report={selectedReport} bulkExtractor={bulkExtractor} goBack={refresh} />
       ) : null;
     default:
       return (
@@ -132,8 +168,8 @@ export const Reports = () => {
               "ReportsConfigWidget:ITwinReports"
             )}
           />
-          <Surface className="reports-list-container">
-            <div className="toolbar">
+          <Surface className="rcw-reports-list-container">
+            <div className="rcw-toolbar">
               <Button
                 startIcon={<SvgAdd />}
                 onClick={() => addReport()}
@@ -143,12 +179,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}
+              >
+                <SvgPlay />
+              </IconButton>
+              <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
+                <div className="rcw-search-button">
+                  <SearchBar
+                    searchValue={searchValue}
+                    setSearchValue={setSearchValue}
+                    disabled={isLoading}
+                  />
+                </div>
               </div>
             </div>
             {isLoading ? (
@@ -160,7 +207,7 @@ export const Reports = () => {
                     "ReportsConfigWidget:NoReports"
                   )}
                   <div>
-                    <Button onClick={() => addReport()} styleType="cta">
+                    <Button onClick={addReport} styleType="cta">
                       {ReportsConfigWidget.localization.getLocalizedString(
                         "ReportsConfigWidget:CreateOneReportCTA"
                       )}
@@ -169,58 +216,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/ReportsContainer.scss

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.reports-container {
+.rcw-reports-container {
   position: absolute;
   right: 0;
   left: 0;
@@ -15,4 +15,4 @@
   height: 100%;
   overflow: auto;
   gap: $iui-baseline;
-}
+}

package/src/widget/components/ReportsContainer.tsx

@@ -36,7 +36,7 @@ const ReportsContainer = ({
 
   return (
     <ReportsApiConfigContext.Provider value={apiConfig}>
-      <div className="reports-container">
+      <div className="rcw-reports-container">
         <Reports />
       </div>
     </ReportsApiConfigContext.Provider>

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",
       }}

package/src/widget/components/SelectIModel.scss

@@ -4,12 +4,13 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.reports-select-imodel {
+.rcw-select-imodel {
   position: relative;
   margin-bottom: $iui-baseline * 2;
-  .combobox {
+
+  .rcw-combobox {
     display: flex;
     gap: $iui-s;
     width: 100%;
   }
-}
+}

package/src/widget/components/SelectIModel.tsx

@@ -78,13 +78,13 @@ export const SelectIModel = ({
   }, [iModels]);
 
   return (
-    <div className="reports-select-imodel">
+    <div className="rcw-select-imodel">
       <Label htmlFor="combo-input">
         {ReportsConfigWidget.localization.getLocalizedString(
           "ReportsConfigWidget:SelectIModel"
         )}
       </Label>
-      <div className="combobox">
+      <div className="rcw-combobox">
         <ComboBox<string>
           options={iModelOptions}
           value={selectedIModelId}