npm - @itwin/reports-config-widget-react - Versions diffs - 0.2.1 → 0.4.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (343) hide show

package/coverage/lcov-report/src/widget/components/ReportMappings.tsx.html CHANGED Viewed

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.13% </span>
+                <span class="strong">91.76% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>82/89</span>
+                <span class='fraction'>78/85</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.75% </span>
+                <span class="strong">61.9% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>21/37</span>
+                <span class='fraction'>13/21</span>
             </div>
@@ -44,9 +44,9 @@
             <div class='fl pad1y space-right2'>
-                <span class="strong">91.86% </span>
+                <span class="strong">93.58% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>79/86</span>
+                <span class='fraction'>73/78</span>
             </div>
@@ -389,56 +389,48 @@
 <a name='L324'></a><a href='#L324'>324</a>
 <a name='L325'></a><a href='#L325'>325</a>
 <a name='L326'></a><a href='#L326'>326</a>
-<a name='L327'></a><a href='#L327'>327</a>
-<a name='L328'></a><a href='#L328'>328</a>
-<a name='L329'></a><a href='#L329'>329</a>
-<a name='L330'></a><a href='#L330'>330</a>
-<a name='L331'></a><a href='#L331'>331</a>
-<a name='L332'></a><a href='#L332'>332</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L327'></a><a href='#L327'>327</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -447,35 +439,23 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
@@ -523,24 +503,25 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">77x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">77x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -548,12 +529,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -562,16 +543,19 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
+<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">68x</span>
 <span class="cline-any cline-yes">126x</span>
@@ -582,9 +566,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">77x</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">87x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -616,9 +602,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -644,7 +631,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -655,17 +641,21 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">129x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">131x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -681,7 +671,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -692,6 +681,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -732,12 +722,12 @@
 import {
   SvgAdd,
   SvgCopy,
+  SvgRefresh,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
   IconButton,
   LabeledInput,
-  Surface,
   Text,
   toaster,
 } from "@itwin/itwinui-react";
@@ -748,27 +738,25 @@ import {
   generateUrl,
   handleError,
   LoadingOverlay,
-  WidgetHeader,
+  LoadingSpinner,
 } from "./utils";
 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 type { MappingsClient, Report, ReportMapping, ReportsClient } from "@itwin/insights-client";
+import { REPORTING_BASE_PATH } from "@itwin/insights-client";
 import { AddMappingsModal } from "./AddMappingsModal";
 import type {
   GetSingleIModelParams,
-  IModelsClientOptions,
+  IModelsClient,
 } from "@itwin/imodels-client-management";
-import { Constants, IModelsClient } from "@itwin/imodels-client-management";
 import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
 import { SearchBar } from "./SearchBar";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import { ReportMappingHorizontalTile } from "./ReportMappingHorizontalTile";
-import type BulkExtractor from "./BulkExtractor";
+import type { AccessToken } from "@itwin/core-bentley";
 import { BeEvent } from "@itwin/core-bentley";
-import { LoadingSpinner } from "./utils";
+import { useBulkExtractor } from "../context/BulkExtractorContext";
 &nbsp;
 export type ReportMappingType = CreateTypeFromInterface&lt;ReportMapping&gt;;
 &nbsp;
@@ -778,35 +766,22 @@ export type ReportMappingAndMapping = ReportMappingType &amp; {
   iModelName: string;
 };
 &nbsp;
-enum ReportMappingsView {
-  REPORTMAPPINGS = "reportmappings",
-  ADDING = "adding",
-}
-&nbsp;
 const fetchReportMappings = async (
   setReportMappings: (mappings: ReportMappingAndMapping[]) =&gt; void,
   reportId: string,
-  setIsLoading: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;,
-  apiContext: ReportsApiConfig
+  setIsLoading: (isLoading: boolean) =&gt; void,
+  reportsClient: ReportsClient,
+  mappingsClient: MappingsClient,
+  iModelsClient: IModelsClient,
+  getAccessToken: () =&gt; Promise&lt;AccessToken&gt;
 ) =&gt; {
   try {
     setIsLoading(true);
-    const reportsClientApi = new ReportsClient(
-      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
-    );
-    const mappingsClientApi = new MappingsClient(
-      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
-    );
-    const accessToken = await apiContext.getAccessToken();
-    const reportMappings = await reportsClientApi.getReportMappings(
+    const accessToken = await getAccessToken();
+    const reportMappings = await reportsClient.getReportMappings(
       accessToken,
       reportId
     );
-    const iModelClientOptions: IModelsClientOptions = {
-      api: { baseUrl: generateUrl(Constants.api.baseUrl, apiContext.baseUrl) },
-    };
-&nbsp;
-    const iModelsClient: IModelsClient = new IModelsClient(iModelClientOptions);
     const authorization =
       AccessTokenAdapter.toAuthorizationCallback(accessToken);
     const iModelNames = new Map&lt;string, string&gt;();
@@ -815,7 +790,7 @@ const fetchReportMappings = async (
     for (const reportMapping of reportMappings) {
       const iModelId = reportMapping.imodelId;
       let iModelName = "";
-      const mapping = await mappingsClientApi.getMapping(
+      const mapping = await mappingsClient.getMapping(
         accessToken,
         iModelId,
         reportMapping.mappingId
@@ -848,23 +823,21 @@ const fetchReportMappings = async (
   }
 };
 &nbsp;
-interface ReportMappingsProps {
+export interface ReportMappingsProps {
   report: Report;
-  bulkExtractor: BulkExtractor;
-  goBack: () =&gt; Promise&lt;void&gt;;
+  onClickClose: () =&gt; void;
+  defaultIModelId?: string;
 }
 &nbsp;
-export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappingsProps) =&gt; {
-  const apiConfig = useReportsApiConfig();
-  const [reportMappingsView, setReportMappingsView] =
-    useState&lt;ReportMappingsView&gt;(ReportMappingsView.REPORTMAPPINGS);
-  const [selectedReportMapping, setSelectedReportMapping] = useState&lt;ReportMappingAndMapping | undefined&gt;(undefined);
-  const [showDeleteModal, setShowDeleteModal] = useState&lt;boolean&gt;(false);
+export const ReportMappings = ({ report, onClickClose, defaultIModelId }: ReportMappingsProps) =&gt; {
+  const { getAccessToken, reportsClient, iModelsClient, mappingsClient, baseUrl } = useReportsConfigApi();
+  const [showDeleteModal, setShowDeleteModal] = useState&lt;ReportMappingAndMapping | undefined&gt;(undefined);
+  const [showAddMapping, setShowAddMapping] = useState&lt;boolean&gt;(false);
+  const { bulkExtractor } = useBulkExtractor();
   const [isLoading, setIsLoading] = useState&lt;boolean&gt;(true);
   const [searchValue, setSearchValue] = useState&lt;string&gt;("");
   const [reportMappings, setReportMappings] = useState&lt;ReportMappingAndMapping[]&gt;([]);
   const [jobRunning, setJobRunning] = useState&lt;boolean&gt;(false);
-&nbsp;
   const jobStartEvent = useMemo(
     () =&gt; new BeEvent&lt;(iModelId: string) =&gt; void&gt;(),
     []
@@ -875,32 +848,38 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
       setReportMappings,
       report.id,
       setIsLoading,
-      apiConfig
+      reportsClient,
+      mappingsClient,
+      iModelsClient,
+      getAccessToken
     );
-  }, [apiConfig, report.id, setIsLoading]);
+  }, [getAccessToken, iModelsClient, mappingsClient, report.id, reportsClient, setIsLoading]);
 &nbsp;
   useEffect(() =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (!bulkExtractor) <span class="cstat-no" title="statement not covered" >return;</span>
     bulkExtractor.setHook(setJobRunning, reportMappings.map((x) =&gt; x.imodelId));
   }, [bulkExtractor, reportMappings]);
 &nbsp;
   const refresh = useCallback(async () =&gt; {
-    setReportMappingsView(ReportMappingsView.REPORTMAPPINGS);
     await fetchReportMappings(
       setReportMappings,
       report.id,
       setIsLoading,
-      apiConfig
+      reportsClient,
+      mappingsClient,
+      iModelsClient,
+      getAccessToken
     );
-  }, [apiConfig, report.id, setReportMappings]);
-&nbsp;
-  const addMapping = () =&gt; {
-    setReportMappingsView(ReportMappingsView.ADDING);
-  };
+  }, [getAccessToken, iModelsClient, mappingsClient, report.id, reportsClient]);
 &nbsp;
   const odataFeedUrl = `${generateUrl(
     REPORTING_BASE_PATH,
-    apiConfig.baseUrl
+    baseUrl
   )}/odata/${report.id}`;
+&nbsp;
+  const addMapping = useCallback(() =&gt; {
+    setShowAddMapping(true);
+  }, []);
 &nbsp;
   const filteredReportMappings = useMemo(
     () =&gt;
@@ -912,11 +891,14 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
       ),
     [reportMappings, searchValue]
   );
+&nbsp;
+  const onAddMappingsModalClose = useCallback(async () =&gt; { await refresh(); setShowAddMapping(false); }, [refresh]);
+&nbsp;
+  <span class="missing-if-branch" title="if path not taken" >I</span>if (!bulkExtractor) <span class="cstat-no" title="statement not covered" >return null;</span>
 &nbsp;
   return (
     &lt;&gt;
-      &lt;WidgetHeader title={report.displayName} returnFn={goBack} /&gt;
-      &lt;div className="rcw-report-mapping-misc"&gt;
+      &lt;div className="rcw-report-mappings-container"&gt;
         &lt;LabeledInput
           label={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ODataFeedURL"
@@ -929,7 +911,6 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
               title={ReportsConfigWidget.localization.getLocalizedString(
                 "ReportsConfigWidget:Copy"
               )}
-              styleType="borderless"
               onClick={async (_) =&gt; {
                 await navigator.clipboard.writeText(odataFeedUrl);
                 toaster.positive(
@@ -944,8 +925,6 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
           }
           iconDisplayStyle="inline"
         /&gt;
-      &lt;/div&gt;
-      &lt;Surface className="rcw-report-mappings-container"&gt;
         &lt;div className="rcw-toolbar"&gt;
           &lt;Button
             startIcon={&lt;SvgAdd /&gt;}
@@ -957,6 +936,16 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
             )}
           &lt;/Button&gt;
           &lt;div className="rcw-search-bar-container" data-testid="rcw-search-bar"&gt;
+            &lt;IconButton
+              title={ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:Refresh"
+              )}
+              onClick={refresh}
+              disabled={isLoading}
+              styleType='borderless'
+            &gt;
+              &lt;SvgRefresh /&gt;
+            &lt;/IconButton&gt;
             &lt;SearchBar
               searchValue={searchValue}
               setSearchValue={setSearchValue}
@@ -975,7 +964,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
                 )}
               &lt;/Text&gt;
               &lt;div&gt;
-                &lt;Button onClick={<span class="fstat-no" title="function not covered" >() =</span>&gt; <span class="cstat-no" title="statement not covered" >addMapping()}</span> styleType="cta"&gt;
+                &lt;Button onClick={addMapping} styleType="cta"&gt;
                   {ReportsConfigWidget.localization.getLocalizedString(
                     "ReportsConfigWidget:LetsAddSomeMappingsCTA"
                   )}
@@ -991,8 +980,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
                 bulkExtractor={bulkExtractor}
                 mapping={mapping}
                 onClickDelete={<span class="fstat-no" title="function not covered" >() =</span>&gt; {
-<span class="cstat-no" title="statement not covered" >                  setSelectedReportMapping(mapping);</span>
-<span class="cstat-no" title="statement not covered" >                  setShowDeleteModal(true);</span>
+<span class="cstat-no" title="statement not covered" >                  setShowDeleteModal(mapping);</span>
                 }}
                 odataFeedUrl={odataFeedUrl}
                 jobStartEvent={jobStartEvent}
@@ -1000,29 +988,26 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
             ))}
           &lt;/div&gt;
         )}
-      &lt;/Surface&gt;
+      &lt;/div&gt;
       &lt;AddMappingsModal
-        show={reportMappingsView === ReportMappingsView.ADDING}
+        show={showAddMapping}
         reportId={report.id}
         existingMappings={reportMappings}
-        returnFn={refresh}
+        onClose={onAddMappingsModalClose}
+        defaultIModelId={defaultIModelId}
       /&gt;
       &lt;DeleteModal
-        entityName={<span class="branch-1 cbranch-no" title="branch not covered" >selectedReportMapping?.mappingName<span class="branch-0 cbranch-no" title="branch not covered" > </span>?? "</span>"}
-        show={showDeleteModal}
-        setShow={setShowDeleteModal}
+        entityName={showDeleteModal?.mappingName ?? ""}
         onDelete={<span class="fstat-no" title="function not covered" >async </span>() =&gt; {
-          const reportsClientApi = <span class="cstat-no" title="statement not covered" >new ReportsClient(</span>
-            generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-          );
-          const accessToken = <span class="cstat-no" title="statement not covered" >await apiConfig.getAccessToken();</span>
-<span class="cstat-no" title="statement not covered" >          await reportsClientApi.deleteReportMapping(</span>
+          const accessToken = <span class="cstat-no" title="statement not covered" >await getAccessToken();</span>
+<span class="cstat-no" title="statement not covered" >          await reportsClient.deleteReportMapping(</span>
             accessToken,
             report.id,
-            selectedReportMapping?.mappingId ?? ""
+            showDeleteModal?.mappingId ?? ""
           );
         }}
         refresh={refresh}
+        onClose={<span class="fstat-no" title="function not covered" >() =</span>&gt; <span class="cstat-no" title="statement not covered" >setShowDeleteModal(undefined)}</span>
       /&gt;
       &lt;div className="rcw-action-panel"&gt;
         {isLoading &amp;&amp; &lt;LoadingSpinner /&gt;}
@@ -1045,7 +1030,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
         &lt;Button
           styleType="default"
           type="button"
-          onClick={goBack}
+          onClick={onClickClose}
           disabled={isLoading}
         &gt;
           {ReportsConfigWidget.localization.getLocalizedString(
@@ -1063,7 +1048,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue Mar 07 2023 15:47:40 GMT+0000 (Coordinated Universal Time)
+                at Thu Aug 17 2023 14:40:52 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>