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

package/src/widget/components/ReportAction.tsx

@@ -2,30 +2,27 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { Fieldset, LabeledInput, Small } from "@itwin/itwinui-react";
+import { Fieldset, LabeledInput, Text } from "@itwin/itwinui-react";
 import React, { useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import {
-  generateUrl,
   handleError,
   handleInputChange,
-  WidgetHeader,
 } from "./utils";
 import "./ReportAction.scss";
 import type { Report } from "@itwin/insights-client";
-import { REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 
-interface ReportActionProps {
-  iTwinId: string;
+export interface ReportActionProps {
   report?: Report;
-  returnFn: () => Promise<void>;
+  onSaveSuccess: () => void;
+  onClickCancel?: () => void;
 }
 
-const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
-  const apiConfig = useReportsApiConfig();
+export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportActionProps) => {
+  const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
   const [values, setValues] = useState({
     name: report?.displayName ?? "",
     description: report?.description ?? "",
@@ -40,21 +37,22 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
         return;
       }
       setIsLoading(true);
-      const reportsClientApi = new ReportsClient(
-        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-      );
-      const accessToken = await apiConfig.getAccessToken();
+      const accessToken = await getAccessToken();
       report
-        ? await reportsClientApi.updateReport(accessToken, report.id ?? "", {
+        ? await reportsClient.updateReport(accessToken, report.id ?? "", {
           displayName: values.name,
           description: values.description,
         })
-        : await reportsClientApi.createReport(accessToken, {
+        : await reportsClient.createReport(accessToken, {
           displayName: values.name,
           description: values.description,
           projectId: iTwinId,
         });
-      await returnFn();
+      onSaveSuccess();
+      setValues({
+        name: report?.displayName ?? "",
+        description: report?.description ?? "",
+      });
     } catch (error: any) {
       handleError(error.status);
       setIsLoading(false);
@@ -65,18 +63,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
 
   return (
     <>
-      <WidgetHeader
-        title={
-          report
-            ? ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:ModifyReport"
-            )
-            : ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:AddReport"
-            )
-        }
-        returnFn={returnFn}
-      />
       <div className="rcw-details-form-container">
         <Fieldset
           legend={ReportsConfigWidget.localization.getLocalizedString(
@@ -84,11 +70,11 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
           )}
           className="rcw-details-form"
         >
-          <Small className="field-legend">
+          <Text variant='small' className="field-legend">
             {ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:MandatoryFields"
             )}
-          </Small>
+          </Text>
           <LabeledInput
             name="name"
             label={ReportsConfigWidget.localization.getLocalizedString(
@@ -133,7 +119,7 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
           "ReportsConfigWidget:Add"
         )}
         onAction={onSave}
-        onCancel={returnFn}
+        onCancel={onClickCancel}
         isSavingDisabled={!values.name}
         isLoading={isLoading}
       />
@@ -141,4 +127,3 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
   );
 };
 
-export default ReportAction;

package/src/widget/components/ReportHorizontalTile.tsx

@@ -2,9 +2,8 @@
 * 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 React, { useEffect, useRef, useState } 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";
@@ -21,16 +20,16 @@ import {
   SvgMore,
 } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
-import type { HorizontalTileProps } from "./HorizontalTile";
 
-export interface ReportHorizontalTileProps extends Pick<HorizontalTileProps, "onClickTitle"> {
+export interface ReportHorizontalTileProps {
   selected: boolean;
   onSelectionChange: (reportId: string, controlPressed: boolean) => void;
   bulkExtractor: BulkExtractor;
   jobStartEvent: BeEvent<(reportId: string) => void>;
   report: Report;
   onClickDelete: () => void;
-  onClickModify: () => void;
+  onClickModify?: (report: Report) => void;
+  onClickTitle?: (report: Report) => void;
 }
 
 export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
@@ -81,7 +80,7 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
       subtextToolTip={props.report.description ?? ""}
       titleTooltip={props.report.displayName}
       onClick={onClickTile}
-      onClickTitle={props.onClickTitle}
+      onClickTitle={() => props.onClickTitle?.(props.report)}
       selected={props.selected}
       actionGroup={extractionState === ExtractionStates.None ? (
         <div
@@ -89,15 +88,15 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
           data-testid="tile-action-button">
           <DropdownMenu
             menuItems={(close: () => void) => [
-              <MenuItem
+              props.onClickModify ? <MenuItem
                 key={0}
-                onClick={props.onClickModify}
+                onClick={() => props.onClickModify?.(props.report)}
                 icon={<SvgEdit />}
               >
                 {ReportsConfigWidget.localization.getLocalizedString(
                   "ReportsConfigWidget:Modify"
                 )}
-              </MenuItem>,
+              </MenuItem> : [],
               <MenuItem
                 key={1}
                 onClick={() => {
@@ -110,9 +109,9 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
                   "ReportsConfigWidget:Remove"
                 )}
               </MenuItem>,
-            ]}
+            ].flat()}
           >
-            <IconButton styleType="borderless">
+            <IconButton styleType="borderless" title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportOptions")}>
               <SvgMore />
             </IconButton>
           </DropdownMenu>

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -2,9 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { useCallback, useEffect, useRef, useState } from "react";
-import React from "react";
-import type BulkExtractor from "./BulkExtractor";
+import React, { useCallback, useEffect, useRef, useState } 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";
@@ -12,7 +11,7 @@ import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import { IconButton } from "@itwin/itwinui-react";
 import {
   SvgDelete,
-  SvgRefresh,
+  SvgPlay,
 } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
 import type { ReportMappingAndMapping } from "./ReportMappings";
@@ -87,20 +86,33 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
           data-testid="tile-action-button">
           {extractionState === ExtractionStates.None ?
             (
-              <IconButton
-                styleType="borderless"
-                title={ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:UpdateDataset"
-                )}
-                onClick={async () => {
-                  setExtractionState(ExtractionStates.Starting);
-                  await props.bulkExtractor.runIModelExtraction(props.mapping.imodelId);
-                  props.jobStartEvent.raiseEvent(props.mapping.imodelId);
-                }}
-                disabled={jobStarted}
-              >
-                <SvgRefresh />
-              </IconButton>
+              <>
+                <IconButton
+                  styleType="borderless"
+                  title={ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:UpdateDataset"
+                  )}
+                  onClick={async () => {
+                    setExtractionState(ExtractionStates.Starting);
+                    await props.bulkExtractor.runIModelExtraction(props.mapping.imodelId);
+                    props.jobStartEvent.raiseEvent(props.mapping.imodelId);
+                  }}
+                  disabled={jobStarted}
+                >
+                  <SvgPlay />
+                </IconButton>
+                <IconButton
+                  styleType="borderless"
+                  title={ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:Remove"
+                  )}
+                  onClick={() => {
+                    props.onClickDelete();
+                  }}
+                >
+                  <SvgDelete />
+                </IconButton>
+              </>
             ) : (
               <ExtractionStatus
                 state={extractionState}
@@ -109,18 +121,6 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
                 }}
               ></ExtractionStatus>
             )}
-          <IconButton
-            styleType="borderless"
-            title={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:Remove"
-            )}
-            onClick={() => {
-              props.onClickDelete();
-            }}
-            disabled={jobStarted}
-          >
-            <SvgDelete />
-          </IconButton>
         </div >
       )}
     />

package/src/widget/components/ReportMappings.scss

@@ -2,31 +2,29 @@
 * 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";
 
 .rcw-report-mapping-misc {
   display: flex;
   flex-direction: column;
-  gap: $iui-baseline;
+  gap: var(--iui-size-s);
 }
 
 .rcw-report-mappings-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: $iui-baseline $iui-m;
   min-height: 0;
 
   .rcw-odata-url-input {
-    margin-bottom: $iui-baseline * 2;
+    margin-bottom: calc(var(--iui-size-s) * 2);
   }
 
   .rcw-toolbar {
     display: flex;
     justify-content: space-between;
-    gap: $iui-s;
-    border-bottom: 1px solid var(--iui-color-background-4);
-    padding-bottom: $iui-baseline;
+    gap: var(--iui-size-xs);
+    border-bottom: 1px solid var(--iui-color-border-subtle);
+    padding-bottom: var(--iui-size-s);
     flex-wrap: wrap;
   }
 
@@ -34,13 +32,14 @@
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
-    gap: 7.5px;
-    margin-top: 7.5px;
+    gap: var(--iui-size-xs);
+    margin-top: var(--iui-size-xs);
   }
 
   .rcw-search-bar-container {
-    flex-basis: $iui-3xl;
+    flex-basis: var(--iui-size-3xl);
     flex-shrink: 1;
     flex-grow: 1;
+    display: flex;
   }
-}
+}

package/src/widget/components/ReportMappings.tsx

@@ -5,12 +5,12 @@
 import {
   SvgAdd,
   SvgCopy,
+  SvgRefresh,
 } from "@itwin/itwinui-icons-react";
 import {
   Button,
   IconButton,
   LabeledInput,
-  Surface,
   Text,
   toaster,
 } from "@itwin/itwinui-react";
@@ -21,27 +21,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";
 
 export type ReportMappingType = CreateTypeFromInterface<ReportMapping>;
 
@@ -51,35 +49,22 @@ export type ReportMappingAndMapping = ReportMappingType & {
   iModelName: string;
 };
 
-enum ReportMappingsView {
-  REPORTMAPPINGS = "reportmappings",
-  ADDING = "adding",
-}
-
 const fetchReportMappings = async (
   setReportMappings: (mappings: ReportMappingAndMapping[]) => void,
   reportId: string,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  apiContext: ReportsApiConfig
+  setIsLoading: (isLoading: boolean) => void,
+  reportsClient: ReportsClient,
+  mappingsClient: MappingsClient,
+  iModelsClient: IModelsClient,
+  getAccessToken: () => Promise<AccessToken>
 ) => {
   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) },
-    };
-
-    const iModelsClient: IModelsClient = new IModelsClient(iModelClientOptions);
     const authorization =
       AccessTokenAdapter.toAuthorizationCallback(accessToken);
     const iModelNames = new Map<string, string>();
@@ -88,7 +73,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
@@ -121,23 +106,21 @@ const fetchReportMappings = async (
   }
 };
 
-interface ReportMappingsProps {
+export interface ReportMappingsProps {
   report: Report;
-  bulkExtractor: BulkExtractor;
-  goBack: () => Promise<void>;
+  onClickClose: () => void;
+  defaultIModelId?: string;
 }
 
-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);
+export const ReportMappings = ({ report, onClickClose, defaultIModelId }: ReportMappingsProps) => {
+  const { getAccessToken, reportsClient, iModelsClient, mappingsClient, baseUrl } = useReportsConfigApi();
+  const [showDeleteModal, setShowDeleteModal] = useState<ReportMappingAndMapping | undefined>(undefined);
+  const [showAddMapping, setShowAddMapping] = useState<boolean>(false);
+  const { bulkExtractor } = useBulkExtractor();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState<string>("");
   const [reportMappings, setReportMappings] = useState<ReportMappingAndMapping[]>([]);
   const [jobRunning, setJobRunning] = useState<boolean>(false);
-
   const jobStartEvent = useMemo(
     () => new BeEvent<(iModelId: string) => void>(),
     []
@@ -148,33 +131,39 @@ 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]);
 
   useEffect(() => {
+    if (!bulkExtractor) return;
     bulkExtractor.setHook(setJobRunning, reportMappings.map((x) => x.imodelId));
   }, [bulkExtractor, reportMappings]);
 
   const refresh = useCallback(async () => {
-    setReportMappingsView(ReportMappingsView.REPORTMAPPINGS);
     await fetchReportMappings(
       setReportMappings,
       report.id,
       setIsLoading,
-      apiConfig
+      reportsClient,
+      mappingsClient,
+      iModelsClient,
+      getAccessToken
     );
-  }, [apiConfig, report.id, setReportMappings]);
-
-  const addMapping = () => {
-    setReportMappingsView(ReportMappingsView.ADDING);
-  };
+  }, [getAccessToken, iModelsClient, mappingsClient, report.id, reportsClient]);
 
   const odataFeedUrl = `${generateUrl(
     REPORTING_BASE_PATH,
-    apiConfig.baseUrl
+    baseUrl
   )}/odata/${report.id}`;
 
+  const addMapping = useCallback(() => {
+    setShowAddMapping(true);
+  }, []);
+
   const filteredReportMappings = useMemo(
     () =>
       reportMappings.filter((x) =>
@@ -186,10 +175,13 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
     [reportMappings, searchValue]
   );
 
+  const onAddMappingsModalClose = useCallback(async () => { await refresh(); setShowAddMapping(false); }, [refresh]);
+
+  if (!bulkExtractor) return null;
+
   return (
     <>
-      <WidgetHeader title={report.displayName} returnFn={goBack} />
-      <div className="rcw-report-mapping-misc">
+      <div className="rcw-report-mappings-container">
         <LabeledInput
           label={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ODataFeedURL"
@@ -202,7 +194,6 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
               title={ReportsConfigWidget.localization.getLocalizedString(
                 "ReportsConfigWidget:Copy"
               )}
-              styleType="borderless"
               onClick={async (_) => {
                 await navigator.clipboard.writeText(odataFeedUrl);
                 toaster.positive(
@@ -217,8 +208,6 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
           }
           iconDisplayStyle="inline"
         />
-      </div>
-      <Surface className="rcw-report-mappings-container">
         <div className="rcw-toolbar">
           <Button
             startIcon={<SvgAdd />}
@@ -230,6 +219,16 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
             )}
           </Button>
           <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
+            <IconButton
+              title={ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:Refresh"
+              )}
+              onClick={refresh}
+              disabled={isLoading}
+              styleType='borderless'
+            >
+              <SvgRefresh />
+            </IconButton>
             <SearchBar
               searchValue={searchValue}
               setSearchValue={setSearchValue}
@@ -248,7 +247,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
                 )}
               </Text>
               <div>
-                <Button onClick={() => addMapping()} styleType="cta">
+                <Button onClick={addMapping} styleType="cta">
                   {ReportsConfigWidget.localization.getLocalizedString(
                     "ReportsConfigWidget:LetsAddSomeMappingsCTA"
                   )}
@@ -264,8 +263,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
                 bulkExtractor={bulkExtractor}
                 mapping={mapping}
                 onClickDelete={() => {
-                  setSelectedReportMapping(mapping);
-                  setShowDeleteModal(true);
+                  setShowDeleteModal(mapping);
                 }}
                 odataFeedUrl={odataFeedUrl}
                 jobStartEvent={jobStartEvent}
@@ -273,29 +271,26 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
             ))}
           </div>
         )}
-      </Surface>
+      </div>
       <AddMappingsModal
-        show={reportMappingsView === ReportMappingsView.ADDING}
+        show={showAddMapping}
         reportId={report.id}
         existingMappings={reportMappings}
-        returnFn={refresh}
+        onClose={onAddMappingsModalClose}
+        defaultIModelId={defaultIModelId}
       />
       <DeleteModal
-        entityName={selectedReportMapping?.mappingName ?? ""}
-        show={showDeleteModal}
-        setShow={setShowDeleteModal}
+        entityName={showDeleteModal?.mappingName ?? ""}
         onDelete={async () => {
-          const reportsClientApi = new ReportsClient(
-            generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-          );
-          const accessToken = await apiConfig.getAccessToken();
-          await reportsClientApi.deleteReportMapping(
+          const accessToken = await getAccessToken();
+          await reportsClient.deleteReportMapping(
             accessToken,
             report.id,
-            selectedReportMapping?.mappingId ?? ""
+            showDeleteModal?.mappingId ?? ""
           );
         }}
         refresh={refresh}
+        onClose={() => setShowDeleteModal(undefined)}
       />
       <div className="rcw-action-panel">
         {isLoading && <LoadingSpinner />}
@@ -318,7 +313,7 @@ export const ReportMappings = ({ report, bulkExtractor, goBack }: ReportMappings
         <Button
           styleType="default"
           type="button"
-          onClick={goBack}
+          onClick={onClickClose}
           disabled={isLoading}
         >
           {ReportsConfigWidget.localization.getLocalizedString(