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

package/src/widget/components/ReportMappings.scss

@@ -4,24 +4,24 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.report-mapping-misc {
+.rcw-report-mapping-misc {
   display: flex;
   flex-direction: column;
   gap: $iui-baseline;
 }
 
-.report-mappings-container {
+.rcw-report-mappings-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: $iui-baseline $iui-m;
   min-height: 0;
 
-  .odata-url-input {
+  .rcw-odata-url-input {
     margin-bottom: $iui-baseline * 2;
   }
 
-  .toolbar {
+  .rcw-toolbar {
     display: flex;
     justify-content: space-between;
     gap: $iui-s;
@@ -30,7 +30,7 @@
     flex-wrap: wrap;
   }
 
-  .mapping-list {
+  .rcw-mapping-list {
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
@@ -38,9 +38,9 @@
     margin-top: 7.5px;
   }
 
-  .search-bar-container {
+  .rcw-search-bar-container {
     flex-basis: $iui-3xl;
     flex-shrink: 1;
     flex-grow: 1;
   }
-}
+}

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>;
 
@@ -85,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 {
@@ -125,23 +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 [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[]>([]);
+  const [jobRunning, setJobRunning] = useState<boolean>(false);
+
+  const jobStartEvent = useMemo(
+    () => new BeEvent<(iModelId: string) => void>(),
+    []
+  );
 
   useEffect(() => {
     void fetchReportMappings(
@@ -152,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(
@@ -166,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
@@ -196,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={
@@ -224,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()}
@@ -243,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}
@@ -271,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}
-                actionGroup={
-                  <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>
@@ -342,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,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.reports-list-container {
+.rcw-reports-list-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;

package/src/widget/components/Reports.tsx

@@ -4,12 +4,13 @@
 *--------------------------------------------------------------------------------------------*/
 import {
   SvgAdd,
-  SvgRefresh,
+  SvgPlay,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
   IconButton,
   Surface,
+  toaster,
 } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
@@ -34,6 +35,7 @@ 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>;
 
@@ -67,6 +69,14 @@ 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[]>([]);
@@ -81,8 +91,8 @@ export const Reports = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [reports, setReports] = useState<Report[]>([]);
   const bulkExtractor = useMemo(
-    () => new BulkExtractor(apiConfig, reports.map((r) => r.id)),
-    [apiConfig, reports]
+    () => new BulkExtractor(apiConfig, successfulExtractionToast, failedExtractionToast),
+    [apiConfig]
   );
   const jobStartEvent = useMemo(
     () => new BeEvent<(reportId: string) => void>(),
@@ -128,9 +138,9 @@ export const Reports = () => {
   };
 
   const updateDatasets = useCallback(async () => {
+    await bulkExtractor.runReportExtractions(selectedReportIds);
     selectedReportIds.map((reportId) => jobStartEvent.raiseEvent(reportId));
     setSelectedReportIds([]);
-    await bulkExtractor.startJobs(selectedReportIds);
   }, [selectedReportIds, jobStartEvent, bulkExtractor]);
 
   switch (reportsView) {
@@ -148,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 (
@@ -158,7 +168,7 @@ export const Reports = () => {
               "ReportsConfigWidget:ITwinReports"
             )}
           />
-          <Surface className="reports-list-container">
+          <Surface className="rcw-reports-list-container">
             <div className="rcw-toolbar">
               <Button
                 startIcon={<SvgAdd />}
@@ -176,9 +186,9 @@ export const Reports = () => {
                 onClick={updateDatasets}
                 disabled={selectedReportIds.length === 0}
               >
-                <SvgRefresh />
+                <SvgPlay />
               </IconButton>
-              <div className="rcw-search-bar-container" data-testid="search-bar">
+              <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
                 <div className="rcw-search-button">
                   <SearchBar
                     searchValue={searchValue}

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/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}

package/src/widget/components/utils.scss

@@ -11,7 +11,7 @@
   margin-bottom: $iui-baseline;
   align-items: center;
 
-  .title {
+  .rcw-title {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -36,4 +36,4 @@
 .rcw-skeleton-block {
   height: $iui-baseline * 3;
   width: 100%;
-}
+}

package/src/widget/components/utils.tsx

@@ -35,7 +35,7 @@ export const WidgetHeader = ({
           <SvgChevronLeft />
         </IconButton>
       )}
-      <Text className="title" variant="title">
+      <Text className="rcw-title" variant="title">
         {title}
       </Text>
     </div>