@backstage/core-components 0.8.8 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @backstage/core-components
 
+## 0.9.0
+
+### Minor Changes
+
+- af5eaa87f4: **BREAKING**: Removed deprecated `auth0AuthApiRef`, `oauth2ApiRef`, `samlAuthApiRef` and `oidcAuthApiRef` as these APIs are too generic to be useful. Instructions for how to migrate can be found at [https://backstage.io/docs/api/deprecations#generic-auth-api-refs](https://backstage.io/docs/api/deprecations#generic-auth-api-refs).
+
+### Patch Changes
+
+- 64b430f80d: chore(deps): bump `react-text-truncate` from 0.17.0 to 0.18.0
+- bb2bb36651: Updated usage of `StorageApi` to use `snapshot` method instead of `get`
+- 689840dcbe: Added ability for SidebarSubmenuItem to handle external links correctly via the "to" prop
+- Updated dependencies
+  - @backstage/core-plugin-api@0.8.0
+
+## 0.8.10
+
+### Patch Changes
+
+- d91d22bb19: When clicking on a log line the URL will be updated from `/task/uid` to
+  `/task/uid/#line-1`. This URL are also sharable, meaning that the UI will
+  highlight the log line in the hash of the URL.
+- Updated dependencies
+  - @backstage/core-plugin-api@0.7.0
+
+## 0.8.9
+
+### Patch Changes
+
+- 1ed305728b: Bump `node-fetch` to version 2.6.7 and `cross-fetch` to version 3.1.5
+- c77c5c7eb6: Added `backstage.role` to `package.json`
+- 126074a04b: Port supported react-use functions to react-hookz.
+- Updated dependencies
+  - @backstage/core-plugin-api@0.6.1
+  - @backstage/errors@0.2.1
+  - @backstage/config@0.1.14
+  - @backstage/theme@0.2.15
+
 ## 0.8.8
 
 ### Patch Changes

package/dist/esm/{RealLogViewer-e0ae55bd.esm.js → RealLogViewer-551c2f4d.esm.js}

@@ -1,4 +1,5 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
 import IconButton from '@material-ui/core/IconButton';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -13,7 +14,7 @@ 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 useToggle from 'react-use/lib/useToggle';
+import { useToggle } from '@react-hookz/web';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 
@@ -496,13 +497,19 @@ function RealLogViewer(props) {
   const lines = processor.process(props.text);
   const search = useLogViewerSearch(lines);
   const selection = useLogViewerSelection(lines);
+  const location = useLocation();
   useEffect(() => {
     if (search.resultLine !== void 0 && listRef.current) {
       listRef.current.scrollToItem(search.resultLine - 1, "center");
     }
   }, [search.resultLine]);
+  useEffect(() => {
+    if (location.hash) {
+      const line = parseInt(location.hash.replace(/\D/g, ""), 10);
+      selection.setSelection(line, false);
+    }
+  }, []);
   const handleSelectLine = (line, event) => {
-    event.preventDefault();
     selection.setSelection(line, event.shiftKey);
   };
   return /* @__PURE__ */ React.createElement(AutoSizer, null, ({ height, width }) => /* @__PURE__ */ React.createElement("div", {
@@ -552,4 +559,4 @@ function RealLogViewer(props) {
 }
 
 export { RealLogViewer };
-//# sourceMappingURL=RealLogViewer-e0ae55bd.esm.js.map
+//# sourceMappingURL=RealLogViewer-551c2f4d.esm.js.map

package/dist/esm/RealLogViewer-551c2f4d.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealLogViewer-551c2f4d.esm.js","sources":["../../src/components/LogViewer/AnsiProcessor.ts","../../src/components/LogViewer/styles.ts","../../src/components/LogViewer/LogLine.tsx","../../src/components/LogViewer/LogViewerControls.tsx","../../src/components/LogViewer/useLogViewerSearch.tsx","../../src/components/LogViewer/useLogViewerSelection.tsx","../../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 ansiRegexMaker from 'ansi-regex';\n\nconst ansiRegex = ansiRegexMaker();\nconst newlineRegex = /\\n\\r?/g;\n\n// A mapping of how each escape code changes the modifiers\nconst codeModifiers = Object.fromEntries(\n  Object.entries({\n    1: m => ({ ...m, bold: true }),\n    3: m => ({ ...m, italic: true }),\n    4: m => ({ ...m, underline: true }),\n    22: ({ bold: _, ...m }) => m,\n    23: ({ italic: _, ...m }) => m,\n    24: ({ underline: _, ...m }) => m,\n    30: m => ({ ...m, foreground: 'black' }),\n    31: m => ({ ...m, foreground: 'red' }),\n    32: m => ({ ...m, foreground: 'green' }),\n    33: m => ({ ...m, foreground: 'yellow' }),\n    34: m => ({ ...m, foreground: 'blue' }),\n    35: m => ({ ...m, foreground: 'magenta' }),\n    36: m => ({ ...m, foreground: 'cyan' }),\n    37: m => ({ ...m, foreground: 'white' }),\n    39: ({ foreground: _, ...m }) => m,\n    90: m => ({ ...m, foreground: 'grey' }),\n    40: m => ({ ...m, background: 'black' }),\n    41: m => ({ ...m, background: 'red' }),\n    42: m => ({ ...m, background: 'green' }),\n    43: m => ({ ...m, background: 'yellow' }),\n    44: m => ({ ...m, background: 'blue' }),\n    45: m => ({ ...m, background: 'magenta' }),\n    46: m => ({ ...m, background: 'cyan' }),\n    47: m => ({ ...m, background: 'white' }),\n    49: ({ background: _, ...m }) => m,\n  } as Record<string, (m: ChunkModifiers) => ChunkModifiers>).map(\n    ([code, modifier]) => [`\\x1b[${code}m`, modifier],\n  ),\n);\n\nexport type AnsiColor =\n  | 'black'\n  | 'red'\n  | 'green'\n  | 'yellow'\n  | 'blue'\n  | 'magenta'\n  | 'cyan'\n  | 'white'\n  | 'grey';\n\nexport interface ChunkModifiers {\n  foreground?: AnsiColor;\n  background?: AnsiColor;\n  bold?: boolean;\n  italic?: boolean;\n  underline?: boolean;\n}\n\nexport interface AnsiChunk {\n  text: string;\n  modifiers: ChunkModifiers;\n}\n\nexport class AnsiLine {\n  text: string;\n\n  constructor(\n    readonly lineNumber: number = 1,\n    readonly chunks: AnsiChunk[] = [],\n  ) {\n    this.text = chunks\n      .map(c => c.text)\n      .join('')\n      .toLocaleLowerCase('en-US');\n  }\n\n  lastChunk(): AnsiChunk | undefined {\n    return this.chunks[this.chunks.length - 1];\n  }\n\n  replaceLastChunk(newChunks?: AnsiChunk[]) {\n    if (newChunks) {\n      this.chunks.splice(this.chunks.length - 1, 1, ...newChunks);\n      this.text = this.chunks\n        .map(c => c.text)\n        .join('')\n        .toLocaleLowerCase('en-US');\n    }\n  }\n}\n\nexport class AnsiProcessor {\n  private text: string = '';\n  private lines: AnsiLine[] = [];\n\n  /**\n   * Processes a chunk of text while keeping internal state that optimizes\n   * subsequent processing that appends to the text.\n   */\n  process(text: string): AnsiLine[] {\n    if (this.text === text) {\n      return this.lines;\n    }\n\n    if (text.startsWith(this.text)) {\n      const lastLineIndex = this.lines.length > 0 ? this.lines.length - 1 : 0;\n      const lastLine = this.lines[lastLineIndex] ?? new AnsiLine();\n      const lastChunk = lastLine.lastChunk();\n\n      const newLines = this.processLines(\n        (lastChunk?.text ?? '') + text.slice(this.text.length),\n        lastChunk?.modifiers,\n        lastLine?.lineNumber,\n      );\n      lastLine.replaceLastChunk(newLines[0]?.chunks);\n\n      this.lines[lastLineIndex] = lastLine;\n      this.lines.push(...newLines.slice(1));\n    } else {\n      this.lines = this.processLines(text);\n    }\n    this.text = text;\n\n    return this.lines;\n  }\n\n  // Split a chunk of text up into lines and process each line individually\n  private processLines = (\n    text: string,\n    modifiers: ChunkModifiers = {},\n    startingLineNumber: number = 1,\n  ): AnsiLine[] => {\n    const lines: AnsiLine[] = [];\n\n    let currentModifiers = modifiers;\n    let currentLineNumber = startingLineNumber;\n\n    let prevIndex = 0;\n    newlineRegex.lastIndex = 0;\n    for (;;) {\n      const match = newlineRegex.exec(text);\n      if (!match) {\n        const chunks = this.processText(\n          text.slice(prevIndex),\n          currentModifiers,\n        );\n        lines.push(new AnsiLine(currentLineNumber, chunks));\n        return lines;\n      }\n\n      const line = text.slice(prevIndex, match.index);\n      prevIndex = match.index + match[0].length;\n\n      const chunks = this.processText(line, currentModifiers);\n      lines.push(new AnsiLine(currentLineNumber, chunks));\n\n      // Modifiers that are active in the last chunk are carried over to the next line\n      currentModifiers =\n        chunks[chunks.length - 1].modifiers ?? currentModifiers;\n      currentLineNumber += 1;\n    }\n  };\n\n  // Processing of a one individual text chunk\n  private processText = (\n    fullText: string,\n    modifiers: ChunkModifiers,\n  ): AnsiChunk[] => {\n    const chunks: AnsiChunk[] = [];\n\n    let currentModifiers = modifiers;\n\n    let prevIndex = 0;\n    ansiRegex.lastIndex = 0;\n    for (;;) {\n      const match = ansiRegex.exec(fullText);\n      if (!match) {\n        chunks.push({\n          text: fullText.slice(prevIndex),\n          modifiers: currentModifiers,\n        });\n        return chunks;\n      }\n\n      const text = fullText.slice(prevIndex, match.index);\n      chunks.push({ text, modifiers: currentModifiers });\n\n      // For every escape code that we encounter we keep track of where the\n      // next chunk of text starts, and what modifiers it has\n      prevIndex = match.index + match[0].length;\n      currentModifiers = this.processCode(match[0], currentModifiers);\n    }\n  };\n\n  private processCode = (\n    code: string,\n    modifiers: ChunkModifiers,\n  ): ChunkModifiers => {\n    return codeModifiers[code]?.(modifiers) ?? modifiers;\n  };\n}\n","/*\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    },\n    line: {\n      position: 'relative',\n      whiteSpace: 'pre',\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    },\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  }),\n  { name: 'BackstageLogViewer' },\n);\n","/*\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 React, { useMemo } from 'react';\nimport { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor';\nimport startCase from 'lodash/startCase';\nimport classnames from 'classnames';\nimport { useStyles } from './styles';\n\nexport function getModifierClasses(\n  classes: ReturnType<typeof useStyles>,\n  modifiers: ChunkModifiers,\n) {\n  const classNames = new Array<string>();\n  if (modifiers.bold) {\n    classNames.push(classes.modifierBold);\n  }\n  if (modifiers.italic) {\n    classNames.push(classes.modifierItalic);\n  }\n  if (modifiers.underline) {\n    classNames.push(classes.modifierUnderline);\n  }\n  if (modifiers.foreground) {\n    const key = `modifierForeground${startCase(\n      modifiers.foreground,\n    )}` as keyof typeof classes;\n    classNames.push(classes[key]);\n  }\n  if (modifiers.background) {\n    const key = `modifierBackground${startCase(\n      modifiers.background,\n    )}` as keyof typeof classes;\n    classNames.push(classes[key]);\n  }\n  return classNames.length > 0 ? classNames.join(' ') : undefined;\n}\n\nexport function findSearchResults(text: string, searchText: string) {\n  if (!searchText || !text.includes(searchText)) {\n    return undefined;\n  }\n  const searchResults = new Array<{ start: number; end: number }>();\n  let offset = 0;\n  for (;;) {\n    const start = text.indexOf(searchText, offset);\n    if (start === -1) {\n      break;\n    }\n    const end = start + searchText.length;\n    searchResults.push({ start, end });\n    offset = end;\n  }\n  return searchResults;\n}\n\nexport interface HighlightAnsiChunk extends AnsiChunk {\n  highlight?: number;\n}\n\nexport function calculateHighlightedChunks(\n  line: AnsiLine,\n  searchText: string,\n): HighlightAnsiChunk[] {\n  const results = findSearchResults(line.text, searchText);\n  if (!results) {\n    return line.chunks;\n  }\n\n  const chunks = new Array<HighlightAnsiChunk>();\n\n  let lineOffset = 0;\n  let resultIndex = 0;\n  let result = results[resultIndex];\n  for (const chunk of line.chunks) {\n    const { text, modifiers } = chunk;\n    if (!result || lineOffset + text.length < result.start) {\n      chunks.push(chunk);\n      lineOffset += text.length;\n      continue;\n    }\n\n    let localOffset = 0;\n    while (result) {\n      const localStart = Math.max(result.start - lineOffset, 0);\n      if (localStart > text.length) {\n        break; // The next result is not in this chunk\n      }\n\n      const localEnd = Math.min(result.end - lineOffset, text.length);\n\n      const hasTextBeforeResult = localStart > localOffset;\n      if (hasTextBeforeResult) {\n        chunks.push({ text: text.slice(localOffset, localStart), modifiers });\n      }\n      const hasResultText = localEnd > localStart;\n      if (hasResultText) {\n        chunks.push({\n          modifiers,\n          highlight: resultIndex,\n          text: text.slice(localStart, localEnd),\n        });\n      }\n\n      localOffset = localEnd;\n\n      const foundCompleteResult = result.end - lineOffset === localEnd;\n      if (foundCompleteResult) {\n        resultIndex += 1;\n        result = results[resultIndex];\n      } else {\n        break; // The rest of the result is in the following chunks\n      }\n    }\n\n    const hasTextAfterResult = localOffset < text.length;\n    if (hasTextAfterResult) {\n      chunks.push({ text: text.slice(localOffset), modifiers });\n    }\n\n    lineOffset += text.length;\n  }\n\n  return chunks;\n}\n\nexport interface LogLineProps {\n  line: AnsiLine;\n  classes: ReturnType<typeof useStyles>;\n  searchText: string;\n  highlightResultIndex?: number;\n}\n\nexport function LogLine({\n  line,\n  classes,\n  searchText,\n  highlightResultIndex,\n}: LogLineProps) {\n  const chunks = useMemo(\n    () => calculateHighlightedChunks(line, searchText),\n    [line, searchText],\n  );\n\n  const elements = useMemo(\n    () =>\n      chunks.map(({ text, modifiers, highlight }, index) => (\n        <span\n          key={index}\n          className={classnames(\n            getModifierClasses(classes, modifiers),\n            highlight !== undefined &&\n              (highlight === highlightResultIndex\n                ? classes.textSelectedHighlight\n                : classes.textHighlight),\n          )}\n        >\n          {text}\n        </span>\n      )),\n    [chunks, highlightResultIndex, classes],\n  );\n\n  return <>{elements}</>;\n}\n","/*\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 React 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: React.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","/*\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 { useMemo, useState } from 'react';\nimport { useToggle } from '@react-hookz/web';\nimport { AnsiLine } from './AnsiProcessor';\n\nexport function applySearchFilter(lines: AnsiLine[], searchText: string) {\n  if (!searchText) {\n    return { lines };\n  }\n\n  const matchingLines = [];\n  const searchResults = [];\n  for (const line of lines) {\n    if (line.text.includes(searchText)) {\n      matchingLines.push(line);\n\n      let offset = 0;\n      let lineResultIndex = 0;\n      for (;;) {\n        const start = line.text.indexOf(searchText, offset);\n        if (start === -1) {\n          break;\n        }\n        searchResults.push({\n          lineNumber: line.lineNumber,\n          lineIndex: lineResultIndex++,\n        });\n        offset = start + searchText.length;\n      }\n    }\n  }\n\n  return {\n    lines: matchingLines,\n    results: searchResults,\n  };\n}\n\nexport interface LogViewerSearch {\n  lines: AnsiLine[];\n\n  searchText: string;\n  searchInput: string;\n  setSearchInput: (searchInput: string) => void;\n\n  shouldFilter: boolean;\n  toggleShouldFilter: () => void;\n\n  resultCount: number | undefined;\n  resultIndex: number | undefined;\n  resultIndexStep: (decrement?: boolean) => void;\n\n  resultLine: number | undefined;\n  resultLineIndex: number | undefined;\n}\n\nexport function useLogViewerSearch(lines: AnsiLine[]): LogViewerSearch {\n  const [searchInput, setSearchInput] = useState('');\n  const searchText = searchInput.toLocaleLowerCase('en-US');\n\n  const [resultIndex, setResultIndex] = useState<number>(0);\n\n  const [shouldFilter, toggleShouldFilter] = useToggle(false);\n\n  const filter = useMemo(\n    () => applySearchFilter(lines, searchText),\n    [lines, searchText],\n  );\n\n  const searchResult = filter.results\n    ? filter.results[Math.min(resultIndex, filter.results.length - 1)]\n    : undefined;\n  const resultCount = filter.results?.length;\n\n  const resultIndexStep = (decrement?: boolean) => {\n    if (decrement) {\n      if (resultCount !== undefined) {\n        const next = Math.min(resultIndex - 1, resultCount - 2);\n        setResultIndex(next < 0 ? resultCount - 1 : next);\n      }\n    } else {\n      if (resultCount !== undefined) {\n        const next = resultIndex + 1;\n        setResultIndex(next >= resultCount ? 0 : next);\n      }\n    }\n  };\n\n  return {\n    lines: shouldFilter ? filter.lines : lines,\n    searchText,\n    searchInput,\n    setSearchInput,\n    shouldFilter,\n    toggleShouldFilter,\n    resultCount,\n    resultIndex,\n    resultIndexStep,\n    resultLine: searchResult?.lineNumber,\n    resultLineIndex: searchResult?.lineIndex,\n  };\n}\n","/*\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/lib/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","/*\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 React, { useEffect, useMemo, useRef } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport IconButton from '@material-ui/core/IconButton';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { FixedSizeList } from 'react-window';\nimport { AnsiProcessor } from './AnsiProcessor';\nimport { HEADER_SIZE, useStyles } from './styles';\nimport classnames from 'classnames';\nimport { LogLine } from './LogLine';\nimport { LogViewerControls } from './LogViewerControls';\nimport { useLogViewerSearch } from './useLogViewerSearch';\nimport { useLogViewerSelection } from './useLogViewerSelection';\n\nexport interface RealLogViewerProps {\n  text: string;\n  classes?: { root?: string };\n}\n\nexport function RealLogViewer(props: RealLogViewerProps) {\n  const classes = useStyles({ classes: props.classes });\n  const listRef = useRef<FixedSizeList | null>(null);\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 (search.resultLine !== undefined && listRef.current) {\n      listRef.current.scrollToItem(search.resultLine - 1, 'center');\n    }\n  }, [search.resultLine]);\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  return (\n    <AutoSizer>\n      {({ height, width }) => (\n        <div style={{ width, height }} className={classes.root}>\n          <div className={classes.header}>\n            <LogViewerControls {...search} />\n          </div>\n          <FixedSizeList\n            ref={listRef}\n            className={classes.log}\n            height={height - HEADER_SIZE}\n            width={width}\n            itemData={search.lines}\n            itemSize={20}\n            itemCount={search.lines.length}\n          >\n            {({ index, style, data }) => {\n              const line = data[index];\n              const { lineNumber } = line;\n              return (\n                <div\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                    line={line}\n                    classes={classes}\n                    searchText={search.searchText}\n                    highlightResultIndex={\n                      search.resultLine === lineNumber\n                        ? search.resultLineIndex\n                        : undefined\n                    }\n                  />\n                </div>\n              );\n            }}\n          </FixedSizeList>\n        </div>\n      )}\n    </AutoSizer>\n  );\n}\n"],"names":["classnames","ChevronRightIcon","FilterListIcon"],"mappings":"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"}

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, styled
 import MaterialAvatar from '@material-ui/core/Avatar';
 import Button$1 from '@material-ui/core/Button';
 import Link$1 from '@material-ui/core/Link';
-import { Link as Link$2, useSearchParams, useLocation, useResolvedPath, resolvePath, NavLink } from 'react-router-dom';
+import { Link as Link$2, useSearchParams, useLocation, useResolvedPath, resolvePath } from 'react-router-dom';
 import Tooltip from '@material-ui/core/Tooltip';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
@@ -58,7 +58,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import { isError, ResponseError, ForwardedError } from '@backstage/errors';
 import TextTruncate from 'react-text-truncate';
-import useMountedState from 'react-use/lib/useMountedState';
+import { useIsMounted, useDebouncedEffect, useLocalStorageValue, useAsync, useMountEffect } from '@react-hookz/web';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
@@ -87,7 +87,6 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Popover from '@material-ui/core/Popover';
 import { isEqual, orderBy, isMatch, transform } from 'lodash';
 import qs from 'qs';
-import useDebounce from 'react-use/lib/useDebounce';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import { Helmet } from 'react-helmet';
 import { useLocation as useLocation$1, useNavigate, useParams, useRoutes, matchRoutes } from 'react-router';
@@ -102,7 +101,6 @@ import TextField from '@material-ui/core/TextField';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import SearchIcon from '@material-ui/icons/Search';
 import Collapse from '@material-ui/core/Collapse';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import Tab from '@material-ui/core/Tab';
@@ -128,9 +126,7 @@ import { Sparklines, SparklinesLine } from 'react-sparklines';
 import MicDropSvgUrl from './layout/ErrorPage/mic-drop.svg';
 import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import CardMedia from '@material-ui/core/CardMedia';
-import useAsync from 'react-use/lib/useAsync';
 import { z } from 'zod';
-import useMount from 'react-use/lib/useMount';
 import { useForm } from 'react-hook-form';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import isEmpty from 'lodash/isEmpty';
@@ -778,16 +774,16 @@ const DismissableBanner = (props) => {
   const classes = useStyles$N();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket("notifications");
-  const rawDismissedBanners = (_a = notificationsStore.get("dismissedBanners")) != null ? _a : [];
+  const rawDismissedBanners = (_a = notificationsStore.snapshot("dismissedBanners").value) != null ? _a : [];
   const [dismissedBanners, setDismissedBanners] = useState(new Set(rawDismissedBanners));
   const observedItems = useObservable(notificationsStore.observe$("dismissedBanners"));
   useEffect(() => {
     var _a2;
-    if (observedItems == null ? void 0 : observedItems.newValue) {
-      const currentValue = (_a2 = observedItems == null ? void 0 : observedItems.newValue) != null ? _a2 : [];
+    if (observedItems == null ? void 0 : observedItems.value) {
+      const currentValue = (_a2 = observedItems == null ? void 0 : observedItems.value) != null ? _a2 : [];
       setDismissedBanners(new Set(currentValue));
     }
-  }, [observedItems == null ? void 0 : observedItems.newValue]);
+  }, [observedItems == null ? void 0 : observedItems.value]);
   const handleClick = () => {
     notificationsStore.set("dismissedBanners", [...dismissedBanners, id]);
   };
@@ -1615,7 +1611,7 @@ function Lifecycle(props) {
   }, alpha ? "Alpha" : "Beta");
 }
 
-const RealLogViewer = lazy(() => import('./esm/RealLogViewer-e0ae55bd.esm.js').then((m) => ({ default: m.RealLogViewer })));
+const RealLogViewer = lazy(() => import('./esm/RealLogViewer-551c2f4d.esm.js').then((m) => ({ default: m.RealLogViewer })));
 function LogViewer(props) {
   const { Progress } = useApp().getComponents();
   return /* @__PURE__ */ React.createElement(Suspense, {
@@ -1775,7 +1771,7 @@ const useStyles$A = makeStyles({
 function OverflowTooltip(props) {
   var _a;
   const [hover, setHover] = useState(false);
-  const isMounted = useMountedState();
+  const isMounted = useIsMounted();
   const classes = useStyles$A();
   const handleToggled = (truncated) => {
     if (isMounted()) {
@@ -2794,12 +2790,12 @@ function useQueryParamState(stateName, debounceTime = 250) {
     const newState = extractState(searchParamsString, stateName);
     setQueryParamState((oldState) => isEqual(newState, oldState) ? oldState : newState);
   }, [searchParamsString, setQueryParamState, stateName]);
-  useDebounce(() => {
+  useDebouncedEffect(() => {
     const queryString = joinQueryString(searchParamsString, stateName, queryParamState);
     if (searchParamsString !== queryString) {
       setSearchParams(queryString, { replace: true });
     }
-  }, debounceTime, [setSearchParams, queryParamState, searchParamsString, stateName]);
+  }, [setSearchParams, queryParamState, searchParamsString, stateName], debounceTime);
   return [queryParamState, setQueryParamState];
 }
 
@@ -3489,8 +3485,7 @@ const SidebarSubmenuItem = (props) => {
       className: classes.dropdownArrow
     })), dropdownItems && showDropDown && /* @__PURE__ */ React.createElement("div", {
       className: classes.dropdown
-    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Link$1, {
-      component: NavLink,
+    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Link, {
       to: object.to,
       underline: "none",
       className: classes.dropdownItem,
@@ -3503,8 +3498,7 @@ const SidebarSubmenuItem = (props) => {
   }
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.itemContainer
-  }, /* @__PURE__ */ React.createElement(Link$1, {
-    component: NavLink,
+  }, /* @__PURE__ */ React.createElement(Link, {
     to,
     underline: "none",
     className: classNames(classes.item, isActive ? classes.selected : void 0),
@@ -4117,7 +4111,7 @@ function SidebarIntro(_props) {
     starredItemsDismissed: false,
     recentlyViewedItemsDismissed: false
   };
-  const [dismissedIntro, setDismissedIntro] = useLocalStorage(SIDEBAR_INTRO_LOCAL_STORAGE);
+  const [dismissedIntro, setDismissedIntro] = useLocalStorageValue(SIDEBAR_INTRO_LOCAL_STORAGE);
   const { starredItemsDismissed, recentlyViewedItemsDismissed } = dismissedIntro != null ? dismissedIntro : {};
   const dismissStarred = () => {
     setDismissedIntro((state) => ({
@@ -5634,15 +5628,16 @@ class ProxiedSignInIdentity {
 
 const ProxiedSignInPage = (props) => {
   const discoveryApi = useApi(discoveryApiRef);
-  const { loading, error } = useAsync(async () => {
+  const [{ status, error }, { execute }] = useAsync(async () => {
     const identity = new ProxiedSignInIdentity({
       provider: props.provider,
       discoveryApi
     });
     await identity.start();
     props.onSignInSuccess(identity);
-  }, []);
-  if (loading) {
+  });
+  useMountEffect(execute);
+  if (status === "loading") {
     return /* @__PURE__ */ React.createElement(Progress, null);
   } else if (error) {
     return /* @__PURE__ */ React.createElement(ErrorPanel, {
@@ -6162,7 +6157,7 @@ const SingleSignInPage = ({
       setShowLoginPage(true);
     }
   };
-  useMount(() => login({ checkExisting: true }));
+  useMountEffect(() => login({ checkExisting: true }));
   return showLoginPage ? /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {