@backstage/core-components 0.18.3 → 0.18.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage/core-components
 
+## 0.18.4-next.1
+
+### Patch Changes
+
+- 9a942a4: Fixed bug in the `LogViewer` component where shift + click always opened a new window instead of just changing the selection.
+
+  In addition, improved the `LogViewer` component by a few usability enhancements:
+
+  - Added support for multiple selections using cmd/ctrl + click
+  - Improved the generated hash that is added to the URL to also support ranges & multiple selections
+  - Added an hover effect & info tooltip to the "Copy to clipboard" button to indicate its functionality
+  - Added some color and a separator to the line numbers to improve readability
+
+- 207c3c8: long words like urls now breaks to new line on warning panels instead of overflowing the container
+- 5d52dab: Add i18n support for LogViewer search control
+
+## 0.18.4-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.12.1-next.0
+  - @backstage/theme@0.7.1-next.0
+  - @backstage/config@1.3.6
+  - @backstage/errors@1.2.7
+  - @backstage/version-bridge@1.0.11
+
 ## 0.18.3
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -56,6 +56,7 @@ declare const coreComponentsTranslationRef: _backstage_core_plugin_api_alpha.Tra
     readonly "autoLogout.stillTherePrompt.buttonText": "Yes! Don't log me out";
     readonly "dependencyGraph.fullscreenTooltip": "Toggle fullscreen";
     readonly "proxiedSignInPage.title": "You do not appear to be signed in. Please try reloading the browser page.";
+    readonly "logViewer.searchField.placeholder": "Search";
 }>;
 
 export { coreComponentsTranslationRef };

package/dist/components/LogViewer/LogViewerControls.esm.js

@@ -1,12 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import IconButton from '@material-ui/core/IconButton';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import FilterList from '@material-ui/icons/FilterList';
+import { coreComponentsTranslationRef } from '../../translation.esm.js';
 
 function LogViewerControls(props) {
+  const { t } = useTranslationRef(coreComponentsTranslationRef);
   const { resultCount, resultIndexStep, toggleShouldFilter } = props;
   const resultIndex = props.resultIndex ?? 0;
   const handleKeyPress = (event) => {
@@ -33,7 +36,7 @@ function LogViewerControls(props) {
       {
         size: "small",
         variant: "standard",
-        placeholder: "Search",
+        placeholder: t("logViewer.searchField.placeholder"),
         value: props.searchInput,
         onKeyPress: handleKeyPress,
         onChange: (e) => props.setSearchInput(e.target.value)

package/dist/components/LogViewer/LogViewerControls.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogViewerControls.esm.js","sources":["../../../src/components/LogViewer/LogViewerControls.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { KeyboardEvent } from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { LogViewerSearch } from './useLogViewerSearch';\n\nexport interface LogViewerControlsProps extends LogViewerSearch {}\n\nexport function LogViewerControls(props: LogViewerControlsProps) {\n  const { resultCount, resultIndexStep, toggleShouldFilter } = props;\n  const resultIndex = props.resultIndex ?? 0;\n\n  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      if (event.metaKey || event.ctrlKey || event.altKey) {\n        toggleShouldFilter();\n      } else {\n        resultIndexStep(event.shiftKey);\n      }\n    }\n  };\n\n  return (\n    <>\n      {resultCount !== undefined && (\n        <>\n          <IconButton size=\"small\" onClick={() => resultIndexStep(true)}>\n            <ChevronLeftIcon />\n          </IconButton>\n          <Typography>\n            {Math.min(resultIndex + 1, resultCount)}/{resultCount}\n          </Typography>\n          <IconButton size=\"small\" onClick={() => resultIndexStep()}>\n            <ChevronRightIcon />\n          </IconButton>\n        </>\n      )}\n      <TextField\n        size=\"small\"\n        variant=\"standard\"\n        placeholder=\"Search\"\n        value={props.searchInput}\n        onKeyPress={handleKeyPress}\n        onChange={e => props.setSearchInput(e.target.value)}\n      />\n      <IconButton size=\"small\" onClick={toggleShouldFilter}>\n        {props.shouldFilter ? (\n          <FilterListIcon color=\"primary\" />\n        ) : (\n          <FilterListIcon color=\"disabled\" />\n        )}\n      </IconButton>\n    </>\n  );\n}\n"],"names":["ChevronRightIcon","FilterListIcon"],"mappings":";;;;;;;;AA2BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,WAAA,EAAa,eAAA,EAAiB,kBAAA,EAAmB,GAAI,KAAA;AAC7D,EAAA,MAAM,WAAA,GAAc,MAAM,WAAA,IAAe,CAAA;AAEzC,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA2C;AACjE,IAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,MAAA,IAAI,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAA,IAAW,MAAM,MAAA,EAAQ;AAClD,QAAA,kBAAA,EAAmB;AAAA,MACrB,CAAA,MAAO;AACL,QAAA,eAAA,CAAgB,MAAM,QAAQ,CAAA;AAAA,MAChC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,KAAgB,0BACf,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,MAAM,gBAAgB,IAAI,CAAA,EAC1D,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,2BACC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,GAAA,CAAI,WAAA,GAAc,CAAA,EAAG,WAAW,CAAA;AAAA,QAAE,GAAA;AAAA,QAAE;AAAA,OAAA,EAC5C,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,MAAM,eAAA,EAAgB,EACtD,QAAA,kBAAA,GAAA,CAACA,YAAA,EAAA,EAAiB,CAAA,EACpB;AAAA,KAAA,EACF,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,OAAA,EAAQ,UAAA;AAAA,QACR,WAAA,EAAY,QAAA;AAAA,QACZ,OAAO,KAAA,CAAM,WAAA;AAAA,QACb,UAAA,EAAY,cAAA;AAAA,QACZ,UAAU,CAAA,CAAA,KAAK,KAAA,CAAM,cAAA,CAAe,CAAA,CAAE,OAAO,KAAK;AAAA;AAAA,KACpD;AAAA,wBACC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,oBAC/B,QAAA,EAAA,KAAA,CAAM,YAAA,mBACL,GAAA,CAACC,UAAA,EAAA,EAAe,OAAM,SAAA,EAAU,CAAA,uBAE/BA,UAAA,EAAA,EAAe,KAAA,EAAM,YAAW,CAAA,EAErC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LogViewerControls.esm.js","sources":["../../../src/components/LogViewer/LogViewerControls.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { KeyboardEvent } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport IconButton from '@material-ui/core/IconButton';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { LogViewerSearch } from './useLogViewerSearch';\n\nexport interface LogViewerControlsProps extends LogViewerSearch {}\n\nexport function LogViewerControls(props: LogViewerControlsProps) {\n  const { t } = useTranslationRef(coreComponentsTranslationRef);\n  const { resultCount, resultIndexStep, toggleShouldFilter } = props;\n  const resultIndex = props.resultIndex ?? 0;\n\n  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      if (event.metaKey || event.ctrlKey || event.altKey) {\n        toggleShouldFilter();\n      } else {\n        resultIndexStep(event.shiftKey);\n      }\n    }\n  };\n\n  return (\n    <>\n      {resultCount !== undefined && (\n        <>\n          <IconButton size=\"small\" onClick={() => resultIndexStep(true)}>\n            <ChevronLeftIcon />\n          </IconButton>\n          <Typography>\n            {Math.min(resultIndex + 1, resultCount)}/{resultCount}\n          </Typography>\n          <IconButton size=\"small\" onClick={() => resultIndexStep()}>\n            <ChevronRightIcon />\n          </IconButton>\n        </>\n      )}\n      <TextField\n        size=\"small\"\n        variant=\"standard\"\n        placeholder={t('logViewer.searchField.placeholder')}\n        value={props.searchInput}\n        onKeyPress={handleKeyPress}\n        onChange={e => props.setSearchInput(e.target.value)}\n      />\n      <IconButton size=\"small\" onClick={toggleShouldFilter}>\n        {props.shouldFilter ? (\n          <FilterListIcon color=\"primary\" />\n        ) : (\n          <FilterListIcon color=\"disabled\" />\n        )}\n      </IconButton>\n    </>\n  );\n}\n"],"names":["ChevronRightIcon","FilterListIcon"],"mappings":";;;;;;;;;;AA6BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,4BAA4B,CAAA;AAC5D,EAAA,MAAM,EAAE,WAAA,EAAa,eAAA,EAAiB,kBAAA,EAAmB,GAAI,KAAA;AAC7D,EAAA,MAAM,WAAA,GAAc,MAAM,WAAA,IAAe,CAAA;AAEzC,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA2C;AACjE,IAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,MAAA,IAAI,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,OAAA,IAAW,MAAM,MAAA,EAAQ;AAClD,QAAA,kBAAA,EAAmB;AAAA,MACrB,CAAA,MAAO;AACL,QAAA,eAAA,CAAgB,MAAM,QAAQ,CAAA;AAAA,MAChC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,KAAgB,0BACf,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,MAAM,gBAAgB,IAAI,CAAA,EAC1D,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA;AAAA,2BACC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,GAAA,CAAI,WAAA,GAAc,CAAA,EAAG,WAAW,CAAA;AAAA,QAAE,GAAA;AAAA,QAAE;AAAA,OAAA,EAC5C,CAAA;AAAA,sBACA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,MAAM,eAAA,EAAgB,EACtD,QAAA,kBAAA,GAAA,CAACA,YAAA,EAAA,EAAiB,CAAA,EACpB;AAAA,KAAA,EACF,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,OAAA,EAAQ,UAAA;AAAA,QACR,WAAA,EAAa,EAAE,mCAAmC,CAAA;AAAA,QAClD,OAAO,KAAA,CAAM,WAAA;AAAA,QACb,UAAA,EAAY,cAAA;AAAA,QACZ,UAAU,CAAA,CAAA,KAAK,KAAA,CAAM,cAAA,CAAe,CAAA,CAAE,OAAO,KAAK;AAAA;AAAA,KACpD;AAAA,wBACC,UAAA,EAAA,EAAW,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAS,oBAC/B,QAAA,EAAA,KAAA,CAAM,YAAA,mBACL,GAAA,CAACC,UAAA,EAAA,EAAe,OAAM,SAAA,EAAU,CAAA,uBAE/BA,UAAA,EAAA,EAAe,KAAA,EAAM,YAAW,CAAA,EAErC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/LogViewer/RealLogViewer.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import CopyIcon from '@material-ui/icons/FileCopy';
@@ -13,6 +13,7 @@ import { LogViewerControls } from './LogViewerControls.esm.js';
 import { useStyles, HEADER_SIZE } from './styles.esm.js';
 import { useLogViewerSearch } from './useLogViewerSearch.esm.js';
 import { useLogViewerSelection } from './useLogViewerSelection.esm.js';
+import Snackbar from '@material-ui/core/Snackbar';
 
 function RealLogViewer(props) {
   const classes = useStyles({ classes: props.classes });
@@ -21,6 +22,7 @@ function RealLogViewer(props) {
   const heights = useRef({});
   const processor = useMemo(() => new AnsiProcessor(), []);
   const lines = processor.process(props.text);
+  const [showCopyInfo, setShowCopyInfo] = useState(false);
   const search = useLogViewerSearch(lines);
   const selection = useLogViewerSelection(lines);
   const location = useLocation();
@@ -39,14 +41,28 @@ function RealLogViewer(props) {
       listInstance.scrollToItem(lines.length - 1, "end");
     }
   }, [listInstance, search.resultLine, lines]);
+  useEffect(() => {
+    const hash = selection.getHash();
+    if (hash.length > 0) {
+      history.replaceState(null, "", hash);
+    }
+  }, [selection]);
   useEffect(() => {
     if (location.hash) {
-      const line = parseInt(location.hash.replace(/\D/g, ""), 10);
-      selection.setSelection(line, false);
+      selection.selectAll(location.hash);
     }
   }, []);
   const handleSelectLine = (line, event) => {
-    selection.setSelection(line, event.shiftKey);
+    event.preventDefault();
+    selection.setSelection(
+      line,
+      event.shiftKey,
+      event.metaKey || event.ctrlKey
+    );
+  };
+  const handleCopySelection = (line) => {
+    selection.copySelection(line);
+    setShowCopyInfo(true);
   };
   function setRowHeight(index, size) {
     if (shouldTextWrap && listInstance) {
@@ -57,78 +73,90 @@ function RealLogViewer(props) {
   function getRowHeight(index) {
     return heights.current[index] || 20;
   }
-  return /* @__PURE__ */ jsx(AutoSizer, { children: ({ height, width }) => {
-    const commonProps = {
-      ref: setListInstance,
-      className: classes.log,
-      height: (height || 480) - HEADER_SIZE,
-      width: width || 640,
-      itemData: search.lines,
-      itemCount: search.lines.length
-    };
-    const renderItem = ({
-      index,
-      style,
-      data
-    }) => {
-      const line = data[index];
-      const { lineNumber } = line;
-      return /* @__PURE__ */ jsxs(
-        Box,
-        {
-          style: { ...style },
-          className: classNames(classes.line, {
-            [classes.lineSelected]: selection.isSelected(lineNumber)
-          }),
-          children: [
-            selection.shouldShowButton(lineNumber) && /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                "data-testid": "copy-button",
-                size: "small",
-                className: classes.lineCopyButton,
-                onClick: () => selection.copySelection(),
-                children: /* @__PURE__ */ jsx(CopyIcon, { fontSize: "inherit" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                role: "row",
-                target: "_self",
-                href: `#line-${lineNumber}`,
-                className: classes.lineNumber,
-                onClick: (event) => handleSelectLine(lineNumber, event),
-                onKeyPress: (event) => handleSelectLine(lineNumber, event),
-                children: lineNumber
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              LogLine,
-              {
-                setRowHeight: shouldTextWrap ? setRowHeight : void 0,
-                line,
-                classes,
-                searchText: search.searchText,
-                highlightResultIndex: search.resultLine === lineNumber ? search.resultLineIndex : void 0
-              }
-            )
-          ]
-        }
-      );
-    };
-    return /* @__PURE__ */ jsxs(Box, { style: { width, height }, className: classes.root, children: [
-      /* @__PURE__ */ jsx(Box, { className: classes.header, children: /* @__PURE__ */ jsx(LogViewerControls, { ...search }) }),
-      shouldTextWrap ? /* @__PURE__ */ jsx(
-        VariableSizeList,
-        {
-          ...commonProps,
-          itemSize: getRowHeight,
-          children: renderItem
-        }
-      ) : /* @__PURE__ */ jsx(FixedSizeList, { ...commonProps, itemSize: 20, children: renderItem })
-    ] });
-  } });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AutoSizer, { children: ({ height, width }) => {
+      const commonProps = {
+        ref: setListInstance,
+        className: classes.log,
+        height: (height || 480) - HEADER_SIZE,
+        width: width || 640,
+        itemData: search.lines,
+        itemCount: search.lines.length
+      };
+      const renderItem = ({
+        index,
+        style,
+        data
+      }) => {
+        const line = data[index];
+        const { lineNumber } = line;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: { ...style },
+            className: classNames(classes.line, {
+              [classes.lineSelected]: selection.isSelected(lineNumber)
+            }),
+            children: [
+              selection.shouldShowCopyButton(lineNumber) && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "data-testid": "copy-button",
+                  size: "small",
+                  className: classes.lineCopyButton,
+                  onClick: () => handleCopySelection(lineNumber),
+                  children: /* @__PURE__ */ jsx(CopyIcon, { fontSize: "inherit" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  role: "row",
+                  target: "_self",
+                  href: `#line-${lineNumber}`,
+                  className: classes.lineNumber,
+                  onClick: (event) => handleSelectLine(lineNumber, event),
+                  onKeyPress: (event) => handleSelectLine(lineNumber, event),
+                  children: lineNumber
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                LogLine,
+                {
+                  setRowHeight: shouldTextWrap ? setRowHeight : void 0,
+                  line,
+                  classes,
+                  searchText: search.searchText,
+                  highlightResultIndex: search.resultLine === lineNumber ? search.resultLineIndex : void 0
+                }
+              )
+            ]
+          }
+        );
+      };
+      return /* @__PURE__ */ jsxs(Box, { style: { width, height }, className: classes.root, children: [
+        /* @__PURE__ */ jsx(Box, { className: classes.header, children: /* @__PURE__ */ jsx(LogViewerControls, { ...search }) }),
+        shouldTextWrap ? /* @__PURE__ */ jsx(
+          VariableSizeList,
+          {
+            ...commonProps,
+            itemSize: getRowHeight,
+            children: renderItem
+          }
+        ) : /* @__PURE__ */ jsx(FixedSizeList, { ...commonProps, itemSize: 20, children: renderItem })
+      ] });
+    } }),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: showCopyInfo,
+        autoHideDuration: 3e3,
+        onClose: () => setShowCopyInfo(false),
+        message: "Lines copied to clipboard",
+        anchorOrigin: { vertical: "bottom", horizontal: "center" }
+      }
+    )
+  ] });
 }
 
 export { RealLogViewer };

package/dist/components/LogViewer/RealLogViewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RealLogViewer.esm.js","sources":["../../../src/components/LogViewer/RealLogViewer.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@material-ui/core/Box';\nimport IconButton from '@material-ui/core/IconButton';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport classnames from 'classnames';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { VariableSizeList, FixedSizeList } from 'react-window';\n\nimport { AnsiLine, AnsiProcessor } from './AnsiProcessor';\nimport { LogLine } from './LogLine';\nimport { LogViewerControls } from './LogViewerControls';\nimport { HEADER_SIZE, useStyles } from './styles';\nimport { useLogViewerSearch } from './useLogViewerSearch';\nimport { useLogViewerSelection } from './useLogViewerSelection';\n\nexport interface RealLogViewerProps {\n  text: string;\n  textWrap?: boolean;\n  classes?: { root?: string };\n}\n\nexport function RealLogViewer(props: RealLogViewerProps) {\n  const classes = useStyles({ classes: props.classes });\n  const [listInstance, setListInstance] = useState<\n    VariableSizeList<AnsiLine[]> | FixedSizeList<AnsiLine[]> | null\n  >(null);\n  const shouldTextWrap = props.textWrap ?? false;\n  const heights = useRef<{ [key: number]: number }>({});\n\n  // The processor keeps state that optimizes appending to the text\n  const processor = useMemo(() => new AnsiProcessor(), []);\n  const lines = processor.process(props.text);\n\n  const search = useLogViewerSearch(lines);\n  const selection = useLogViewerSelection(lines);\n  const location = useLocation();\n\n  useEffect(() => {\n    if (listInstance) {\n      listInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [listInstance, lines]);\n\n  useEffect(() => {\n    if (!listInstance) {\n      return;\n    }\n    if (search.resultLine) {\n      listInstance.scrollToItem(search.resultLine - 1, 'center');\n    } else {\n      listInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [listInstance, search.resultLine, lines]);\n\n  useEffect(() => {\n    if (location.hash) {\n      // #line-6 -> 6\n      const line = parseInt(location.hash.replace(/\\D/g, ''), 10);\n      selection.setSelection(line, false);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleSelectLine = (\n    line: number,\n    event: { shiftKey: boolean; preventDefault: () => void },\n  ) => {\n    selection.setSelection(line, event.shiftKey);\n  };\n\n  function setRowHeight(index: number, size: number) {\n    if (shouldTextWrap && listInstance) {\n      (listInstance as VariableSizeList<AnsiLine[]>).resetAfterIndex(0);\n      // lineNumber is 1-based but index is 0-based\n      heights.current[index - 1] = size;\n    }\n  }\n\n  function getRowHeight(index: number) {\n    return heights.current[index] || 20;\n  }\n\n  return (\n    <AutoSizer>\n      {({ height, width }: { height?: number; width?: number }) => {\n        const commonProps = {\n          ref: setListInstance,\n          className: classes.log,\n          height: (height || 480) - HEADER_SIZE,\n          width: width || 640,\n          itemData: search.lines,\n          itemCount: search.lines.length,\n        };\n\n        const renderItem = ({\n          index,\n          style,\n          data,\n        }: {\n          index: number;\n          style: React.CSSProperties;\n          data: AnsiLine[];\n        }) => {\n          const line = data[index];\n          const { lineNumber } = line;\n          return (\n            <Box\n              style={{ ...style }}\n              className={classnames(classes.line, {\n                [classes.lineSelected]: selection.isSelected(lineNumber),\n              })}\n            >\n              {selection.shouldShowButton(lineNumber) && (\n                <IconButton\n                  data-testid=\"copy-button\"\n                  size=\"small\"\n                  className={classes.lineCopyButton}\n                  onClick={() => selection.copySelection()}\n                >\n                  <CopyIcon fontSize=\"inherit\" />\n                </IconButton>\n              )}\n              <a\n                role=\"row\"\n                target=\"_self\"\n                href={`#line-${lineNumber}`}\n                className={classes.lineNumber}\n                onClick={event => handleSelectLine(lineNumber, event)}\n                onKeyPress={event => handleSelectLine(lineNumber, event)}\n              >\n                {lineNumber}\n              </a>\n              <LogLine\n                setRowHeight={shouldTextWrap ? setRowHeight : undefined}\n                line={line}\n                classes={classes}\n                searchText={search.searchText}\n                highlightResultIndex={\n                  search.resultLine === lineNumber\n                    ? search.resultLineIndex\n                    : undefined\n                }\n              />\n            </Box>\n          );\n        };\n\n        return (\n          <Box style={{ width, height }} className={classes.root}>\n            <Box className={classes.header}>\n              <LogViewerControls {...search} />\n            </Box>\n            {shouldTextWrap ? (\n              <VariableSizeList<AnsiLine[]>\n                {...commonProps}\n                itemSize={getRowHeight}\n              >\n                {renderItem}\n              </VariableSizeList>\n            ) : (\n              <FixedSizeList<AnsiLine[]> {...commonProps} itemSize={20}>\n                {renderItem}\n              </FixedSizeList>\n            )}\n          </Box>\n        );\n      }}\n    </AutoSizer>\n  );\n}\n"],"names":["classnames"],"mappings":"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"}
+{"version":3,"file":"RealLogViewer.esm.js","sources":["../../../src/components/LogViewer/RealLogViewer.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@material-ui/core/Box';\nimport IconButton from '@material-ui/core/IconButton';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport classnames from 'classnames';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { FixedSizeList, VariableSizeList } from 'react-window';\n\nimport { AnsiLine, AnsiProcessor } from './AnsiProcessor';\nimport { LogLine } from './LogLine';\nimport { LogViewerControls } from './LogViewerControls';\nimport { HEADER_SIZE, useStyles } from './styles';\nimport { useLogViewerSearch } from './useLogViewerSearch';\nimport { useLogViewerSelection } from './useLogViewerSelection';\nimport Snackbar from '@material-ui/core/Snackbar';\n\nexport interface RealLogViewerProps {\n  text: string;\n  textWrap?: boolean;\n  classes?: { root?: string };\n}\n\nexport function RealLogViewer(props: RealLogViewerProps) {\n  const classes = useStyles({ classes: props.classes });\n  const [listInstance, setListInstance] = useState<\n    VariableSizeList<AnsiLine[]> | FixedSizeList<AnsiLine[]> | null\n  >(null);\n  const shouldTextWrap = props.textWrap ?? false;\n  const heights = useRef<{ [key: number]: number }>({});\n\n  // The processor keeps state that optimizes appending to the text\n  const processor = useMemo(() => new AnsiProcessor(), []);\n  const lines = processor.process(props.text);\n  const [showCopyInfo, setShowCopyInfo] = useState(false);\n\n  const search = useLogViewerSearch(lines);\n  const selection = useLogViewerSelection(lines);\n  const location = useLocation();\n\n  useEffect(() => {\n    if (listInstance) {\n      listInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [listInstance, lines]);\n\n  useEffect(() => {\n    if (!listInstance) {\n      return;\n    }\n    if (search.resultLine) {\n      listInstance.scrollToItem(search.resultLine - 1, 'center');\n    } else {\n      listInstance.scrollToItem(lines.length - 1, 'end');\n    }\n  }, [listInstance, search.resultLine, lines]);\n\n  useEffect(() => {\n    const hash = selection.getHash();\n    if (hash.length > 0) {\n      history.replaceState(null, '', hash);\n    }\n  }, [selection]);\n\n  useEffect(() => {\n    if (location.hash) {\n      selection.selectAll(location.hash);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleSelectLine = (\n    line: number,\n    event: {\n      shiftKey: boolean;\n      metaKey: boolean;\n      ctrlKey: boolean;\n      preventDefault: () => void;\n    },\n  ) => {\n    event.preventDefault();\n    selection.setSelection(\n      line,\n      event.shiftKey,\n      event.metaKey || event.ctrlKey,\n    );\n  };\n\n  const handleCopySelection = (line: number) => {\n    selection.copySelection(line);\n    setShowCopyInfo(true);\n  };\n\n  function setRowHeight(index: number, size: number) {\n    if (shouldTextWrap && listInstance) {\n      (listInstance as VariableSizeList<AnsiLine[]>).resetAfterIndex(0);\n      // lineNumber is 1-based but index is 0-based\n      heights.current[index - 1] = size;\n    }\n  }\n\n  function getRowHeight(index: number) {\n    return heights.current[index] || 20;\n  }\n\n  return (\n    <>\n      <AutoSizer>\n        {({ height, width }: { height?: number; width?: number }) => {\n          const commonProps = {\n            ref: setListInstance,\n            className: classes.log,\n            height: (height || 480) - HEADER_SIZE,\n            width: width || 640,\n            itemData: search.lines,\n            itemCount: search.lines.length,\n          };\n\n          const renderItem = ({\n            index,\n            style,\n            data,\n          }: {\n            index: number;\n            style: React.CSSProperties;\n            data: AnsiLine[];\n          }) => {\n            const line = data[index];\n            const { lineNumber } = line;\n            return (\n              <Box\n                style={{ ...style }}\n                className={classnames(classes.line, {\n                  [classes.lineSelected]: selection.isSelected(lineNumber),\n                })}\n              >\n                {selection.shouldShowCopyButton(lineNumber) && (\n                  <IconButton\n                    data-testid=\"copy-button\"\n                    size=\"small\"\n                    className={classes.lineCopyButton}\n                    onClick={() => handleCopySelection(lineNumber)}\n                  >\n                    <CopyIcon fontSize=\"inherit\" />\n                  </IconButton>\n                )}\n                <a\n                  role=\"row\"\n                  target=\"_self\"\n                  href={`#line-${lineNumber}`}\n                  className={classes.lineNumber}\n                  onClick={event => handleSelectLine(lineNumber, event)}\n                  onKeyPress={event => handleSelectLine(lineNumber, event)}\n                >\n                  {lineNumber}\n                </a>\n                <LogLine\n                  setRowHeight={shouldTextWrap ? setRowHeight : undefined}\n                  line={line}\n                  classes={classes}\n                  searchText={search.searchText}\n                  highlightResultIndex={\n                    search.resultLine === lineNumber\n                      ? search.resultLineIndex\n                      : undefined\n                  }\n                />\n              </Box>\n            );\n          };\n\n          return (\n            <Box style={{ width, height }} className={classes.root}>\n              <Box className={classes.header}>\n                <LogViewerControls {...search} />\n              </Box>\n              {shouldTextWrap ? (\n                <VariableSizeList<AnsiLine[]>\n                  {...commonProps}\n                  itemSize={getRowHeight}\n                >\n                  {renderItem}\n                </VariableSizeList>\n              ) : (\n                <FixedSizeList<AnsiLine[]> {...commonProps} itemSize={20}>\n                  {renderItem}\n                </FixedSizeList>\n              )}\n            </Box>\n          );\n        }}\n      </AutoSizer>\n      <Snackbar\n        open={showCopyInfo}\n        autoHideDuration={3000}\n        onClose={() => setShowCopyInfo(false)}\n        message=\"Lines copied to clipboard\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n      />\n    </>\n  );\n}\n"],"names":["classnames"],"mappings":"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"}

package/dist/components/LogViewer/styles.esm.js

@@ -36,16 +36,21 @@ const useStyles = makeStyles(
     lineCopyButton: {
       position: "absolute",
       paddingTop: 0,
-      paddingBottom: 0
+      paddingBottom: 0,
+      "&:hover": {
+        color: theme.palette.linkHover
+      }
     },
     lineNumber: {
       display: "inline-block",
       textAlign: "end",
       width: 60,
+      paddingRight: theme.spacing(1),
       marginRight: theme.spacing(1),
       cursor: "pointer",
       flexShrink: 0,
-      userSelect: "none"
+      color: colors.blue[300],
+      borderRight: `1px solid ${colors.blue[700]}`
     },
     textHighlight: {
       background: alpha(theme.palette.info.main, 0.15)

package/dist/components/LogViewer/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../src/components/LogViewer/styles.ts"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { alpha, makeStyles } from '@material-ui/core/styles';\nimport * as colors from '@material-ui/core/colors';\n\nexport const HEADER_SIZE = 40;\n\n/** @public Class keys for overriding LogViewer styles */\nexport type LogViewerClassKey =\n  | 'root'\n  | 'header'\n  | 'log'\n  | 'line'\n  | 'lineSelected'\n  | 'lineCopyButton'\n  | 'lineNumber'\n  | 'textHighlight'\n  | 'textSelectedHighlight'\n  | 'modifierBold'\n  | 'modifierItalic'\n  | 'modifierUnderline'\n  | 'modifierForegroundBlack'\n  | 'modifierForegroundRed'\n  | 'modifierForegroundGreen'\n  | 'modifierForegroundYellow'\n  | 'modifierForegroundBlue'\n  | 'modifierForegroundMagenta'\n  | 'modifierForegroundCyan'\n  | 'modifierForegroundWhite'\n  | 'modifierForegroundGrey'\n  | 'modifierBackgroundBlack'\n  | 'modifierBackgroundRed'\n  | 'modifierBackgroundGreen'\n  | 'modifierBackgroundYellow'\n  | 'modifierBackgroundBlue'\n  | 'modifierBackgroundMagenta'\n  | 'modifierBackgroundCyan'\n  | 'modifierBackgroundWhite'\n  | 'modifierBackgroundGrey';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    root: {\n      background: theme.palette.background.paper,\n    },\n    header: {\n      height: HEADER_SIZE,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n    },\n    log: {\n      fontFamily: '\"Monaco\", monospace',\n      fontSize: theme.typography.pxToRem(12),\n      lineHeight: '20px',\n    },\n    line: {\n      position: 'relative',\n      whiteSpace: 'pre',\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      '&:hover': {\n        background: theme.palette.action.hover,\n      },\n    },\n    lineSelected: {\n      background: theme.palette.action.selected,\n\n      '&:hover': {\n        background: theme.palette.action.selected,\n      },\n    },\n    lineCopyButton: {\n      position: 'absolute',\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    lineNumber: {\n      display: 'inline-block',\n      textAlign: 'end',\n      width: 60,\n      marginRight: theme.spacing(1),\n      cursor: 'pointer',\n      flexShrink: 0,\n      userSelect: 'none',\n    },\n    textHighlight: {\n      background: alpha(theme.palette.info.main, 0.15),\n    },\n    textSelectedHighlight: {\n      background: alpha(theme.palette.info.main, 0.4),\n    },\n    modifierBold: {\n      fontWeight: theme.typography.fontWeightBold,\n    },\n    modifierItalic: {\n      fontStyle: 'italic',\n    },\n    modifierUnderline: {\n      textDecoration: 'underline',\n    },\n    modifierForegroundBlack: {\n      color: colors.common.black,\n    },\n    modifierForegroundRed: {\n      color: colors.red[500],\n    },\n    modifierForegroundGreen: {\n      color: colors.green[500],\n    },\n    modifierForegroundYellow: {\n      color: colors.yellow[500],\n    },\n    modifierForegroundBlue: {\n      color: colors.blue[500],\n    },\n    modifierForegroundMagenta: {\n      color: colors.purple[500],\n    },\n    modifierForegroundCyan: {\n      color: colors.cyan[500],\n    },\n    modifierForegroundWhite: {\n      color: colors.common.white,\n    },\n    modifierForegroundGrey: {\n      color: colors.grey[500],\n    },\n    modifierBackgroundBlack: {\n      background: colors.common.black,\n    },\n    modifierBackgroundRed: {\n      background: colors.red[500],\n    },\n    modifierBackgroundGreen: {\n      background: colors.green[500],\n    },\n    modifierBackgroundYellow: {\n      background: colors.yellow[500],\n    },\n    modifierBackgroundBlue: {\n      background: colors.blue[500],\n    },\n    modifierBackgroundMagenta: {\n      background: colors.purple[500],\n    },\n    modifierBackgroundCyan: {\n      background: colors.cyan[500],\n    },\n    modifierBackgroundWhite: {\n      background: colors.common.white,\n    },\n    modifierBackgroundGrey: {\n      background: colors.grey[500],\n    },\n    textWrap: {\n      whiteSpace: 'pre-wrap',\n      wordBreak: 'break-all',\n    },\n  }),\n  { name: 'BackstageLogViewer' },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.esm.js","sources":["../../../src/components/LogViewer/styles.ts"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { alpha, makeStyles } from '@material-ui/core/styles';\nimport * as colors from '@material-ui/core/colors';\n\nexport const HEADER_SIZE = 40;\n\n/** @public Class keys for overriding LogViewer styles */\nexport type LogViewerClassKey =\n  | 'root'\n  | 'header'\n  | 'log'\n  | 'line'\n  | 'lineSelected'\n  | 'lineCopyButton'\n  | 'lineNumber'\n  | 'textHighlight'\n  | 'textSelectedHighlight'\n  | 'modifierBold'\n  | 'modifierItalic'\n  | 'modifierUnderline'\n  | 'modifierForegroundBlack'\n  | 'modifierForegroundRed'\n  | 'modifierForegroundGreen'\n  | 'modifierForegroundYellow'\n  | 'modifierForegroundBlue'\n  | 'modifierForegroundMagenta'\n  | 'modifierForegroundCyan'\n  | 'modifierForegroundWhite'\n  | 'modifierForegroundGrey'\n  | 'modifierBackgroundBlack'\n  | 'modifierBackgroundRed'\n  | 'modifierBackgroundGreen'\n  | 'modifierBackgroundYellow'\n  | 'modifierBackgroundBlue'\n  | 'modifierBackgroundMagenta'\n  | 'modifierBackgroundCyan'\n  | 'modifierBackgroundWhite'\n  | 'modifierBackgroundGrey';\n\nexport const useStyles = makeStyles(\n  theme => ({\n    root: {\n      background: theme.palette.background.paper,\n    },\n    header: {\n      height: HEADER_SIZE,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n    },\n    log: {\n      fontFamily: '\"Monaco\", monospace',\n      fontSize: theme.typography.pxToRem(12),\n      lineHeight: '20px',\n    },\n    line: {\n      position: 'relative',\n      whiteSpace: 'pre',\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      '&:hover': {\n        background: theme.palette.action.hover,\n      },\n    },\n    lineSelected: {\n      background: theme.palette.action.selected,\n\n      '&:hover': {\n        background: theme.palette.action.selected,\n      },\n    },\n    lineCopyButton: {\n      position: 'absolute',\n      paddingTop: 0,\n      paddingBottom: 0,\n      '&:hover': {\n        color: theme.palette.linkHover,\n      },\n    },\n    lineNumber: {\n      display: 'inline-block',\n      textAlign: 'end',\n      width: 60,\n      paddingRight: theme.spacing(1),\n      marginRight: theme.spacing(1),\n      cursor: 'pointer',\n      flexShrink: 0,\n      color: colors.blue[300],\n      borderRight: `1px solid ${colors.blue[700]}`,\n    },\n    textHighlight: {\n      background: alpha(theme.palette.info.main, 0.15),\n    },\n    textSelectedHighlight: {\n      background: alpha(theme.palette.info.main, 0.4),\n    },\n    modifierBold: {\n      fontWeight: theme.typography.fontWeightBold,\n    },\n    modifierItalic: {\n      fontStyle: 'italic',\n    },\n    modifierUnderline: {\n      textDecoration: 'underline',\n    },\n    modifierForegroundBlack: {\n      color: colors.common.black,\n    },\n    modifierForegroundRed: {\n      color: colors.red[500],\n    },\n    modifierForegroundGreen: {\n      color: colors.green[500],\n    },\n    modifierForegroundYellow: {\n      color: colors.yellow[500],\n    },\n    modifierForegroundBlue: {\n      color: colors.blue[500],\n    },\n    modifierForegroundMagenta: {\n      color: colors.purple[500],\n    },\n    modifierForegroundCyan: {\n      color: colors.cyan[500],\n    },\n    modifierForegroundWhite: {\n      color: colors.common.white,\n    },\n    modifierForegroundGrey: {\n      color: colors.grey[500],\n    },\n    modifierBackgroundBlack: {\n      background: colors.common.black,\n    },\n    modifierBackgroundRed: {\n      background: colors.red[500],\n    },\n    modifierBackgroundGreen: {\n      background: colors.green[500],\n    },\n    modifierBackgroundYellow: {\n      background: colors.yellow[500],\n    },\n    modifierBackgroundBlue: {\n      background: colors.blue[500],\n    },\n    modifierBackgroundMagenta: {\n      background: colors.purple[500],\n    },\n    modifierBackgroundCyan: {\n      background: colors.cyan[500],\n    },\n    modifierBackgroundWhite: {\n      background: colors.common.white,\n    },\n    modifierBackgroundGrey: {\n      background: colors.grey[500],\n    },\n    textWrap: {\n      whiteSpace: 'pre-wrap',\n      wordBreak: 'break-all',\n    },\n  }),\n  { name: 'BackstageLogViewer' },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/LogViewer/useLogViewerSelection.esm.js

@@ -4,42 +4,162 @@ import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
 
 function useLogViewerSelection(lines) {
   const errorApi = useApi(errorApiRef);
-  const [sel, setSelection] = useState();
-  const start = sel ? Math.min(sel.start, sel.end) : void 0;
-  const end = sel ? Math.max(sel.start, sel.end) : void 0;
+  const [selections, setSelections] = useState([]);
   const [{ error }, copyToClipboard] = useCopyToClipboard();
   useEffect(() => {
     if (error) {
       errorApi.post(error);
     }
   }, [error, errorApi]);
+  const findClosestSelection = (allSelections, line) => {
+    if (selections.length === 0) {
+      return void 0;
+    }
+    let minDistance = Number.MAX_SAFE_INTEGER;
+    let closestSelection = void 0;
+    allSelections.forEach((s) => {
+      const distance = Math.min(
+        Math.abs(s.start - line),
+        Math.abs(s.end - line)
+      );
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestSelection = s;
+      }
+    });
+    return closestSelection;
+  };
+  const mergeNeighbouringSelections = (allSelections, line) => {
+    const neighboringSelections = allSelections.filter(
+      (s) => s.start - 1 === line || s.end + 1 === line
+    );
+    if (neighboringSelections.length === 0) {
+      return allSelections;
+    }
+    const newSelection = {
+      start: Math.min(line, ...neighboringSelections.map((s) => s.start)),
+      end: Math.max(line, ...neighboringSelections.map((s) => s.end))
+    };
+    return [
+      ...allSelections.filter(
+        (s) => !neighboringSelections.includes(s) && !(s.start === line && s.end === line)
+      ),
+      newSelection
+    ];
+  };
   return {
-    shouldShowButton(line) {
-      return start === line || end === line;
+    shouldShowCopyButton(line) {
+      return selections.some((s) => s.start === line);
     },
     isSelected(line) {
-      if (!sel) {
+      if (!selections) {
         return false;
       }
-      return start <= line && line <= end;
+      return selections.some(
+        (s) => s.start <= line && (s.end ?? s.start) >= line
+      );
     },
-    setSelection(line, add) {
-      if (add) {
-        setSelection(
-          (s) => s ? { start: s.start, end: line } : { start: line, end: line }
+    setSelection(line, addRange, addNewSelection) {
+      setSelections((currentSelections) => {
+        const clickedSelection = currentSelections.find(
+          (s) => s.start <= line && s.end >= line
         );
-      } else {
-        setSelection(
-          (s) => s?.start === line && s?.end === line ? void 0 : { start: line, end: line }
+        const otherSelections = currentSelections.filter(
+          (s) => s !== clickedSelection
         );
+        if (!addRange && !addNewSelection) {
+          if (!clickedSelection || clickedSelection.start !== clickedSelection.end) {
+            return [{ start: line, end: line }];
+          }
+          return [];
+        }
+        if (addRange) {
+          if (currentSelections.length === 0) {
+            return [{ start: line, end: line }];
+          }
+          if (clickedSelection) {
+            if (clickedSelection.start === clickedSelection.end) {
+              return otherSelections;
+            }
+            return [
+              ...otherSelections,
+              { start: clickedSelection.start, end: line }
+            ];
+          }
+          const closestSelection = findClosestSelection(
+            currentSelections,
+            line
+          );
+          if (!closestSelection) {
+            return currentSelections;
+          }
+          if (closestSelection.start < line) {
+            return mergeNeighbouringSelections(
+              [
+                ...otherSelections.filter((s) => s !== closestSelection),
+                { start: closestSelection.start, end: line }
+              ],
+              line
+            );
+          }
+          return mergeNeighbouringSelections(
+            [
+              ...otherSelections.filter((s) => s !== closestSelection),
+              { start: line, end: closestSelection.end }
+            ],
+            line
+          );
+        }
+        if (addNewSelection) {
+          if (!clickedSelection) {
+            return mergeNeighbouringSelections(
+              [...currentSelections, { start: line, end: line }],
+              line
+            );
+          }
+          if (clickedSelection.start === clickedSelection.end) {
+            return otherSelections;
+          }
+          return [
+            ...otherSelections,
+            ...clickedSelection.start < line ? [{ start: clickedSelection.start, end: line - 1 }] : [],
+            ...clickedSelection.end > line ? [{ start: line + 1, end: clickedSelection.end }] : []
+          ];
+        }
+        return [];
+      });
+    },
+    copySelection(line) {
+      const selection = selections.find((s) => s.start === line);
+      if (!selection) {
+        return;
+      }
+      const copyText = lines.slice(selection.start - 1, selection.end).map((l) => l.chunks.map((c) => c.text).join("")).join("\n");
+      copyToClipboard(copyText);
+    },
+    getHash() {
+      if (selections.length === 0) {
+        return "";
       }
+      const parts = selections.map((s) => {
+        if (s.start === s.end) {
+          return `${s.start}`;
+        }
+        return `${s.start}-${s.end}`;
+      });
+      return `#lines-${parts.join(",")}`;
     },
-    copySelection() {
-      if (sel) {
-        const copyText = lines.slice(Math.min(sel.start, sel.end) - 1, Math.max(sel.start, sel.end)).map((l) => l.chunks.map((c) => c.text).join("")).join("\n");
-        copyToClipboard(copyText);
-        setSelection(void 0);
+    selectAll(hash) {
+      const match = hash.match(/#lines-([\d,-]+)/);
+      const s = [];
+      if (match) {
+        const ranges = match[1].split(",");
+        ranges.forEach((r) => {
+          const [start, end] = r.split("-").map(Number);
+          s.push({ start, end: end ?? start });
+        });
       }
+      setSelections(s);
     }
   };
 }

package/dist/components/LogViewer/useLogViewerSelection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLogViewerSelection.esm.js","sources":["../../../src/components/LogViewer/useLogViewerSelection.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEffect, useState } from 'react';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport { AnsiLine } from './AnsiProcessor';\n\nexport function useLogViewerSelection(lines: AnsiLine[]) {\n  const errorApi = useApi(errorApiRef);\n  const [sel, setSelection] = useState<{ start: number; end: number }>();\n  const start = sel ? Math.min(sel.start, sel.end) : undefined;\n  const end = sel ? Math.max(sel.start, sel.end) : undefined;\n\n  const [{ error }, copyToClipboard] = useCopyToClipboard();\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [error, errorApi]);\n\n  return {\n    shouldShowButton(line: number) {\n      return start === line || end === line;\n    },\n    isSelected(line: number) {\n      if (!sel) {\n        return false;\n      }\n      return start! <= line && line <= end!;\n    },\n    setSelection(line: number, add: boolean) {\n      if (add) {\n        setSelection(s =>\n          s ? { start: s.start, end: line } : { start: line, end: line },\n        );\n      } else {\n        setSelection(s =>\n          s?.start === line && s?.end === line\n            ? undefined\n            : { start: line, end: line },\n        );\n      }\n    },\n    copySelection() {\n      if (sel) {\n        const copyText = lines\n          .slice(Math.min(sel.start, sel.end) - 1, Math.max(sel.start, sel.end))\n          .map(l => l.chunks.map(c => c.text).join(''))\n          .join('\\n');\n        copyToClipboard(copyText);\n        setSelection(undefined);\n      }\n    },\n  };\n}\n"],"names":[],"mappings":";;;;AAqBO,SAAS,sBAAsB,KAAA,EAAmB;AACvD,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,GAAA,EAAK,YAAY,CAAA,GAAI,QAAA,EAAyC;AACrE,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,CAAK,GAAA,CAAI,IAAI,KAAA,EAAO,GAAA,CAAI,GAAG,CAAA,GAAI,MAAA;AACnD,EAAA,MAAM,GAAA,GAAM,MAAM,IAAA,CAAK,GAAA,CAAI,IAAI,KAAA,EAAO,GAAA,CAAI,GAAG,CAAA,GAAI,MAAA;AAEjD,EAAA,MAAM,CAAC,EAAE,KAAA,EAAM,EAAG,eAAe,IAAI,kBAAA,EAAmB;AAExD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAAA,IACrB;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEpB,EAAA,OAAO;AAAA,IACL,iBAAiB,IAAA,EAAc;AAC7B,MAAA,OAAO,KAAA,KAAU,QAAQ,GAAA,KAAQ,IAAA;AAAA,IACnC,CAAA;AAAA,IACA,WAAW,IAAA,EAAc;AACvB,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,OAAO,KAAA;AAAA,MACT;AACA,MAAA,OAAO,KAAA,IAAU,QAAQ,IAAA,IAAQ,GAAA;AAAA,IACnC,CAAA;AAAA,IACA,YAAA,CAAa,MAAc,GAAA,EAAc;AACvC,MAAA,IAAI,GAAA,EAAK;AACP,QAAA,YAAA;AAAA,UAAa,CAAA,CAAA,KACX,CAAA,GAAI,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAO,GAAA,EAAK,IAAA,EAAK,GAAI,EAAE,KAAA,EAAO,IAAA,EAAM,KAAK,IAAA;AAAK,SAC/D;AAAA,MACF,CAAA,MAAO;AACL,QAAA,YAAA;AAAA,UAAa,CAAA,CAAA,KACX,CAAA,EAAG,KAAA,KAAU,IAAA,IAAQ,CAAA,EAAG,GAAA,KAAQ,IAAA,GAC5B,MAAA,GACA,EAAE,KAAA,EAAO,IAAA,EAAM,GAAA,EAAK,IAAA;AAAK,SAC/B;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,aAAA,GAAgB;AACd,MAAA,IAAI,GAAA,EAAK;AACP,QAAA,MAAM,QAAA,GAAW,KAAA,CACd,KAAA,CAAM,IAAA,CAAK,IAAI,GAAA,CAAI,KAAA,EAAO,GAAA,CAAI,GAAG,CAAA,GAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,IAAI,KAAA,EAAO,GAAA,CAAI,GAAG,CAAC,CAAA,CACpE,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,GAAA,CAAI,CAAA,CAAA,KAAK,CAAA,CAAE,IAAI,EAAE,IAAA,CAAK,EAAE,CAAC,CAAA,CAC3C,KAAK,IAAI,CAAA;AACZ,QAAA,eAAA,CAAgB,QAAQ,CAAA;AACxB,QAAA,YAAA,CAAa,MAAS,CAAA;AAAA,MACxB;AAAA,IACF;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useLogViewerSelection.esm.js","sources":["../../../src/components/LogViewer/useLogViewerSelection.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useEffect, useState } from 'react';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport { AnsiLine } from './AnsiProcessor';\n\ntype Selection = {\n  start: number;\n  end: number;\n};\n\nexport function useLogViewerSelection(lines: AnsiLine[]) {\n  const errorApi = useApi(errorApiRef);\n  const [selections, setSelections] = useState<Selection[]>([]);\n\n  const [{ error }, copyToClipboard] = useCopyToClipboard();\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [error, errorApi]);\n\n  const findClosestSelection = (\n    allSelections: Selection[],\n    line: number,\n  ): Selection | undefined => {\n    if (selections.length === 0) {\n      return undefined;\n    }\n    let minDistance = Number.MAX_SAFE_INTEGER;\n    let closestSelection: Selection | undefined = undefined;\n\n    allSelections.forEach(s => {\n      const distance = Math.min(\n        Math.abs(s.start - line),\n        Math.abs(s.end - line),\n      );\n      if (distance < minDistance) {\n        minDistance = distance;\n        closestSelection = s;\n      }\n    });\n\n    return closestSelection;\n  };\n\n  const mergeNeighbouringSelections = (\n    allSelections: Selection[],\n    line: number,\n  ): Selection[] => {\n    // Merge selections if they're next to each other\n    const neighboringSelections = allSelections.filter(\n      s => s.start - 1 === line || s.end + 1 === line,\n    );\n    if (neighboringSelections.length === 0) {\n      return allSelections;\n    }\n    const newSelection = {\n      start: Math.min(line, ...neighboringSelections.map(s => s.start)),\n      end: Math.max(line, ...neighboringSelections.map(s => s.end)),\n    };\n\n    return [\n      ...allSelections.filter(\n        s =>\n          !neighboringSelections.includes(s) &&\n          !(s.start === line && s.end === line),\n      ),\n      newSelection,\n    ];\n  };\n\n  return {\n    shouldShowCopyButton(line: number) {\n      // show copy button at the beginning of each selection\n      return selections.some(s => s.start === line);\n    },\n    isSelected(line: number) {\n      if (!selections) {\n        return false;\n      }\n      // check if line is in any selection range\n      return selections.some(\n        s => s.start <= line && (s.end ?? s.start) >= line,\n      );\n    },\n    setSelection(line: number, addRange: boolean, addNewSelection: boolean) {\n      setSelections(currentSelections => {\n        const clickedSelection = currentSelections.find(\n          s => s.start <= line && s.end >= line,\n        );\n        const otherSelections = currentSelections.filter(\n          s => s !== clickedSelection,\n        );\n\n        if (!addRange && !addNewSelection) {\n          // Normal click -> select only this line if nothing or multiple lines are selected\n          if (\n            !clickedSelection ||\n            clickedSelection.start !== clickedSelection.end\n          ) {\n            return [{ start: line, end: line }];\n          }\n          // Clear selection if single line is selected\n          return [];\n        }\n\n        if (addRange) {\n          // Shift+click -> extend/reduce selection\n          if (currentSelections.length === 0) {\n            // No existing selection -> create new selection\n            return [{ start: line, end: line }];\n          }\n\n          if (clickedSelection) {\n            // Clicked inside an existing selection -> reduce selection\n            if (clickedSelection.start === clickedSelection.end) {\n              // Single line selection -> remove it\n              return otherSelections;\n            }\n            // Reduce selection\n            return [\n              ...otherSelections,\n              { start: clickedSelection.start, end: line },\n            ];\n          }\n\n          // Extend the closest selection to the new line\n          const closestSelection = findClosestSelection(\n            currentSelections,\n            line,\n          );\n          if (!closestSelection) {\n            // Can't actually happen\n            return currentSelections;\n          }\n          if (closestSelection.start < line) {\n            // Add lines before the selection\n            return mergeNeighbouringSelections(\n              [\n                ...otherSelections.filter(s => s !== closestSelection),\n                { start: closestSelection.start, end: line },\n              ],\n              line,\n            );\n          }\n          // Add lines after the selection\n          return mergeNeighbouringSelections(\n            [\n              ...otherSelections.filter(s => s !== closestSelection),\n              { start: line, end: closestSelection!.end },\n            ],\n            line,\n          );\n        }\n\n        if (addNewSelection) {\n          // Ctrl/Cmd+click -> add new selection\n          if (!clickedSelection) {\n            // Just add new selection\n            return mergeNeighbouringSelections(\n              [...currentSelections, { start: line, end: line }],\n              line,\n            );\n          }\n          if (clickedSelection.start === clickedSelection.end) {\n            // Single line selection -> remove it\n            return otherSelections;\n          }\n          // Multi line selection -> split it\n          return [\n            ...otherSelections,\n            ...(clickedSelection.start < line\n              ? [{ start: clickedSelection.start, end: line - 1 }]\n              : []),\n            ...(clickedSelection.end > line\n              ? [{ start: line + 1, end: clickedSelection.end }]\n              : []),\n          ];\n        }\n\n        return [];\n      });\n    },\n    copySelection(line: number) {\n      const selection = selections.find(s => s.start === line);\n      if (!selection) {\n        return;\n      }\n      const copyText = lines\n        .slice(selection.start - 1, selection.end)\n        .map(l => l.chunks.map(c => c.text).join(''))\n        .join('\\n');\n      copyToClipboard(copyText);\n    },\n    getHash() {\n      if (selections.length === 0) {\n        return '';\n      }\n      const parts = selections.map(s => {\n        if (s.start === s.end) {\n          return `${s.start}`;\n        }\n        return `${s.start}-${s.end}`;\n      });\n      return `#lines-${parts.join(',')}`;\n    },\n    selectAll(hash: string) {\n      const match = hash.match(/#lines-([\\d,-]+)/);\n      const s: Selection[] = [];\n      if (match) {\n        const ranges = match[1].split(',');\n        ranges.forEach(r => {\n          const [start, end] = r.split('-').map(Number);\n          s.push({ start, end: end ?? start });\n        });\n      }\n      setSelections(s);\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/WarningPanel/WarningPanel.esm.js

@@ -59,6 +59,7 @@ const useStyles = makeStyles(
       fontWeight: theme.typography.fontWeightBold
     },
     markdownContent: {
+      wordBreak: "break-word",
       "& p": {
         display: "inline"
       }

package/dist/components/WarningPanel/WarningPanel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningPanel.esm.js","sources":["../../../src/components/WarningPanel/WarningPanel.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { makeStyles, darken, lighten, Theme } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport ErrorOutline from '@material-ui/icons/ErrorOutline';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { ReactNode } from 'react';\nimport { MarkdownContent } from '../MarkdownContent';\n\nconst getWarningTextColor = (\n  severity: NonNullable<WarningProps['severity']>,\n  theme: Theme,\n) => {\n  const getColor = theme.palette.type === 'light' ? darken : lighten;\n  return getColor(theme.palette[severity].light, 0.6);\n};\n\nconst getWarningBackgroundColor = (\n  severity: NonNullable<WarningProps['severity']>,\n  theme: Theme,\n) => {\n  const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;\n  return getBackgroundColor(theme.palette[severity].light, 0.9);\n};\n\nconst useErrorOutlineStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    fill: ({ severity }: WarningProps) =>\n      getWarningTextColor(\n        severity as NonNullable<WarningProps['severity']>,\n        theme,\n      ),\n  },\n}));\n\nconst ErrorOutlineStyled = ({ severity }: Pick<WarningProps, 'severity'>) => {\n  const classes = useErrorOutlineStyles({ severity });\n  return <ErrorOutline classes={classes} />;\n};\nconst ExpandMoreIconStyled = ({ severity }: Pick<WarningProps, 'severity'>) => {\n  const classes = useErrorOutlineStyles({ severity });\n  return <ExpandMoreIcon classes={classes} />;\n};\n\nexport type WarningPanelClassKey =\n  | 'panel'\n  | 'summary'\n  | 'summaryText'\n  | 'message'\n  | 'details';\n\nconst useStyles = makeStyles(\n  theme => ({\n    panel: {\n      backgroundColor: ({ severity }: WarningProps) =>\n        getWarningBackgroundColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      verticalAlign: 'middle',\n    },\n    summary: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    summaryText: {\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      fontWeight: theme.typography.fontWeightBold,\n    },\n    markdownContent: {\n      '& p': {\n        display: 'inline',\n      },\n    },\n    message: {\n      width: '100%',\n      display: 'block',\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      backgroundColor: ({ severity }: WarningProps) =>\n        getWarningBackgroundColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n    },\n    details: {\n      width: '100%',\n      display: 'block',\n      color: theme.palette.textContrast,\n      backgroundColor: theme.palette.background.default,\n      border: `1px solid ${theme.palette.border}`,\n      padding: theme.spacing(2.0),\n      fontFamily: 'sans-serif',\n    },\n  }),\n  { name: 'BackstageWarningPanel' },\n);\n\nexport type WarningProps = {\n  title?: string;\n  severity?: 'warning' | 'error' | 'info';\n  titleFormat?: string;\n  message?: ReactNode;\n  defaultExpanded?: boolean;\n  children?: ReactNode;\n};\n\nconst capitalize = (s: string) => {\n  return s.charAt(0).toLocaleUpperCase('en-US') + s.slice(1);\n};\n\n/**\n * Show a user friendly error message to a user similar to\n * ErrorPanel except that the warning panel only shows the warning message to\n * the user.\n *\n * @param severity - Ability to change the severity of the alert. Default value\n *        \"warning\"\n * @param title - A title for the warning. If not supplied, \"Warning\" will be\n *        used.\n * @param message - Optional more detailed user-friendly message elaborating on\n *        the cause of the error.\n * @param children - Objects to provide context, such as a stack trace or detailed\n *        error reporting. Will be available inside an unfolded accordion.\n */\nexport function WarningPanel(props: WarningProps) {\n  const {\n    severity = 'warning',\n    title,\n    titleFormat,\n    message,\n    children,\n    defaultExpanded,\n  } = props;\n  const classes = useStyles({ severity });\n\n  // If no severity or title provided, the heading will read simply \"Warning\"\n  const subTitle = capitalize(severity) + (title ? `: ${title}` : '');\n\n  return (\n    <Accordion\n      defaultExpanded={defaultExpanded ?? false}\n      className={classes.panel}\n      role=\"alert\"\n    >\n      <AccordionSummary\n        expandIcon={<ExpandMoreIconStyled severity={severity} />}\n        className={classes.summary}\n      >\n        <ErrorOutlineStyled severity={severity} />\n        <Typography className={classes.summaryText} variant=\"subtitle1\">\n          {titleFormat === 'markdown' ? (\n            <MarkdownContent\n              content={subTitle}\n              className={classes.markdownContent}\n            />\n          ) : (\n            subTitle\n          )}\n        </Typography>\n      </AccordionSummary>\n      {(message || children) && (\n        <AccordionDetails>\n          <Grid container>\n            {message && (\n              <Grid item xs={12}>\n                <Typography className={classes.message} variant=\"body1\">\n                  {message}\n                </Typography>\n              </Grid>\n            )}\n            {children && (\n              <Grid item xs={12} className={classes.details}>\n                {children}\n              </Grid>\n            )}\n          </Grid>\n        </AccordionDetails>\n      )}\n    </Accordion>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"WarningPanel.esm.js","sources":["../../../src/components/WarningPanel/WarningPanel.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { makeStyles, darken, lighten, Theme } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport ErrorOutline from '@material-ui/icons/ErrorOutline';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { ReactNode } from 'react';\nimport { MarkdownContent } from '../MarkdownContent';\n\nconst getWarningTextColor = (\n  severity: NonNullable<WarningProps['severity']>,\n  theme: Theme,\n) => {\n  const getColor = theme.palette.type === 'light' ? darken : lighten;\n  return getColor(theme.palette[severity].light, 0.6);\n};\n\nconst getWarningBackgroundColor = (\n  severity: NonNullable<WarningProps['severity']>,\n  theme: Theme,\n) => {\n  const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;\n  return getBackgroundColor(theme.palette[severity].light, 0.9);\n};\n\nconst useErrorOutlineStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    fill: ({ severity }: WarningProps) =>\n      getWarningTextColor(\n        severity as NonNullable<WarningProps['severity']>,\n        theme,\n      ),\n  },\n}));\n\nconst ErrorOutlineStyled = ({ severity }: Pick<WarningProps, 'severity'>) => {\n  const classes = useErrorOutlineStyles({ severity });\n  return <ErrorOutline classes={classes} />;\n};\nconst ExpandMoreIconStyled = ({ severity }: Pick<WarningProps, 'severity'>) => {\n  const classes = useErrorOutlineStyles({ severity });\n  return <ExpandMoreIcon classes={classes} />;\n};\n\nexport type WarningPanelClassKey =\n  | 'panel'\n  | 'summary'\n  | 'summaryText'\n  | 'message'\n  | 'details';\n\nconst useStyles = makeStyles(\n  theme => ({\n    panel: {\n      backgroundColor: ({ severity }: WarningProps) =>\n        getWarningBackgroundColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      verticalAlign: 'middle',\n    },\n    summary: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    summaryText: {\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      fontWeight: theme.typography.fontWeightBold,\n    },\n    markdownContent: {\n      wordBreak: 'break-word',\n      '& p': {\n        display: 'inline',\n      },\n    },\n    message: {\n      width: '100%',\n      display: 'block',\n      color: ({ severity }: WarningProps) =>\n        getWarningTextColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n      backgroundColor: ({ severity }: WarningProps) =>\n        getWarningBackgroundColor(\n          severity as NonNullable<WarningProps['severity']>,\n          theme,\n        ),\n    },\n    details: {\n      width: '100%',\n      display: 'block',\n      color: theme.palette.textContrast,\n      backgroundColor: theme.palette.background.default,\n      border: `1px solid ${theme.palette.border}`,\n      padding: theme.spacing(2.0),\n      fontFamily: 'sans-serif',\n    },\n  }),\n  { name: 'BackstageWarningPanel' },\n);\n\nexport type WarningProps = {\n  title?: string;\n  severity?: 'warning' | 'error' | 'info';\n  titleFormat?: string;\n  message?: ReactNode;\n  defaultExpanded?: boolean;\n  children?: ReactNode;\n};\n\nconst capitalize = (s: string) => {\n  return s.charAt(0).toLocaleUpperCase('en-US') + s.slice(1);\n};\n\n/**\n * Show a user friendly error message to a user similar to\n * ErrorPanel except that the warning panel only shows the warning message to\n * the user.\n *\n * @param severity - Ability to change the severity of the alert. Default value\n *        \"warning\"\n * @param title - A title for the warning. If not supplied, \"Warning\" will be\n *        used.\n * @param message - Optional more detailed user-friendly message elaborating on\n *        the cause of the error.\n * @param children - Objects to provide context, such as a stack trace or detailed\n *        error reporting. Will be available inside an unfolded accordion.\n */\nexport function WarningPanel(props: WarningProps) {\n  const {\n    severity = 'warning',\n    title,\n    titleFormat,\n    message,\n    children,\n    defaultExpanded,\n  } = props;\n  const classes = useStyles({ severity });\n\n  // If no severity or title provided, the heading will read simply \"Warning\"\n  const subTitle = capitalize(severity) + (title ? `: ${title}` : '');\n\n  return (\n    <Accordion\n      defaultExpanded={defaultExpanded ?? false}\n      className={classes.panel}\n      role=\"alert\"\n    >\n      <AccordionSummary\n        expandIcon={<ExpandMoreIconStyled severity={severity} />}\n        className={classes.summary}\n      >\n        <ErrorOutlineStyled severity={severity} />\n        <Typography className={classes.summaryText} variant=\"subtitle1\">\n          {titleFormat === 'markdown' ? (\n            <MarkdownContent\n              content={subTitle}\n              className={classes.markdownContent}\n            />\n          ) : (\n            subTitle\n          )}\n        </Typography>\n      </AccordionSummary>\n      {(message || children) && (\n        <AccordionDetails>\n          <Grid container>\n            {message && (\n              <Grid item xs={12}>\n                <Typography className={classes.message} variant=\"body1\">\n                  {message}\n                </Typography>\n              </Grid>\n            )}\n            {children && (\n              <Grid item xs={12} className={classes.details}>\n                {children}\n              </Grid>\n            )}\n          </Grid>\n        </AccordionDetails>\n      )}\n    </Accordion>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/translation.esm.js

@@ -104,6 +104,11 @@ const coreComponentsTranslationRef = createTranslationRef({
     },
     proxiedSignInPage: {
       title: "You do not appear to be signed in. Please try reloading the browser page."
+    },
+    logViewer: {
+      searchField: {
+        placeholder: "Search"
+      }
     }
   }
 });

package/dist/translation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const coreComponentsTranslationRef = createTranslationRef({\n  id: 'core-components',\n  messages: {\n    signIn: {\n      title: 'Sign In',\n      loginFailed: 'Login failed',\n      customProvider: {\n        title: 'Custom User',\n        subtitle:\n          'Enter your own User ID and credentials.\\n This selection will not be stored.',\n        userId: 'User ID',\n        tokenInvalid: 'Token is not a valid OpenID Connect JWT Token',\n        continue: 'Continue',\n        idToken: 'ID Token (optional)',\n      },\n      guestProvider: {\n        title: 'Guest',\n        subtitle:\n          'Enter as a Guest User.\\n You will not have a verified identity, meaning some features might be unavailable.',\n        enter: 'Enter',\n      },\n    },\n    skipToContent: 'Skip to content',\n    copyTextButton: {\n      tooltipText: 'Text copied to clipboard',\n    },\n    simpleStepper: {\n      reset: 'Reset',\n      finish: 'Finish',\n      next: 'Next',\n      skip: 'Skip',\n      back: 'Back',\n    },\n    errorPage: {\n      subtitle: 'ERROR {{status}}: {{statusMessage}}',\n      title: 'Looks like someone dropped the mic!',\n      goBack: 'Go back',\n      showMoreDetails: 'Show more details',\n      showLessDetails: 'Show less details',\n    },\n    emptyState: {\n      missingAnnotation: {\n        title: 'Missing Annotation',\n        actionTitle:\n          'Add the annotation to your component YAML as shown in the highlighted example below:',\n        readMore: 'Read more',\n      },\n    },\n    supportConfig: {\n      default: {\n        title: 'Support Not Configured',\n        linkTitle: 'Add `app.support` config key',\n      },\n    },\n    errorBoundary: {\n      title: 'Please contact {{slackChannel}} for help.',\n    },\n    oauthRequestDialog: {\n      title: 'Login Required',\n      authRedirectTitle: 'This will trigger a http redirect to OAuth Login.',\n      login: 'Log in',\n      rejectAll: 'Reject All',\n      message:\n        'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.',\n    },\n    supportButton: {\n      title: 'Support',\n      close: 'Close',\n    },\n    table: {\n      filter: {\n        title: 'Filters',\n        clearAll: 'Clear all',\n        placeholder: 'All results',\n      },\n      body: {\n        emptyDataSourceMessage: 'No records to display',\n      },\n      pagination: {\n        firstTooltip: 'First Page',\n        labelDisplayedRows: '{from}-{to} of {count}',\n        labelRowsSelect: 'rows',\n        lastTooltip: 'Last Page',\n        nextTooltip: 'Next Page',\n        previousTooltip: 'Previous Page',\n      },\n      toolbar: {\n        search: 'Filter',\n      },\n      header: {\n        actions: 'Actions',\n      },\n    },\n    alertDisplay: {\n      message_one: '({{ count }} newer message)',\n      message_other: '({{ count }} newer messages)',\n    },\n    autoLogout: {\n      stillTherePrompt: {\n        title: 'Logging out due to inactivity',\n        buttonText: \"Yes! Don't log me out\",\n      },\n    },\n    dependencyGraph: {\n      fullscreenTooltip: 'Toggle fullscreen',\n    },\n    proxiedSignInPage: {\n      title:\n        'You do not appear to be signed in. Please try reloading the browser page.',\n    },\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const coreComponentsTranslationRef = createTranslationRef({\n  id: 'core-components',\n  messages: {\n    signIn: {\n      title: 'Sign In',\n      loginFailed: 'Login failed',\n      customProvider: {\n        title: 'Custom User',\n        subtitle:\n          'Enter your own User ID and credentials.\\n This selection will not be stored.',\n        userId: 'User ID',\n        tokenInvalid: 'Token is not a valid OpenID Connect JWT Token',\n        continue: 'Continue',\n        idToken: 'ID Token (optional)',\n      },\n      guestProvider: {\n        title: 'Guest',\n        subtitle:\n          'Enter as a Guest User.\\n You will not have a verified identity, meaning some features might be unavailable.',\n        enter: 'Enter',\n      },\n    },\n    skipToContent: 'Skip to content',\n    copyTextButton: {\n      tooltipText: 'Text copied to clipboard',\n    },\n    simpleStepper: {\n      reset: 'Reset',\n      finish: 'Finish',\n      next: 'Next',\n      skip: 'Skip',\n      back: 'Back',\n    },\n    errorPage: {\n      subtitle: 'ERROR {{status}}: {{statusMessage}}',\n      title: 'Looks like someone dropped the mic!',\n      goBack: 'Go back',\n      showMoreDetails: 'Show more details',\n      showLessDetails: 'Show less details',\n    },\n    emptyState: {\n      missingAnnotation: {\n        title: 'Missing Annotation',\n        actionTitle:\n          'Add the annotation to your component YAML as shown in the highlighted example below:',\n        readMore: 'Read more',\n      },\n    },\n    supportConfig: {\n      default: {\n        title: 'Support Not Configured',\n        linkTitle: 'Add `app.support` config key',\n      },\n    },\n    errorBoundary: {\n      title: 'Please contact {{slackChannel}} for help.',\n    },\n    oauthRequestDialog: {\n      title: 'Login Required',\n      authRedirectTitle: 'This will trigger a http redirect to OAuth Login.',\n      login: 'Log in',\n      rejectAll: 'Reject All',\n      message:\n        'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.',\n    },\n    supportButton: {\n      title: 'Support',\n      close: 'Close',\n    },\n    table: {\n      filter: {\n        title: 'Filters',\n        clearAll: 'Clear all',\n        placeholder: 'All results',\n      },\n      body: {\n        emptyDataSourceMessage: 'No records to display',\n      },\n      pagination: {\n        firstTooltip: 'First Page',\n        labelDisplayedRows: '{from}-{to} of {count}',\n        labelRowsSelect: 'rows',\n        lastTooltip: 'Last Page',\n        nextTooltip: 'Next Page',\n        previousTooltip: 'Previous Page',\n      },\n      toolbar: {\n        search: 'Filter',\n      },\n      header: {\n        actions: 'Actions',\n      },\n    },\n    alertDisplay: {\n      message_one: '({{ count }} newer message)',\n      message_other: '({{ count }} newer messages)',\n    },\n    autoLogout: {\n      stillTherePrompt: {\n        title: 'Logging out due to inactivity',\n        buttonText: \"Yes! Don't log me out\",\n      },\n    },\n    dependencyGraph: {\n      fullscreenTooltip: 'Toggle fullscreen',\n    },\n    proxiedSignInPage: {\n      title:\n        'You do not appear to be signed in. Please try reloading the browser page.',\n    },\n    logViewer: {\n      searchField: {\n        placeholder: 'Search',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/core-components",
-  "version": "0.18.3",
+  "version": "0.18.4-next.1",
   "description": "Core components used by Backstage plugins and apps",
   "backstage": {
     "role": "web-library"
@@ -66,11 +66,11 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/config": "^1.3.6",
-    "@backstage/core-plugin-api": "^1.12.0",
-    "@backstage/errors": "^1.2.7",
-    "@backstage/theme": "^0.7.0",
-    "@backstage/version-bridge": "^1.0.11",
+    "@backstage/config": "1.3.6",
+    "@backstage/core-plugin-api": "1.12.1-next.0",
+    "@backstage/errors": "1.2.7",
+    "@backstage/theme": "0.7.1-next.0",
+    "@backstage/version-bridge": "1.0.11",
     "@dagrejs/dagre": "^1.1.4",
     "@date-io/core": "^1.3.13",
     "@material-table/core": "^3.1.0",
@@ -107,10 +107,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@backstage/app-defaults": "^1.7.2",
-    "@backstage/cli": "^0.34.5",
-    "@backstage/core-app-api": "^1.19.2",
-    "@backstage/test-utils": "^1.7.13",
+    "@backstage/app-defaults": "1.7.3-next.0",
+    "@backstage/cli": "0.34.6-next.1",
+    "@backstage/core-app-api": "1.19.3-next.0",
+    "@backstage/test-utils": "1.7.14-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/user-event": "^14.0.0",