@itwin/reports-config-widget-react 0.5.0 → 0.7.0

package/src/widget/components/HorizontalTile.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { ReactNode } from "react";
 import React from "react";
 import { Text } from "@itwin/itwinui-react";
@@ -19,48 +19,27 @@ export interface HorizontalTileProps extends React.ComponentPropsWithoutRef<"div
 }
 
 export const HorizontalTile = (props: HorizontalTileProps) => {
-  const {
-    title,
-    titleTooltip,
-    subText,
-    subtextToolTip,
-    actionGroup,
-    selected,
-    className,
-    onClickTitle,
-    ...rest
-  } = props;
+  const { title, titleTooltip, subText, subtextToolTip, actionGroup, selected, className, onClickTitle, ...rest } = props;
 
   return (
     <div
-      className={classNames(
-        "rcw-horizontal-tile-container",
-        { "rcw-horizontal-tile-selected": selected },
-        className
-      )}
+      className={classNames("rcw-horizontal-tile-container", { "rcw-horizontal-tile-selected": selected }, className)}
       onClick={rest.onClick}
       data-testid="horizontal-tile"
     >
       <div className="rcw-body-container">
         <div className="rcw-body">
-          <Text className={classNames("rcw-body-text", { "iui-anchor": !!onClickTitle })}
-            onClick={onClickTitle}
-            variant="body"
-            title={titleTooltip}>{title}
+          <Text className={classNames("rcw-body-text", { "iui-anchor": !!onClickTitle })} onClick={onClickTitle} variant="body" title={titleTooltip}>
+            {title}
           </Text>
-          {
-            subText &&
-            <Text className="rcw-body-text"
-              isMuted={true}
-              title={subtextToolTip}
-              variant="small">{subText}
+          {subText && (
+            <Text className="rcw-body-text" isMuted={true} title={subtextToolTip} variant="small">
+              {subText}
             </Text>
-          }
+          )}
         </div>
       </div>
-      <div
-        className="rcw-action-button"
-        data-testid="tile-action-button">
+      <div className="rcw-action-button" data-testid="tile-action-button">
         {actionGroup}
       </div>
     </div>

package/src/widget/components/LocalizedTablePaginator.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { TablePaginatorRendererProps } from "@itwin/itwinui-react";
 import { TablePaginator } from "@itwin/itwinui-react";
 import React, { useMemo } from "react";
@@ -11,49 +11,18 @@ export const LocalizedTablePaginator = (props: TablePaginatorRendererProps) => {
   const pageSizeList = useMemo(() => [10, 25, 50], []);
   const paginationLocalization = useMemo(
     () => ({
-      pageSizeLabel: (size: number) =>
-        ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Table.SizePerPage",
-          { size }
-        ),
-      rangeLabel: (
-        startIndex: number,
-        endIndex: number,
-        totalRows: number,
-        isLoading: boolean
-      ) =>
+      pageSizeLabel: (size: number) => ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.SizePerPage", { size }),
+      rangeLabel: (startIndex: number, endIndex: number, totalRows: number, isLoading: boolean) =>
         isLoading
-          ? ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Table.StartIndexEndIndex",
-            { startIndex, endIndex }
-          )
-          : ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Table.StartIndexEndIndexOf",
-            { startIndex, endIndex, totalRows }
-          ),
-      previousPage: ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:Table.PreviousPage"
-      ),
-      nextPage: ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:Table.NextPage"
-      ),
-      goToPageLabel: (page: number) =>
-        ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Table.GoToPage",
-          { page }
-        ),
-      rowsPerPageLabel: ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:Table.RowsPerPage"
-      ),
+          ? ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.StartIndexEndIndex", { startIndex, endIndex })
+          : ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.StartIndexEndIndexOf", { startIndex, endIndex, totalRows }),
+      previousPage: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.PreviousPage"),
+      nextPage: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.NextPage"),
+      goToPageLabel: (page: number) => ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.GoToPage", { page }),
+      rowsPerPageLabel: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Table.RowsPerPage"),
     }),
-    []
+    [],
   );
 
-  return (
-    <TablePaginator
-      {...props}
-      pageSizeList={pageSizeList}
-      localization={paginationLocalization}
-    />
-  );
+  return <TablePaginator {...props} pageSizeList={pageSizeList} localization={paginationLocalization} />;
 };

package/src/widget/components/ReportAction.scss

@@ -12,4 +12,4 @@
     flex-direction: column;
     gap: var(--iui-size-);
   }
-}
+}

package/src/widget/components/ReportAction.tsx

@@ -1,26 +1,31 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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, Text } from "@itwin/itwinui-react";
 import React, { useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
-import {
-  handleError,
-  handleInputChange,
-} from "./utils";
+import { handleError, handleInputChange } from "./utils";
 import "./ReportAction.scss";
 import type { Report } from "@itwin/insights-client";
 import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 
+/**
+ * Props for the {@link ReportAction} component.
+ * @public
+ */
 export interface ReportActionProps {
   report?: Report;
   onSaveSuccess: () => void;
   onClickCancel?: () => void;
 }
 
+/**
+ * Component to create or update a report.
+ * @public
+ */
 export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportActionProps) => {
   const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
   const [values, setValues] = useState({
@@ -40,14 +45,14 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
       const accessToken = await getAccessToken();
       report
         ? await reportsClient.updateReport(accessToken, report.id ?? "", {
-          displayName: values.name,
-          description: values.description,
-        })
+            displayName: values.name,
+            description: values.description,
+          })
         : await reportsClient.createReport(accessToken, {
-          displayName: values.name,
-          description: values.description,
-          projectId: iTwinId,
-        });
+            displayName: values.name,
+            description: values.description,
+            projectId: iTwinId,
+          });
       onSaveSuccess();
       setValues({
         name: report?.displayName ?? "",
@@ -64,22 +69,13 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
   return (
     <>
       <div className="rcw-details-form-container">
-        <Fieldset
-          legend={ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:ReportDetails"
-          )}
-          className="rcw-details-form"
-        >
-          <Text variant='small' className="field-legend">
-            {ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:MandatoryFields"
-            )}
+        <Fieldset legend={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportDetails")} className="rcw-details-form">
+          <Text variant="small" className="field-legend">
+            {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:MandatoryFields")}
           </Text>
           <LabeledInput
             name="name"
-            label={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:Name"
-            )}
+            label={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Name")}
             value={values.name}
             required
             disabled={isLoading}
@@ -88,11 +84,7 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
               validator.showMessageFor("name");
             }}
             message={validator.message("name", values.name, NAME_REQUIREMENTS)}
-            status={
-              validator.message("name", values.name, NAME_REQUIREMENTS)
-                ? "negative"
-                : undefined
-            }
+            status={validator.message("name", values.name, NAME_REQUIREMENTS) ? "negative" : undefined}
             onBlur={() => {
               validator.showMessageFor("name");
             }}
@@ -103,9 +95,7 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
           />
           <LabeledInput
             name="description"
-            label={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:Description"
-            )}
+            label={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Description")}
             value={values.description}
             onChange={(event) => {
               handleInputChange(event, values, setValues);
@@ -115,9 +105,7 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
         </Fieldset>
       </div>
       <ActionPanel
-        actionLabel={ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Add"
-        )}
+        actionLabel={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Add")}
         onAction={onSave}
         onCancel={onClickCancel}
         isSavingDisabled={!values.name}
@@ -126,4 +114,3 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
     </>
   );
 };
-

package/src/widget/components/ReportHorizontalTile.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import React, { useEffect, useRef, useState } from "react";
 import type { BulkExtractor } from "./BulkExtractor";
 import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
@@ -9,16 +9,8 @@ import type { BeEvent } from "@itwin/core-bentley";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
 import type { Report } from "@itwin/insights-client";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
-import {
-  DropdownMenu,
-  IconButton,
-  MenuItem,
-} from "@itwin/itwinui-react";
-import {
-  SvgDelete,
-  SvgEdit,
-  SvgMore,
-} from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton, MenuItem } from "@itwin/itwinui-react";
+import { SvgDelete, SvgEdit, SvgMore } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
 
 export interface ReportHorizontalTileProps {
@@ -82,48 +74,46 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
       onClick={onClickTile}
       onClickTitle={() => props.onClickTitle?.(props.report)}
       selected={props.selected}
-      actionGroup={extractionState === ExtractionStates.None ? (
-        <div
-          className="rcw-action-button"
-          data-testid="tile-action-button">
-          <DropdownMenu
-            menuItems={(close: () => void) => [
-              props.onClickModify ? <MenuItem
-                key={0}
-                onClick={() => props.onClickModify?.(props.report)}
-                icon={<SvgEdit />}
-              >
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:Modify"
-                )}
-              </MenuItem> : [],
-              <MenuItem
-                key={1}
-                onClick={() => {
-                  props.onClickDelete();
-                  close();
-                }}
-                icon={<SvgDelete />}
-              >
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:Remove"
-                )}
-              </MenuItem>,
-            ].flat()}
-          >
-            <IconButton styleType="borderless" title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportOptions")}>
-              <SvgMore />
-            </IconButton>
-          </DropdownMenu>
-        </div>
-      ) : (
-        <ExtractionStatus
-          state={extractionState}
-          clearExtractionState={() => {
-            setExtractionState(ExtractionStates.None);
-          }}
-        ></ExtractionStatus>
-      )}
+      actionGroup={
+        extractionState === ExtractionStates.None ? (
+          <div className="rcw-action-button" data-testid="tile-action-button">
+            <DropdownMenu
+              menuItems={(close: () => void) =>
+                [
+                  props.onClickModify ? (
+                    <MenuItem key={0} onClick={() => props.onClickModify?.(props.report)} icon={<SvgEdit />}>
+                      {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Modify")}
+                    </MenuItem>
+                  ) : (
+                    []
+                  ),
+                  <MenuItem
+                    key={1}
+                    onClick={() => {
+                      props.onClickDelete();
+                      close();
+                    }}
+                    icon={<SvgDelete />}
+                  >
+                    {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Remove")}
+                  </MenuItem>,
+                ].flat()
+              }
+            >
+              <IconButton styleType="borderless" title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportOptions")}>
+                <SvgMore />
+              </IconButton>
+            </DropdownMenu>
+          </div>
+        ) : (
+          <ExtractionStatus
+            state={extractionState}
+            clearExtractionState={() => {
+              setExtractionState(ExtractionStates.None);
+            }}
+          ></ExtractionStatus>
+        )
+      }
     ></HorizontalTile>
   );
 };

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { BulkExtractor } from "./BulkExtractor";
 import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
@@ -9,12 +9,10 @@ import type { BeEvent } from "@itwin/core-bentley";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import { IconButton } from "@itwin/itwinui-react";
-import {
-  SvgDelete,
-  SvgPlay,
-} from "@itwin/itwinui-icons-react";
+import { SvgDelete, SvgPlay } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
 import type { ReportMappingAndMapping } from "./ReportMappings";
+import type { ExtractionRequestDetails } from "@itwin/insights-client";
 
 export interface ReportMappingHorizontalTileProps {
   jobStartEvent: BeEvent<(iModelId: string) => void>;
@@ -26,15 +24,12 @@ export interface ReportMappingHorizontalTileProps {
 
 export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTileProps) => {
   const [extractionState, setExtractionState] = useState<ExtractionStates>(ExtractionStates.None);
-  const [jobStarted, setJobStarted] = useState<boolean>(true);
   const interval = useRef<number>();
-  const initialLoad = useRef<boolean>(true);
 
   useEffect(() => {
     const listener = (startedIModelId: string) => {
       if (startedIModelId === props.mapping.imodelId) {
         setExtractionState(ExtractionStates.Starting);
-        setJobStarted(true);
       }
     };
     props.jobStartEvent.addListener(listener);
@@ -42,87 +37,84 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
     return () => {
       props.jobStartEvent.removeListener(listener);
     };
-  }, [props.jobStartEvent, props.mapping]);
+  }, [props.jobStartEvent, props.mapping.imodelId]);
 
-  const getExtractionState = useCallback(async () => {
-    const state = await props.bulkExtractor.getIModelState(props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl);
-    if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded || state === ExtractionStates.None) {
-      setJobStarted(false);
-      if (initialLoad.current) {
-        initialLoad.current = false;
-        setExtractionState(ExtractionStates.None);
-        return;
+  const updateExtractionState = useCallback(async () => {
+    try {
+      const state = await props.bulkExtractor.getIModelState(props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl);
+      if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded) {
+        if (extractionState === ExtractionStates.Running) {
+          setExtractionState(state);
+        }
+      } else {
+        setExtractionState(state);
       }
-    } else {
-      initialLoad.current = false;
+    } catch (error) {
+      setExtractionState(ExtractionStates.Failed);
+      /* eslint-disable no-console */
+      console.error(error);
     }
-    setExtractionState(state);
-  }, [props.mapping, props.bulkExtractor, props.odataFeedUrl]);
+  }, [props.bulkExtractor, props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl, extractionState]);
 
   useEffect(() => {
-    if (jobStarted) {
-      getExtractionState().catch((error) => {
-        setExtractionState(ExtractionStates.Failed);
-        setJobStarted(false);
-        /* eslint-disable no-console */
-        console.error(error);
-      });
-      window.clearInterval(interval.current);
-      interval.current = window.setInterval(async () => {
-        await getExtractionState();
-      }, STATUS_CHECK_INTERVAL);
-    }
+    void updateExtractionState();
+  }, [extractionState, updateExtractionState]);
+
+  useEffect(() => {
+    window.clearInterval(interval.current);
+    if (extractionState === ExtractionStates.None) return;
+    interval.current = window.setInterval(async () => {
+      await updateExtractionState();
+    }, STATUS_CHECK_INTERVAL);
     return () => window.clearInterval(interval.current);
-  }, [jobStarted, getExtractionState]);
+  }, [extractionState, updateExtractionState]);
+
+  const handleUpdateDataset = useCallback(async () => {
+    setExtractionState(ExtractionStates.Starting);
+    const extractionRequestDetails: ExtractionRequestDetails = {
+      iModelId: props.mapping.imodelId,
+      mappings: [{ id: props.mapping.mappingId }],
+    };
+    await props.bulkExtractor.runIModelExtraction(extractionRequestDetails);
+    props.jobStartEvent.raiseEvent(props.mapping.imodelId);
+  }, [props.bulkExtractor, props.jobStartEvent, props.mapping.imodelId, props.mapping.mappingId]);
 
   return (
     <HorizontalTile
       title={props.mapping.mappingName}
       subText={props.mapping.iModelName}
       titleTooltip={props.mapping.mappingDescription}
-      actionGroup={(
-        <div
-          className="rcw-action-button"
-          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}
-                >
-                  <SvgPlay />
-                </IconButton>
-                <IconButton
-                  styleType="borderless"
-                  title={ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:Remove"
-                  )}
-                  onClick={() => {
-                    props.onClickDelete();
-                  }}
-                >
-                  <SvgDelete />
-                </IconButton>
-              </>
-            ) : (
-              <ExtractionStatus
-                state={extractionState}
-                clearExtractionState={() => {
-                  setExtractionState(ExtractionStates.None);
+      actionGroup={
+        <div className="rcw-action-button" data-testid="tile-action-button">
+          {extractionState === ExtractionStates.None ? (
+            <>
+              <IconButton
+                styleType="borderless"
+                title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateDataset")}
+                onClick={handleUpdateDataset}
+              >
+                <SvgPlay />
+              </IconButton>
+              <IconButton
+                styleType="borderless"
+                title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Remove")}
+                onClick={() => {
+                  props.onClickDelete();
                 }}
-              ></ExtractionStatus>
-            )}
-        </div >
-      )}
+              >
+                <SvgDelete />
+              </IconButton>
+            </>
+          ) : (
+            <ExtractionStatus
+              state={extractionState}
+              clearExtractionState={() => {
+                setExtractionState(ExtractionStates.None);
+              }}
+            ></ExtractionStatus>
+          )}
+        </div>
+      }
     />
   );
 };