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

package/src/widget/components/ExtractionStatus.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 * as React from "react";
 import { useEffect, useState } from "react";
 import "./ExtractionStatus.scss";
@@ -26,10 +26,7 @@ interface ExtractionStatusProps {
   clearExtractionState: () => void;
 }
 
-export const ExtractionStatus = ({
-  state,
-  clearExtractionState,
-}: ExtractionStatusProps) => {
+export const ExtractionStatus = ({ state, clearExtractionState }: ExtractionStatusProps) => {
   const [fadeOut, setFadeOut] = useState<boolean>(false);
 
   const onAnimationEnd = () => {
@@ -49,21 +46,15 @@ export const ExtractionStatus = ({
 
   switch (state) {
     case ExtractionStates.Starting:
-      return (<StartingExtractionState />);
+      return <StartingExtractionState />;
     case ExtractionStates.Queued:
-      return (<QueuedExtractionState />);
+      return <QueuedExtractionState />;
     case ExtractionStates.Running:
-      return (<RunningExtractionState />);
+      return <RunningExtractionState />;
     case ExtractionStates.Succeeded:
-      return (<SucceededExtractionState
-        animation={fadeOut}
-        onAnimationEnd={onAnimationEnd}
-      />);
+      return <SucceededExtractionState animation={fadeOut} onAnimationEnd={onAnimationEnd} />;
     case ExtractionStates.Failed:
-      return (<FailedExtractionState
-        animation={fadeOut}
-        onAnimationEnd={onAnimationEnd}
-      />);
+      return <FailedExtractionState animation={fadeOut} onAnimationEnd={onAnimationEnd} />;
     default:
       return <></>;
   }

package/src/widget/components/ExtractionToast.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 from "react";
 import { Text } from "@itwin/itwinui-react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -21,11 +21,11 @@ export const SuccessfulExtractionToast = ({ iModelName, odataFeedUrl }: Successf
   };
   return (
     <div>
-      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionSuccess")}{iModelName}</Text>
-      <a
-        href="#"
-        onClick={onClick}
-      >
+      <Text>
+        {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionSuccess")}
+        {iModelName}
+      </Text>
+      <a href="#" onClick={onClick}>
         {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CopyODataUrl")}
       </a>
     </div>
@@ -35,7 +35,10 @@ export const SuccessfulExtractionToast = ({ iModelName, odataFeedUrl }: Successf
 export const FailedExtractionToast = ({ iModelName }: ExtractionToastProps) => {
   return (
     <div>
-      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionFailed")}{iModelName}</Text>
+      <Text>
+        {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionFailed")}
+        {iModelName}
+      </Text>
     </div>
   );
 };

package/src/widget/components/HorizontalTile.scss

@@ -40,10 +40,7 @@
 
   &-selected {
     border: 1px solid var(--iui-color-border-accent);
-    background: linear-gradient(
-        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6)),
-        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6))
-      ),
+    background: linear-gradient(rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6)), rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6))),
       linear-gradient(var(--iui-color-background), var(--iui-color-background));
   }
 }

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>
   );
 };