@itwin/reports-config-widget-react 0.0.8 → 0.2.0

package/src/widget/components/HorizontalTile.scss

@@ -3,30 +3,50 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
+@import "~@itwin/itwinui-css/scss/icon/index";
 
-.rcw-horizontal-tile-container {
-  display: flex;
-  justify-content: space-between;
-  border-radius: 5px;
-  background-color: var(--iui-color-background-2);
-  height: $iui-baseline * 4;
-  padding: 5.5px $iui-s;
-  .body {
+.rcw-horizontal-tile {
+  &-container {
     display: flex;
-    flex-direction: column;
-    min-width: 0;
-    justify-content: center;
-    &-text {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    justify-content: space-between;
+    border-radius: 5px;
+    background-color: var(--iui-color-background-2);
+    height: $iui-baseline * 4;
+    padding: 5.5px $iui-s;
+
+    .rcw-body-container {
+      display: flex;
+      min-width: 0;
+
+      .rcw-body {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        justify-content: center;
+
+        &-text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .rcw-action-button {
+      margin-left: 0;
+      align-self: center;
+      min-width: 36px;
+      flex-shrink: 0;
+      display: flex;
     }
   }
-  .action-button {
-    margin-left: 0;
-    align-self: center;
-    min-width: 36px;
-    margin-right: $iui-xs;
-    flex-shrink: 0;
+
+  &-selected {
+    @include themed {
+      border: 1px solid t(iui-color-foreground-primary);
+      background: linear-gradient(rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
+    }
   }
-}
+}

package/src/widget/components/HorizontalTile.tsx

@@ -6,51 +6,62 @@ import type { ReactNode } from "react";
 import React from "react";
 import { Text } from "@itwin/itwinui-react";
 import "./HorizontalTile.scss";
+import classNames from "classnames";
 
-interface HorizontalTileProps {
+export interface HorizontalTileProps extends React.ComponentPropsWithoutRef<"div"> {
   title: string;
-  button: ReactNode;
-  subText?: string;
-  onClickTitle?: () => void;
-  titleTooltip?: string;
+  actionGroup: ReactNode;
+  subText: string;
+  onClickTitle?: React.MouseEventHandler;
+  titleTooltip: string;
   subtextToolTip?: string;
+  selected?: boolean;
 }
 
-export const HorizontalTile = ({
-  title,
-  subText,
-  onClickTitle,
-  titleTooltip,
-  subtextToolTip,
-  button,
-}: HorizontalTileProps) => {
+export const HorizontalTile = (props: HorizontalTileProps) => {
+  const {
+    title,
+    titleTooltip,
+    subText,
+    subtextToolTip,
+    actionGroup,
+    selected,
+    className,
+    onClickTitle,
+    ...rest
+  } = props;
+
   return (
     <div
-      className="rcw-horizontal-tile-container"
+      className={classNames(
+        "rcw-horizontal-tile-container",
+        { "rcw-horizontal-tile-selected": selected },
+        className
+      )}
+      onClick={rest.onClick}
       data-testid="horizontal-tile"
     >
-      <div className="body">
-        <Text
-          className={`body-text ${onClickTitle ? "iui-anchor" : ""}`}
-          onClick={onClickTitle}
-          variant="body"
-          title={titleTooltip}
-        >
-          {title}
-        </Text>
-        {subText && (
-          <Text
-            className="body-text"
-            isMuted={true}
-            title={subtextToolTip}
-            variant="small"
-          >
-            {subText}
+      <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>
-        )}
+          {
+            subText &&
+            <Text className="rcw-body-text"
+              isMuted={true}
+              title={subtextToolTip}
+              variant="small">{subText}
+            </Text>
+          }
+        </div>
       </div>
-      <div className="action-button" data-testid="tile-action-button">
-        {button}
+      <div
+        className="rcw-action-button"
+        data-testid="tile-action-button">
+        {actionGroup}
       </div>
     </div>
   );

package/src/widget/components/ReportAction.scss

@@ -8,9 +8,9 @@
   overflow-x: auto;
   height: 100%;
 
-  .details-form {
+  .rcw-details-form {
     display: flex;
     flex-direction: column;
     gap: $iui-baseline;
   }
-}
+}

package/src/widget/components/ReportAction.tsx

@@ -82,7 +82,7 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
           legend={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ReportDetails"
           )}
-          className="details-form"
+          className="rcw-details-form"
         >
           <Small className="field-legend">
             {ReportsConfigWidget.localization.getLocalizedString(
@@ -90,7 +90,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
             )}
           </Small>
           <LabeledInput
-            id="name"
             name="name"
             label={ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:Name"
@@ -117,7 +116,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
             }}
           />
           <LabeledInput
-            id="description"
             name="description"
             label={ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:Description"

package/src/widget/components/ReportHorizontalTile.tsx

@@ -0,0 +1,130 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
+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 { HorizontalTile } from "./HorizontalTile";
+import type { HorizontalTileProps } from "./HorizontalTile";
+
+export interface ReportHorizontalTileProps extends Pick<HorizontalTileProps, "onClickTitle"> {
+  selected: boolean;
+  onSelectionChange: (reportId: string, controlPressed: boolean) => void;
+  bulkExtractor: BulkExtractor;
+  jobStartEvent: BeEvent<(reportId: string) => void>;
+  report: Report;
+  onClickDelete: () => void;
+  onClickModify: () => void;
+}
+
+export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
+  const [jobStarted, setJobStarted] = useState<boolean>(false);
+  const [extractionState, setExtractionState] = useState<ExtractionStates>(ExtractionStates.None);
+  const interval = useRef<number>();
+
+  useEffect(() => {
+    const listener = (startedReportId: string) => {
+      if (startedReportId === props.report.id) {
+        setExtractionState(ExtractionStates.Starting);
+        setJobStarted(true);
+      }
+    };
+    props.jobStartEvent.addListener(listener);
+
+    return () => {
+      props.jobStartEvent.removeListener(listener);
+    };
+  }, [props.jobStartEvent, props.report.id]);
+
+  useEffect(() => {
+    if (jobStarted) {
+      window.clearInterval(interval.current);
+      interval.current = window.setInterval(async () => {
+        const state = await props.bulkExtractor.getReportState(props.report.id);
+        if (state) {
+          setExtractionState(state);
+          if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded) {
+            setJobStarted(false);
+          }
+        }
+      }, STATUS_CHECK_INTERVAL);
+    }
+    return () => window.clearInterval(interval.current);
+  }, [props.report.id, props.bulkExtractor, jobStarted]);
+
+  const onClickTile = (e: React.MouseEvent) => {
+    if (e?.currentTarget.className?.toString().split(" ").includes("rcw-horizontal-tile-container")) {
+      props.onSelectionChange(props.report.id, e.ctrlKey);
+    }
+  };
+
+  return (
+    <HorizontalTile
+      title={props.report.displayName}
+      subText={props.report.description ?? ""}
+      subtextToolTip={props.report.description ?? ""}
+      titleTooltip={props.report.displayName}
+      onClick={onClickTile}
+      onClickTitle={props.onClickTitle}
+      selected={props.selected}
+      actionGroup={extractionState === ExtractionStates.None ? (
+        <div
+          className="rcw-action-button"
+          data-testid="tile-action-button">
+          <DropdownMenu
+            menuItems={(close: () => void) => [
+              <MenuItem
+                key={0}
+                onClick={props.onClickModify}
+                icon={<SvgEdit />}
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:Modify"
+                )}
+              </MenuItem>,
+              <MenuItem
+                key={1}
+                onClick={() => {
+                  props.onClickDelete();
+                  close();
+                }}
+                icon={<SvgDelete />}
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:Remove"
+                )}
+              </MenuItem>,
+            ]}
+          >
+            <IconButton styleType="borderless">
+              <SvgMore />
+            </IconButton>
+          </DropdownMenu>
+        </div>
+      ) : (
+        <ExtractionStatus
+          state={extractionState}
+          clearExtractionState={() => {
+            setExtractionState(ExtractionStates.None);
+          }}
+        ></ExtractionStatus>
+      )}
+    ></HorizontalTile>
+  );
+};

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
+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,
+  SvgRefresh,
+} from "@itwin/itwinui-icons-react";
+import { HorizontalTile } from "./HorizontalTile";
+import type { ReportMappingAndMapping } from "./ReportMappings";
+
+export interface ReportMappingHorizontalTileProps {
+  jobStartEvent: BeEvent<(iModelId: string) => void>;
+  mapping: ReportMappingAndMapping;
+  onClickDelete: () => void;
+  bulkExtractor: BulkExtractor;
+  odataFeedUrl: string;
+}
+
+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);
+
+    return () => {
+      props.jobStartEvent.removeListener(listener);
+    };
+  }, [props.jobStartEvent, props.mapping]);
+
+  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;
+      }
+    } else {
+      initialLoad.current = false;
+    }
+    setExtractionState(state);
+  }, [props.mapping, props.bulkExtractor, props.odataFeedUrl]);
+
+  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);
+    }
+    return () => window.clearInterval(interval.current);
+  }, [jobStarted, getExtractionState]);
+
+  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}
+              >
+                <SvgRefresh />
+              </IconButton>
+            ) : (
+              <ExtractionStatus
+                state={extractionState}
+                clearExtractionState={() => {
+                  setExtractionState(ExtractionStates.None);
+                }}
+              ></ExtractionStatus>
+            )}
+          <IconButton
+            styleType="borderless"
+            title={ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:Remove"
+            )}
+            onClick={() => {
+              props.onClickDelete();
+            }}
+            disabled={jobStarted}
+          >
+            <SvgDelete />
+          </IconButton>
+        </div >
+      )}
+    />
+  );
+};

package/src/widget/components/ReportMappings.scss

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