@itwin/reports-config-widget-react 0.0.3 → 0.0.6

package/lib/esm/widget/components/Extraction.js

@@ -128,7 +128,6 @@ export const Extraction = ({ iModels, setExtractingIModelId, extractionState, se
         return () => window.clearInterval(intervalId.current);
     }, [apiConfig, isRunning, jobId, setExtractionState]);
     const iModelOptions = useMemo(() => {
-        // TODO Report ComboBox bug. Unique key error happens when the options list becomes reduced.
         const newIModelOptions = [];
         for (const [iModelId, iModelName] of iModels.entries()) {
             newIModelOptions.push({
@@ -145,7 +144,7 @@ export const Extraction = ({ iModels, setExtractingIModelId, extractionState, se
             React.createElement(Label, { htmlFor: "combo-input" }, ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateDataset")),
             isLoading ? (React.createElement(SkeletonBlock, null)) : (React.createElement(ComboBox, { options: iModelOptions, value: currentIModelId, onChange: async (value) => {
                     setCurrentIModelId(value);
-                    await runExtraction(value);
+                    value && await runExtraction(value);
                 }, inputProps: {
                     id: "combo-input",
                     placeholder: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SelectIModel"),

package/lib/esm/widget/components/Extraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"Extraction.js","sourceRoot":"","sources":["../../../../src/widget/components/Extraction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport {\n  ComboBox,\n  Label,\n  ProgressRadial,\n  StatusMessage,\n} from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { REPORTING_BASE_PATH, ReportingClient } from \"@itwin/insights-client\";\nimport { generateUrl, handleError, SkeletonBlock } from \"./utils\";\nimport \"./Extraction.scss\";\nimport {\n  SvgStatusError,\n  SvgStatusPending,\n  SvgStatusPendingHollow,\n  SvgStatusSuccess,\n} from \"@itwin/itwinui-icons-color-react\";\nimport { useReportsApiConfig } from \"../context/ReportsApiConfigContext\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\nexport const REFRESH_DELAY = 2000;\n\nexport enum ExtractionStates {\n  None,\n  Starting,\n  FetchingUpdate,\n  Queued,\n  Running,\n  Succeeded,\n  Failed,\n}\ninterface ExtractionStatusProps {\n  state: ExtractionStates;\n  setExtractionState?: React.Dispatch<React.SetStateAction<ExtractionStates>>;\n  children?: React.ReactNode;\n}\n\nexport const ExtractionStatus = ({\n  state,\n  children,\n  setExtractionState,\n}: ExtractionStatusProps) => {\n  const [fadeOut, setFadeOut] = useState<boolean>(false);\n\n  const onAnimationEnd = () => {\n    if (setExtractionState) {\n      setExtractionState(ExtractionStates.None);\n      setFadeOut(false);\n    }\n  };\n\n  useEffect(() => {\n    let timer: number;\n    switch (state) {\n      case ExtractionStates.Succeeded:\n      case ExtractionStates.Failed:\n        timer = window.setTimeout(() => setFadeOut(true), 5000);\n    }\n    return () => clearTimeout(timer);\n  }, [state, setExtractionState]);\n\n  switch (state) {\n    case ExtractionStates.Starting:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Starting\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div className=\"status-icon\">\n            <SvgStatusPendingHollow />\n          </div>\n        </div>\n      );\n    case ExtractionStates.FetchingUpdate:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Loading\"\n          )}\n          className=\"extraction-status\"\n        >\n          <ProgressRadial size=\"x-small\" indeterminate />\n        </div>\n      );\n    case ExtractionStates.Queued:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Queued\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div className=\"status-icon\">\n            <SvgStatusPending />\n          </div>\n        </div>\n      );\n    case ExtractionStates.Running:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Running\"\n          )}\n          className=\"extraction-status\"\n        >\n          <ProgressRadial size=\"x-small\" indeterminate />\n        </div>\n      );\n    case ExtractionStates.Succeeded:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Success\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div\n            className={`status-icon`}\n            style={{\n              animationName: fadeOut ? \"rcw-fade-out\" : \"\",\n              animationDelay: \"5s\",\n              animationDuration: \"1s\",\n            }}\n            onAnimationEnd={onAnimationEnd}\n          >\n            <SvgStatusSuccess />\n          </div>\n        </div>\n      );\n    case ExtractionStates.Failed:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Failed\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div\n            className={`status-icon`}\n            style={{\n              animationName: fadeOut ? \"rcw-fade-out\" : \"\",\n              animationDelay: \"5s\",\n              animationDuration: \"1s\",\n            }}\n            onAnimationEnd={onAnimationEnd}\n          >\n            <SvgStatusError />\n          </div>\n        </div>\n      );\n    default:\n      return <>{children}</>;\n  }\n};\n\ninterface ExtractionProps {\n  iModels: Map<string, string>;\n  setExtractingIModelId: React.Dispatch<React.SetStateAction<string>>;\n  extractionState: ExtractionStates;\n  setExtractionState: React.Dispatch<React.SetStateAction<ExtractionStates>>;\n  isLoading: boolean;\n}\n\nexport const Extraction = ({\n  iModels,\n  setExtractingIModelId,\n  extractionState,\n  setExtractionState,\n  isLoading,\n}: ExtractionProps) => {\n  const jobId = useRef<string>(\"\");\n  const intervalId = useRef<number>();\n  const [isRunning, setIsRunning] = useState<boolean>(false);\n  const [currentIModelId, setCurrentIModelId] = useState<string>();\n  const apiConfig = useReportsApiConfig();\n\n  const runExtraction = async (iModelId: string) => {\n    try {\n      setExtractionState(ExtractionStates.Starting);\n      setExtractingIModelId(iModelId);\n      const reportingClientApi = new ReportingClient(\n        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)\n      );\n      const accessToken = await apiConfig.getAccessToken();\n      const response = await reportingClientApi.runExtraction(\n        accessToken,\n        iModelId\n      );\n      jobId.current = response.run?.id ?? \"\";\n      setIsRunning(true);\n      setExtractionState(ExtractionStates.FetchingUpdate);\n    } catch (error: any) {\n      handleError(error.status);\n      setExtractionState(ExtractionStates.Failed);\n      setIsRunning(false);\n      setCurrentIModelId(undefined);\n    }\n  };\n\n  useEffect(() => {\n    if (!intervalId.current && isRunning) {\n      const newIntervalId = window.setInterval(async () => {\n        const reportingClientApi = new ReportingClient(\n          generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)\n        );\n        const accessToken = await apiConfig.getAccessToken();\n        const response = await reportingClientApi.getExtractionStatus(\n          accessToken,\n          jobId.current\n        );\n        if (response.status?.state === \"Queued\") {\n          setExtractionState(ExtractionStates.Queued);\n        } else if (response.status?.state === \"Running\") {\n          setExtractionState(ExtractionStates.Running);\n        } else if (response.status?.state === \"Succeeded\") {\n          setExtractionState(ExtractionStates.Succeeded);\n          setIsRunning(false);\n          setCurrentIModelId(undefined);\n        } else if (response.status?.state === \"Failed\") {\n          setExtractionState(ExtractionStates.Failed);\n          setIsRunning(false);\n          setCurrentIModelId(undefined);\n        }\n      }, REFRESH_DELAY);\n      intervalId.current = newIntervalId;\n    } else if (intervalId && !isRunning) {\n      window.clearInterval(intervalId.current);\n      intervalId.current = undefined;\n    }\n    return () => window.clearInterval(intervalId.current);\n  }, [apiConfig, isRunning, jobId, setExtractionState]);\n\n  const iModelOptions = useMemo(() => {\n    // TODO Report ComboBox bug. Unique key error happens when the options list becomes reduced.\n    const newIModelOptions: SelectOption<string>[] = [];\n\n    for (const [iModelId, iModelName] of iModels.entries()) {\n      newIModelOptions.push({\n        label: iModelName,\n        value: iModelId,\n        key: iModelId,\n        disabled: extractionState !== ExtractionStates.None,\n      });\n    }\n    return newIModelOptions;\n  }, [iModels, extractionState]);\n\n  return (\n    <div className=\"extraction-container\">\n      <div className=\"extraction-combo-box\" data-testid=\"extraction-combo-box\">\n        <Label htmlFor=\"combo-input\">\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:UpdateDataset\"\n          )}\n        </Label>\n        {isLoading ? (\n          <SkeletonBlock />\n        ) : (\n          <ComboBox\n            options={iModelOptions}\n            value={currentIModelId}\n            onChange={async (value) => {\n              setCurrentIModelId(value);\n              await runExtraction(value);\n            }}\n            inputProps={{\n              id: \"combo-input\",\n              placeholder: ReportsConfigWidget.localization.getLocalizedString(\n                \"ReportsConfigWidget:SelectIModel\"\n              ),\n            }}\n            message={\n              extractionState !== ExtractionStates.None && (\n                <StatusMessage>\n                  <div className=\"extraction-status-container\">\n                    <ExtractionStatus\n                      state={extractionState}\n                      setExtractionState={setExtractionState}\n                    />\n                    {(() => {\n                      switch (extractionState) {\n                        case ExtractionStates.Succeeded: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:Success\"\n                          );\n                        }\n                        case ExtractionStates.Failed: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:Failed\"\n                          );\n                        }\n                        default: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:UpdateInProgress\"\n                          );\n                        }\n                      }\n                    })()}\n                  </div>\n                </StatusMessage>\n              )\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Extraction.js","sourceRoot":"","sources":["../../../../src/widget/components/Extraction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport {\n  ComboBox,\n  Label,\n  ProgressRadial,\n  StatusMessage,\n} from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { REPORTING_BASE_PATH, ReportingClient } from \"@itwin/insights-client\";\nimport { generateUrl, handleError, SkeletonBlock } from \"./utils\";\nimport \"./Extraction.scss\";\nimport {\n  SvgStatusError,\n  SvgStatusPending,\n  SvgStatusPendingHollow,\n  SvgStatusSuccess,\n} from \"@itwin/itwinui-icons-color-react\";\nimport { useReportsApiConfig } from \"../context/ReportsApiConfigContext\";\nimport { ReportsConfigWidget } from \"../../ReportsConfigWidget\";\n\nexport const REFRESH_DELAY = 2000;\n\nexport enum ExtractionStates {\n  None,\n  Starting,\n  FetchingUpdate,\n  Queued,\n  Running,\n  Succeeded,\n  Failed,\n}\ninterface ExtractionStatusProps {\n  state: ExtractionStates;\n  setExtractionState?: React.Dispatch<React.SetStateAction<ExtractionStates>>;\n  children?: React.ReactNode;\n}\n\nexport const ExtractionStatus = ({\n  state,\n  children,\n  setExtractionState,\n}: ExtractionStatusProps) => {\n  const [fadeOut, setFadeOut] = useState<boolean>(false);\n\n  const onAnimationEnd = () => {\n    if (setExtractionState) {\n      setExtractionState(ExtractionStates.None);\n      setFadeOut(false);\n    }\n  };\n\n  useEffect(() => {\n    let timer: number;\n    switch (state) {\n      case ExtractionStates.Succeeded:\n      case ExtractionStates.Failed:\n        timer = window.setTimeout(() => setFadeOut(true), 5000);\n    }\n    return () => clearTimeout(timer);\n  }, [state, setExtractionState]);\n\n  switch (state) {\n    case ExtractionStates.Starting:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Starting\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div className=\"status-icon\">\n            <SvgStatusPendingHollow />\n          </div>\n        </div>\n      );\n    case ExtractionStates.FetchingUpdate:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Loading\"\n          )}\n          className=\"extraction-status\"\n        >\n          <ProgressRadial size=\"x-small\" indeterminate />\n        </div>\n      );\n    case ExtractionStates.Queued:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Queued\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div className=\"status-icon\">\n            <SvgStatusPending />\n          </div>\n        </div>\n      );\n    case ExtractionStates.Running:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Running\"\n          )}\n          className=\"extraction-status\"\n        >\n          <ProgressRadial size=\"x-small\" indeterminate />\n        </div>\n      );\n    case ExtractionStates.Succeeded:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Success\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div\n            className={`status-icon`}\n            style={{\n              animationName: fadeOut ? \"rcw-fade-out\" : \"\",\n              animationDelay: \"5s\",\n              animationDuration: \"1s\",\n            }}\n            onAnimationEnd={onAnimationEnd}\n          >\n            <SvgStatusSuccess />\n          </div>\n        </div>\n      );\n    case ExtractionStates.Failed:\n      return (\n        <div\n          title={ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:Failed\"\n          )}\n          className=\"extraction-status\"\n        >\n          <div\n            className={`status-icon`}\n            style={{\n              animationName: fadeOut ? \"rcw-fade-out\" : \"\",\n              animationDelay: \"5s\",\n              animationDuration: \"1s\",\n            }}\n            onAnimationEnd={onAnimationEnd}\n          >\n            <SvgStatusError />\n          </div>\n        </div>\n      );\n    default:\n      return <>{children}</>;\n  }\n};\n\ninterface ExtractionProps {\n  iModels: Map<string, string>;\n  setExtractingIModelId: React.Dispatch<React.SetStateAction<string>>;\n  extractionState: ExtractionStates;\n  setExtractionState: React.Dispatch<React.SetStateAction<ExtractionStates>>;\n  isLoading: boolean;\n}\n\nexport const Extraction = ({\n  iModels,\n  setExtractingIModelId,\n  extractionState,\n  setExtractionState,\n  isLoading,\n}: ExtractionProps) => {\n  const jobId = useRef<string>(\"\");\n  const intervalId = useRef<number>();\n  const [isRunning, setIsRunning] = useState<boolean>(false);\n  const [currentIModelId, setCurrentIModelId] = useState<string>();\n  const apiConfig = useReportsApiConfig();\n\n  const runExtraction = async (iModelId: string) => {\n    try {\n      setExtractionState(ExtractionStates.Starting);\n      setExtractingIModelId(iModelId);\n      const reportingClientApi = new ReportingClient(\n        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)\n      );\n      const accessToken = await apiConfig.getAccessToken();\n      const response = await reportingClientApi.runExtraction(\n        accessToken,\n        iModelId\n      );\n      jobId.current = response.run?.id ?? \"\";\n      setIsRunning(true);\n      setExtractionState(ExtractionStates.FetchingUpdate);\n    } catch (error: any) {\n      handleError(error.status);\n      setExtractionState(ExtractionStates.Failed);\n      setIsRunning(false);\n      setCurrentIModelId(undefined);\n    }\n  };\n\n  useEffect(() => {\n    if (!intervalId.current && isRunning) {\n      const newIntervalId = window.setInterval(async () => {\n        const reportingClientApi = new ReportingClient(\n          generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)\n        );\n        const accessToken = await apiConfig.getAccessToken();\n        const response = await reportingClientApi.getExtractionStatus(\n          accessToken,\n          jobId.current\n        );\n        if (response.status?.state === \"Queued\") {\n          setExtractionState(ExtractionStates.Queued);\n        } else if (response.status?.state === \"Running\") {\n          setExtractionState(ExtractionStates.Running);\n        } else if (response.status?.state === \"Succeeded\") {\n          setExtractionState(ExtractionStates.Succeeded);\n          setIsRunning(false);\n          setCurrentIModelId(undefined);\n        } else if (response.status?.state === \"Failed\") {\n          setExtractionState(ExtractionStates.Failed);\n          setIsRunning(false);\n          setCurrentIModelId(undefined);\n        }\n      }, REFRESH_DELAY);\n      intervalId.current = newIntervalId;\n    } else if (intervalId && !isRunning) {\n      window.clearInterval(intervalId.current);\n      intervalId.current = undefined;\n    }\n    return () => window.clearInterval(intervalId.current);\n  }, [apiConfig, isRunning, jobId, setExtractionState]);\n\n  const iModelOptions = useMemo(() => {\n    const newIModelOptions: SelectOption<string>[] = [];\n\n    for (const [iModelId, iModelName] of iModels.entries()) {\n      newIModelOptions.push({\n        label: iModelName,\n        value: iModelId,\n        key: iModelId,\n        disabled: extractionState !== ExtractionStates.None,\n      });\n    }\n\n    return newIModelOptions;\n  }, [iModels, extractionState]);\n\n  return (\n    <div className=\"extraction-container\">\n      <div className=\"extraction-combo-box\" data-testid=\"extraction-combo-box\">\n        <Label htmlFor=\"combo-input\">\n          {ReportsConfigWidget.localization.getLocalizedString(\n            \"ReportsConfigWidget:UpdateDataset\"\n          )}\n        </Label>\n        {isLoading ? (\n          <SkeletonBlock />\n        ) : (\n          <ComboBox\n            options={iModelOptions}\n            value={currentIModelId}\n            onChange={async (value) => {\n              setCurrentIModelId(value);\n              value && await runExtraction(value);\n            }}\n            inputProps={{\n              id: \"combo-input\",\n              placeholder: ReportsConfigWidget.localization.getLocalizedString(\n                \"ReportsConfigWidget:SelectIModel\"\n              ),\n            }}\n            message={\n              extractionState !== ExtractionStates.None && (\n                <StatusMessage>\n                  <div className=\"extraction-status-container\">\n                    <ExtractionStatus\n                      state={extractionState}\n                      setExtractionState={setExtractionState}\n                    />\n                    {(() => {\n                      switch (extractionState) {\n                        case ExtractionStates.Succeeded: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:Success\"\n                          );\n                        }\n                        case ExtractionStates.Failed: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:Failed\"\n                          );\n                        }\n                        default: {\n                          return ReportsConfigWidget.localization.getLocalizedString(\n                            \"ReportsConfigWidget:UpdateInProgress\"\n                          );\n                        }\n                      }\n                    })()}\n                  </div>\n                </StatusMessage>\n              )\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/esm/widget/components/Extraction.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@keyframes rcw-fadeOut {
+@keyframes rcw-fade-out {
   0% {
     opacity: 1;
   }

package/lib/esm/widget/components/ReportsContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportsContainer.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportsContainer.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKvD,OAAO,yBAAyB,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,gBAAgB,iCAGnB,qBAAqB,gBAcvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ReportsContainer.d.ts","sourceRoot":"","sources":["../../../../src/widget/components/ReportsContainer.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAMvD,OAAO,yBAAyB,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;CACjB;AAKD,QAAA,MAAM,gBAAgB,iCAGnB,qBAAqB,gBAoBvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/esm/widget/components/ReportsContainer.js

@@ -1,13 +1,23 @@
 import { IModelApp } from "@itwin/core-frontend";
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { Reports } from "../components/Reports";
 import { ReportsApiConfigContext } from "../context/ReportsApiConfigContext";
 import "./ReportsContainer.scss";
-const ReportsContainer = ({ getAccessToken, baseUrl, }) => (React.createElement(ReportsApiConfigContext.Provider, { value: {
-        getAccessToken: getAccessToken !== null && getAccessToken !== void 0 ? getAccessToken : (async () => { var _a, _b; return (_b = (await ((_a = IModelApp.authorizationClient) === null || _a === void 0 ? void 0 : _a.getAccessToken()))) !== null && _b !== void 0 ? _b : ""; }),
+const authorizationClientGetAccessToken = async () => { var _a, _b; return (_b = (await ((_a = IModelApp.authorizationClient) === null || _a === void 0 ? void 0 : _a.getAccessToken()))) !== null && _b !== void 0 ? _b : ""; };
+const ReportsContainer = ({ getAccessToken, baseUrl, }) => {
+    const [apiConfig, setApiConfig] = useState({
+        getAccessToken: getAccessToken !== null && getAccessToken !== void 0 ? getAccessToken : authorizationClientGetAccessToken,
         baseUrl,
-    } },
-    React.createElement("div", { className: "reports-container" },
-        React.createElement(Reports, null))));
+    });
+    useEffect(() => {
+        setApiConfig(() => ({
+            baseUrl,
+            getAccessToken: getAccessToken !== null && getAccessToken !== void 0 ? getAccessToken : authorizationClientGetAccessToken,
+        }));
+    }, [getAccessToken, baseUrl]);
+    return (React.createElement(ReportsApiConfigContext.Provider, { value: apiConfig },
+        React.createElement("div", { className: "reports-container" },
+            React.createElement(Reports, null))));
+};
 export default ReportsContainer;
 //# sourceMappingURL=ReportsContainer.js.map

package/lib/esm/widget/components/ReportsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportsContainer.js","sourceRoot":"","sources":["../../../../src/widget/components/ReportsContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,yBAAyB,CAAC;AAOjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,cAAc,EACd,OAAO,GACe,EAAE,EAAE,CAAC,CAC3B,oBAAC,uBAAuB,CAAC,QAAQ,IAC/B,KAAK,EAAE;QACL,cAAc,EACZ,cAAc,aAAd,cAAc,cAAd,cAAc,GACd,CAAC,KAAK,IAAI,EAAE,eACV,OAAA,MAAA,CAAC,MAAM,CAAA,MAAA,SAAS,CAAC,mBAAmB,0CAAE,cAAc,EAAE,CAAA,CAAC,mCAAI,EAAE,CAAA,EAAA,CAAC;QAClE,OAAO;KACR;IAED,6BAAK,SAAS,EAAC,mBAAmB;QAChC,oBAAC,OAAO,OAAG,CACP,CAC2B,CACpC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { AccessToken } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport * as React from \"react\";\nimport { Reports } from \"../components/Reports\";\nimport { ReportsApiConfigContext } from \"../context/ReportsApiConfigContext\";\nimport \"./ReportsContainer.scss\";\n\ninterface ReportsContainerProps {\n  getAccessToken?: () => Promise<AccessToken>;\n  baseUrl: string;\n}\n\nconst ReportsContainer = ({\n  getAccessToken,\n  baseUrl,\n}: ReportsContainerProps) => (\n  <ReportsApiConfigContext.Provider\n    value={{\n      getAccessToken:\n        getAccessToken ??\n        (async () =>\n          (await IModelApp.authorizationClient?.getAccessToken()) ?? \"\"),\n      baseUrl,\n    }}\n  >\n    <div className=\"reports-container\">\n      <Reports />\n    </div>\n  </ReportsApiConfigContext.Provider>\n);\n\nexport default ReportsContainer;\n"]}
+{"version":3,"file":"ReportsContainer.js","sourceRoot":"","sources":["../../../../src/widget/components/ReportsContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,yBAAyB,CAAC;AAOjC,MAAM,iCAAiC,GAAG,KAAK,IAAI,EAAE,eACnD,OAAA,MAAA,CAAC,MAAM,CAAA,MAAA,SAAS,CAAC,mBAAmB,0CAAE,cAAc,EAAE,CAAA,CAAC,mCAAI,EAAE,CAAA,EAAA,CAAC;AAEhE,MAAM,gBAAgB,GAAG,CAAC,EACxB,cAAc,EACd,OAAO,GACe,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAmB;QAC3D,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,iCAAiC;QACnE,OAAO;KACR,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;YAClB,OAAO;YACP,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,iCAAiC;SACpE,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9B,OAAO,CACL,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS;QAChD,6BAAK,SAAS,EAAC,mBAAmB;YAChC,oBAAC,OAAO,OAAG,CACP,CAC2B,CACpC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { AccessToken } from \"@itwin/core-bentley\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport React, { useEffect, useState } from \"react\";\nimport { Reports } from \"../components/Reports\";\nimport type { ReportsApiConfig } from \"../context/ReportsApiConfigContext\";\nimport { ReportsApiConfigContext } from \"../context/ReportsApiConfigContext\";\nimport \"./ReportsContainer.scss\";\n\ninterface ReportsContainerProps {\n  getAccessToken?: () => Promise<AccessToken>;\n  baseUrl: string;\n}\n\nconst authorizationClientGetAccessToken = async () =>\n  (await IModelApp.authorizationClient?.getAccessToken()) ?? \"\";\n\nconst ReportsContainer = ({\n  getAccessToken,\n  baseUrl,\n}: ReportsContainerProps) => {\n  const [apiConfig, setApiConfig] = useState<ReportsApiConfig>({\n    getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,\n    baseUrl,\n  });\n\n  useEffect(() => {\n    setApiConfig(() => ({\n      baseUrl,\n      getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,\n    }));\n  }, [getAccessToken, baseUrl]);\n\n  return (\n    <ReportsApiConfigContext.Provider value={apiConfig}>\n      <div className=\"reports-container\">\n        <Reports />\n      </div>\n    </ReportsApiConfigContext.Provider>\n  );\n};\n\nexport default ReportsContainer;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/reports-config-widget-react",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",
@@ -39,7 +39,7 @@
     "@itwin/insights-client": "^0.2.0",
     "@itwin/itwinui-icons-color-react": "^1.0.1",
     "@itwin/itwinui-icons-react": "^1.7.0",
-    "@itwin/itwinui-react": "~1.37.3",
+    "@itwin/itwinui-react": "~1.42.0",
     "simple-react-validator": "^1.6.1"
   },
   "devDependencies": {
@@ -59,7 +59,6 @@
     "@itwin/core-react": "^3.0.0",
     "@itwin/eslint-plugin": "^3.0.0",
     "@itwin/imodel-components-react": "^3.0.0",
-    "@itwin/itwinui-css": "^0.50.0",
     "@itwin/presentation-common": "^3.0.0",
     "@itwin/presentation-frontend": "^3.0.0",
     "@itwin/webgl-compatibility": "^3.0.0",
@@ -87,11 +86,13 @@
     "msw": "^0.39.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.0",
     "redux": "^4.0.4",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.3",
     "typemoq": "^2.1.0",
-    "typescript": "~4.3.0"
+    "typescript": "~4.3.0",
+    "xmlhttprequest": "^1.8.0"
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^3.0.0",

package/reports-config-widget-react.build.error.log

@@ -1,10 +1,10 @@
-PASS src/test/ReportMappings.test.tsx (38.122 s)
-PASS src/test/Reports.test.tsx (8.714 s)
-PASS src/test/ReportAction.test.tsx (5.374 s)
+PASS src/test/ReportMappings.test.tsx (32.075 s)
+PASS src/test/Reports.test.tsx (7.739 s)
+PASS src/test/ReportAction.test.tsx
 PASS src/test/WidgetHeader.test.tsx
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        56.138 s
+Time:        47.487 s
 Ran all test suites.

package/reports-config-widget-react.build.log

@@ -1,34 +1,34 @@
 Invoking: npm test -- --coverage 
 
 
-> @itwin/reports-config-widget-react@0.0.2 test /home/vsts/work/1/s/packages/itwin/reports-config-widget
+> @itwin/reports-config-widget-react@0.0.5 test /home/vsts/work/1/s/packages/itwin/reports-config-widget
 > jest "--coverage"
 
-PASS src/test/ReportMappings.test.tsx (38.122 s)
-PASS src/test/Reports.test.tsx (8.714 s)
-PASS src/test/ReportAction.test.tsx (5.374 s)
+PASS src/test/ReportMappings.test.tsx (32.075 s)
+PASS src/test/Reports.test.tsx (7.739 s)
+PASS src/test/ReportAction.test.tsx
 PASS src/test/WidgetHeader.test.tsx
 ------------------------------|---------|----------|---------|---------|-------------------------------
 File                          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s             
 ------------------------------|---------|----------|---------|---------|-------------------------------
-All files                     |   87.72 |     70.3 |   86.32 |   87.64 |                               
+All files                     |   87.12 |    69.64 |   84.87 |   87.17 |                               
  src                          |     100 |       75 |     100 |     100 |                               
   ReportsConfigWidget.ts      |     100 |       75 |     100 |     100 | 21                            
  src/test                     |     100 |    66.66 |     100 |     100 |                               
   test-utils.tsx              |     100 |    66.66 |     100 |     100 | 56                            
  src/widget                   |      40 |        0 |       0 |      40 |                               
   ReportsConfigUiProvider.tsx |      40 |        0 |       0 |      40 | 23-65                         
- src/widget/components        |   88.11 |    71.51 |   87.62 |   88.12 |                               
+ src/widget/components        |   87.42 |     70.8 |   85.85 |   87.58 |                               
   ActionPanel.tsx             |     100 |    77.77 |     100 |     100 | 25-26                         
   AddMappingsModal.tsx        |   91.66 |       80 |   88.88 |   93.47 | 40,120,134                    
   DeleteModal.tsx             |      85 |      100 |      50 |   84.21 | 42,56-87                      
-  Extraction.tsx              |   85.41 |    72.13 |   85.71 |   85.71 | 51-53,138,200-203,226-229,295 
+  Extraction.tsx              |   85.41 |    73.01 |   85.71 |   85.71 | 51-53,138,200-203,226-229,295 
   HorizontalTile.tsx          |     100 |      100 |     100 |     100 |                               
   LocalizedTablePaginator.tsx |     100 |       50 |     100 |     100 | 25                            
   ReportAction.tsx            |   94.28 |    81.48 |     100 |   94.28 | 59-60                         
   ReportMappings.tsx          |   96.29 |    74.41 |   94.44 |   96.25 | 97,119,268                    
   Reports.tsx                 |   97.14 |    78.68 |     100 |   98.52 | 65                            
-  ReportsContainer.tsx        |   77.77 |        0 |       0 |   77.77 | 21-26                         
+  ReportsContainer.tsx        |   57.14 |        0 |       0 |   61.53 | 19,25-37                      
   SearchBar.tsx               |   70.58 |    71.42 |      60 |   68.75 | 31-45                         
   SelectIModel.tsx            |   97.05 |    81.81 |   85.71 |   96.87 | 92                            
   utils.tsx                   |   56.86 |    23.07 |    87.5 |   48.83 | 46-100                        
@@ -41,5 +41,5 @@ All files                     |   87.72 |     70.3 |   86.32 |   87.64 |
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        56.138 s
+Time:        47.487 s
 Ran all test suites.

package/src/test/ReportMappings.test.tsx

@@ -202,8 +202,7 @@ const mockMappingsFactory = (
 
   const iModelHandlers: RequestHandler[] = mockMappings.map((mapping) =>
     rest.get(
-      `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/imodels/${
-        mapping.mapping?._links?.imodel?.href ?? ""
+      `${REPORTS_CONFIG_BASE_URL}/insights/reporting/datasources/imodels/${mapping.mapping?._links?.imodel?.href ?? ""
       }/mappings/${mapping.mapping?.id}`,
       async (_req, res, ctx) => {
         return res(ctx.delay(), ctx.status(200), ctx.json(mapping));
@@ -456,8 +455,7 @@ describe("Report Mappings View", () => {
       ),
       ...iModelHandlers,
       rest.delete(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings/${
-          mockReportMappings.mappings![0].mappingId ?? ""
+        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockReportId}/datasources/imodelMappings/${mockReportMappings.mappings![0].mappingId ?? ""
         }`,
         async (_req, res, ctx) => {
           mockReportMappings.mappings = mockReportMappings.mappings!.filter(
@@ -632,30 +630,25 @@ describe("Report Mappings View", () => {
     for (let i = 0; i < mockMappings.length - 1; i++) {
       const row = screen.getByRole("row", {
         name: new RegExp(
-          `toggle row selected ${mockMappings[i].mapping?.mappingName} ${mockMappings[i].mapping?.description}`,
+          `${mockMappings[i].mapping?.mappingName} ${mockMappings[i].mapping?.description}`,
           "i"
         ),
       });
 
-      const checkbox = within(row).getByRole("checkbox", {
-        name: /toggle row selected/i,
-      });
+      const checkbox = within(row).getByRole("checkbox");
       expect(checkbox).toBeDisabled();
     }
 
     // Click on checkbox on new mapping
     const unmappedRow = screen.getByRole("row", {
       name: new RegExp(
-        `toggle row selected ${
-          mockMappings[mockMappings.length - 1].mapping?.mappingName
+        `${mockMappings[mockMappings.length - 1].mapping?.mappingName
         } ${mockMappings[mockMappings.length - 1].mapping?.description}`,
         "i"
       ),
     });
 
-    const enabledCheckbox = within(unmappedRow).getByRole("checkbox", {
-      name: /toggle row selected/i,
-    });
+    const enabledCheckbox = within(unmappedRow).getByRole("checkbox");
 
     await user.click(enabledCheckbox);
 
@@ -830,7 +823,7 @@ describe("Report Mappings View", () => {
     });
     await user.type(comboBox, mockIModel.displayName);
 
-    const option = screen.getByRole("option", {
+    const option = screen.getByRole("menuitem", {
       name: mockIModel.displayName,
     });
 

package/src/widget/components/Extraction.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@keyframes rcw-fadeOut {
+@keyframes rcw-fade-out {
   0% {
     opacity: 1;
   }

package/src/widget/components/Extraction.tsx

@@ -238,7 +238,6 @@ export const Extraction = ({
   }, [apiConfig, isRunning, jobId, setExtractionState]);
 
   const iModelOptions = useMemo(() => {
-    // TODO Report ComboBox bug. Unique key error happens when the options list becomes reduced.
     const newIModelOptions: SelectOption<string>[] = [];
 
     for (const [iModelId, iModelName] of iModels.entries()) {
@@ -249,6 +248,7 @@ export const Extraction = ({
         disabled: extractionState !== ExtractionStates.None,
       });
     }
+
     return newIModelOptions;
   }, [iModels, extractionState]);
 
@@ -268,7 +268,7 @@ export const Extraction = ({
             value={currentIModelId}
             onChange={async (value) => {
               setCurrentIModelId(value);
-              await runExtraction(value);
+              value && await runExtraction(value);
             }}
             inputProps={{
               id: "combo-input",

package/src/widget/components/ReportsContainer.tsx

@@ -4,8 +4,9 @@
 *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import { IModelApp } from "@itwin/core-frontend";
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { Reports } from "../components/Reports";
+import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
 import { ReportsApiConfigContext } from "../context/ReportsApiConfigContext";
 import "./ReportsContainer.scss";
 
@@ -14,23 +15,32 @@ interface ReportsContainerProps {
   baseUrl: string;
 }
 
+const authorizationClientGetAccessToken = async () =>
+  (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
+
 const ReportsContainer = ({
   getAccessToken,
   baseUrl,
-}: ReportsContainerProps) => (
-  <ReportsApiConfigContext.Provider
-    value={{
-      getAccessToken:
-        getAccessToken ??
-        (async () =>
-          (await IModelApp.authorizationClient?.getAccessToken()) ?? ""),
+}: ReportsContainerProps) => {
+  const [apiConfig, setApiConfig] = useState<ReportsApiConfig>({
+    getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,
+    baseUrl,
+  });
+
+  useEffect(() => {
+    setApiConfig(() => ({
       baseUrl,
-    }}
-  >
-    <div className="reports-container">
-      <Reports />
-    </div>
-  </ReportsApiConfigContext.Provider>
-);
+      getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,
+    }));
+  }, [getAccessToken, baseUrl]);
+
+  return (
+    <ReportsApiConfigContext.Provider value={apiConfig}>
+      <div className="reports-container">
+        <Reports />
+      </div>
+    </ReportsApiConfigContext.Provider>
+  );
+};
 
 export default ReportsContainer;