@backstage/core-components 0.18.12-next.0 → 0.18.12-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/components/CopyTextButton/CopyTextButton.esm.js +29 -18
- package/dist/components/CopyTextButton/CopyTextButton.esm.js.map +1 -1
- package/dist/layout/ErrorPage/StackDetails.esm.js +2 -1
- package/dist/layout/ErrorPage/StackDetails.esm.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @backstage/core-components
|
|
2
2
|
|
|
3
|
+
## 0.18.12-next.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 7ceeaad: Migrated CopyTextButton component from Material-UI to Backstage UI (BUI). Replaced MUI IconButton and Tooltip with BUI ButtonIcon and TooltipTrigger/Tooltip components. This is an internal refactoring that maintains backward compatibility - the component API remains unchanged.
|
|
8
|
+
|
|
3
9
|
## 0.18.12-next.0
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useApi, errorApiRef } from '@backstage/core-plugin-api';
|
|
3
|
-
import
|
|
4
|
-
import Tooltip from '@material-ui/core/Tooltip';
|
|
3
|
+
import { TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
|
|
5
4
|
import CopyIcon from '@material-ui/icons/FileCopy';
|
|
6
|
-
import { useState, useEffect } from 'react';
|
|
5
|
+
import { useState, useRef, useEffect } from 'react';
|
|
7
6
|
import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
|
|
8
7
|
import { coreComponentsTranslationRef } from '../../translation.esm.js';
|
|
9
8
|
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
|
|
@@ -19,28 +18,40 @@ function CopyTextButton(props) {
|
|
|
19
18
|
const errorApi = useApi(errorApiRef);
|
|
20
19
|
const [open, setOpen] = useState(false);
|
|
21
20
|
const [{ error }, copyToClipboard] = useCopyToClipboard();
|
|
21
|
+
const timeoutRef = useRef(null);
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
if (error) {
|
|
24
24
|
errorApi.post(error);
|
|
25
25
|
}
|
|
26
26
|
}, [error, errorApi]);
|
|
27
|
-
const handleCopyClick = (
|
|
28
|
-
|
|
27
|
+
const handleCopyClick = () => {
|
|
28
|
+
if (timeoutRef.current) {
|
|
29
|
+
clearTimeout(timeoutRef.current);
|
|
30
|
+
}
|
|
29
31
|
setOpen(true);
|
|
30
32
|
copyToClipboard(text);
|
|
33
|
+
timeoutRef.current = setTimeout(() => {
|
|
34
|
+
setOpen(false);
|
|
35
|
+
}, tooltipDelay);
|
|
31
36
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
return () => {
|
|
39
|
+
if (timeoutRef.current) {
|
|
40
|
+
clearTimeout(timeoutRef.current);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}, []);
|
|
44
|
+
return /* @__PURE__ */ jsxs(TooltipTrigger, { isOpen: open, onOpenChange: setOpen, children: [
|
|
45
|
+
/* @__PURE__ */ jsx(
|
|
46
|
+
ButtonIcon,
|
|
47
|
+
{
|
|
48
|
+
icon: /* @__PURE__ */ jsx(CopyIcon, {}),
|
|
49
|
+
onPress: handleCopyClick,
|
|
50
|
+
"aria-label": ariaLabel
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx(Tooltip, { children: tooltipText })
|
|
54
|
+
] });
|
|
44
55
|
}
|
|
45
56
|
|
|
46
57
|
export { CopyTextButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyTextButton.esm.js","sources":["../../../src/components/CopyTextButton/CopyTextButton.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 { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport
|
|
1
|
+
{"version":3,"file":"CopyTextButton.esm.js","sources":["../../../src/components/CopyTextButton/CopyTextButton.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 { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport { ButtonIcon, Tooltip, TooltipTrigger } from '@backstage/ui';\nimport CopyIcon from '@material-ui/icons/FileCopy';\nimport { useEffect, useRef, useState } from 'react';\nimport useCopyToClipboard from 'react-use/esm/useCopyToClipboard';\nimport { coreComponentsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Properties for {@link CopyTextButton}\n *\n * @public\n */\nexport interface CopyTextButtonProps {\n /**\n * The text to be copied\n */\n text: string;\n /**\n * Number of milliseconds that the tooltip is shown\n *\n * @remarks\n *\n * Default: 1000\n */\n tooltipDelay?: number;\n /**\n * Text to show in the tooltip when user has clicked the button\n *\n * @remarks\n *\n * Default: \"Text copied to clipboard\"\n */\n tooltipText?: string;\n\n /**\n * Text to use as aria-label prop on the button\n *\n * @remarks\n *\n * Default: \"Copy text\"\n */\n 'aria-label'?: string;\n}\n\n/**\n * Copy text button with visual feedback\n *\n * @public\n * @remarks\n *\n * Visual feedback takes form of:\n * - a hover color\n * - click ripple\n * - Tooltip shown when user has clicked\n *\n * @example\n *\n * ```\n * <CopyTextButton\n * text=\"My text that I want to be copied to the clipboard\"\n * arial-label=\"Accessible label for this button\" />\n * ```\n */\nexport function CopyTextButton(props: CopyTextButtonProps) {\n const { t } = useTranslationRef(coreComponentsTranslationRef);\n const {\n text,\n tooltipDelay = 1000,\n tooltipText = t('copyTextButton.tooltipText'),\n 'aria-label': ariaLabel = 'Copy text',\n } = props;\n const errorApi = useApi(errorApiRef);\n const [open, setOpen] = useState(false);\n const [{ error }, copyToClipboard] = useCopyToClipboard();\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (error) {\n errorApi.post(error);\n }\n }, [error, errorApi]);\n\n const handleCopyClick = () => {\n // Clear any existing timeout to reset the timer on repeated clicks\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n setOpen(true);\n copyToClipboard(text);\n\n // Set new timeout to close tooltip\n timeoutRef.current = setTimeout(() => {\n setOpen(false);\n }, tooltipDelay);\n };\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n return (\n <TooltipTrigger isOpen={open} onOpenChange={setOpen}>\n <ButtonIcon\n icon={<CopyIcon />}\n onPress={handleCopyClick}\n aria-label={ariaLabel}\n />\n <Tooltip>{tooltipText}</Tooltip>\n </TooltipTrigger>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgFO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,4BAA4B,CAAA;AAC5D,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,YAAA,GAAe,GAAA;AAAA,IACf,WAAA,GAAc,EAAE,4BAA4B,CAAA;AAAA,IAC5C,cAAc,SAAA,GAAY;AAAA,GAC5B,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,EAAE,KAAA,EAAM,EAAG,eAAe,IAAI,kBAAA,EAAmB;AACxD,EAAA,MAAM,UAAA,GAAa,OAA6C,IAAI,CAAA;AAEpE,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,MAAM,kBAAkB,MAAM;AAE5B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,IACjC;AAEA,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,eAAA,CAAgB,IAAI,CAAA;AAGpB,IAAA,UAAA,CAAW,OAAA,GAAU,WAAW,MAAM;AACpC,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,GAAG,YAAY,CAAA;AAAA,EACjB,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAA,EAAS;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,MACjC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,IAAA,CAAC,cAAA,EAAA,EAAe,MAAA,EAAQ,IAAA,EAAM,cAAc,OAAA,EAC1C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,sBAAO,QAAA,EAAA,EAAS,CAAA;AAAA,QAChB,OAAA,EAAS,eAAA;AAAA,QACT,YAAA,EAAY;AAAA;AAAA,KACd;AAAA,oBACA,GAAA,CAAC,WAAS,QAAA,EAAA,WAAA,EAAY;AAAA,GAAA,EACxB,CAAA;AAEJ;;;;"}
|
|
@@ -19,7 +19,7 @@ import '@material-ui/core/DialogTitle';
|
|
|
19
19
|
import '../../components/Avatar/Avatar.esm.js';
|
|
20
20
|
import '../../components/LinkButton/LinkButton.esm.js';
|
|
21
21
|
import { CodeSnippet } from '../../components/CodeSnippet/CodeSnippet.esm.js';
|
|
22
|
-
import '@
|
|
22
|
+
import '@backstage/ui';
|
|
23
23
|
import '@material-ui/icons/FileCopy';
|
|
24
24
|
import 'react-use/esm/useCopyToClipboard';
|
|
25
25
|
import '@material-ui/core/useMediaQuery';
|
|
@@ -47,6 +47,7 @@ import '@material-ui/core/LinearProgress';
|
|
|
47
47
|
import { makeStyles } from '@material-ui/core/styles';
|
|
48
48
|
import '../../components/ProgressBars/GaugeCard.esm.js';
|
|
49
49
|
import '../../components/ProgressBars/Gauge.esm.js';
|
|
50
|
+
import '@material-ui/core/Tooltip';
|
|
50
51
|
import 'rc-progress';
|
|
51
52
|
import '../../components/Select/Select.esm.js';
|
|
52
53
|
import '../../components/SimpleStepper/SimpleStepper.esm.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackDetails.esm.js","sources":["../../../src/layout/ErrorPage/StackDetails.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport Typography from '@material-ui/core/Typography';\nimport { useState } from 'react';\nimport { Link } from '../../components/Link';\nimport { CodeSnippet } from '../../components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\ninterface IStackDetailsProps {\n stack: string;\n}\n\n/** @public */\nexport type StackDetailsClassKey = 'title';\n\nconst useStyles = makeStyles(\n theme => ({\n title: {\n paddingBottom: theme.spacing(5),\n [theme.breakpoints.down('xs')]: {\n paddingBottom: theme.spacing(4),\n fontSize: theme.typography.h3.fontSize,\n },\n },\n }),\n { name: 'BackstageErrorPageStackDetails' },\n);\n\n/**\n * Error page details with stack trace\n *\n * @public\n *\n */\nexport function StackDetails(props: IStackDetailsProps) {\n const { stack } = props;\n const classes = useStyles();\n const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n const [detailsOpen, setDetailsOpen] = useState<boolean>(false);\n\n if (!detailsOpen) {\n return (\n <Typography variant=\"h6\" className={classes.title}>\n <Link to=\"#\" onClick={() => setDetailsOpen(true)}>\n {t('errorPage.showMoreDetails')}\n </Link>\n </Typography>\n );\n }\n\n return (\n <>\n <Typography variant=\"h6\" className={classes.title}>\n <Link to=\"#\" onClick={() => setDetailsOpen(false)}>\n {t('errorPage.showLessDetails')}\n </Link>\n </Typography>\n <CodeSnippet\n text={stack}\n language=\"text\"\n showCopyCodeButton\n showLineNumbers\n />\n </>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StackDetails.esm.js","sources":["../../../src/layout/ErrorPage/StackDetails.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport Typography from '@material-ui/core/Typography';\nimport { useState } from 'react';\nimport { Link } from '../../components/Link';\nimport { CodeSnippet } from '../../components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { coreComponentsTranslationRef } from '../../translation';\n\ninterface IStackDetailsProps {\n stack: string;\n}\n\n/** @public */\nexport type StackDetailsClassKey = 'title';\n\nconst useStyles = makeStyles(\n theme => ({\n title: {\n paddingBottom: theme.spacing(5),\n [theme.breakpoints.down('xs')]: {\n paddingBottom: theme.spacing(4),\n fontSize: theme.typography.h3.fontSize,\n },\n },\n }),\n { name: 'BackstageErrorPageStackDetails' },\n);\n\n/**\n * Error page details with stack trace\n *\n * @public\n *\n */\nexport function StackDetails(props: IStackDetailsProps) {\n const { stack } = props;\n const classes = useStyles();\n const { t } = useTranslationRef(coreComponentsTranslationRef);\n\n const [detailsOpen, setDetailsOpen] = useState<boolean>(false);\n\n if (!detailsOpen) {\n return (\n <Typography variant=\"h6\" className={classes.title}>\n <Link to=\"#\" onClick={() => setDetailsOpen(true)}>\n {t('errorPage.showMoreDetails')}\n </Link>\n </Typography>\n );\n }\n\n return (\n <>\n <Typography variant=\"h6\" className={classes.title}>\n <Link to=\"#\" onClick={() => setDetailsOpen(false)}>\n {t('errorPage.showLessDetails')}\n </Link>\n </Typography>\n <CodeSnippet\n text={stack}\n language=\"text\"\n showCopyCodeButton\n showLineNumbers\n />\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC9B,CAAC,KAAA,CAAM,WAAA,CAAY,IAAA,CAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG;AAAA;AAChC;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,gCAAA;AACV,CAAA;AAQO,SAAS,aAAa,KAAA,EAA2B;AACtD,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,4BAA4B,CAAA;AAE5D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,2BACG,UAAA,EAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAW,OAAA,CAAQ,OAC1C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,GAC5C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,OAAA,EAAQ,IAAA,EAAK,WAAW,OAAA,CAAQ,KAAA,EAC1C,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAS,MAAM,cAAA,CAAe,KAAK,GAC7C,QAAA,EAAA,CAAA,CAAE,2BAA2B,GAChC,CAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,KAAA;AAAA,QACN,QAAA,EAAS,MAAA;AAAA,QACT,kBAAA,EAAkB,IAAA;AAAA,QAClB,eAAA,EAAe;AAAA;AAAA;AACjB,GAAA,EACF,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/core-components",
|
|
3
|
-
"version": "0.18.12-next.
|
|
3
|
+
"version": "0.18.12-next.1",
|
|
4
4
|
"description": "Core components used by Backstage plugins and apps",
|
|
5
5
|
"backstage": {
|
|
6
6
|
"role": "web-library"
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"@backstage/core-plugin-api": "1.12.8-next.0",
|
|
71
71
|
"@backstage/errors": "1.3.1",
|
|
72
72
|
"@backstage/theme": "0.7.3",
|
|
73
|
+
"@backstage/ui": "0.17.0-next.1",
|
|
73
74
|
"@backstage/version-bridge": "1.0.12",
|
|
74
75
|
"@dagrejs/dagre": "^1.1.4",
|
|
75
76
|
"@date-io/core": "^1.3.13",
|
|
@@ -111,7 +112,7 @@
|
|
|
111
112
|
},
|
|
112
113
|
"devDependencies": {
|
|
113
114
|
"@backstage/app-defaults": "1.7.10-next.0",
|
|
114
|
-
"@backstage/cli": "0.36.4-next.
|
|
115
|
+
"@backstage/cli": "0.36.4-next.2",
|
|
115
116
|
"@backstage/core-app-api": "1.20.3-next.0",
|
|
116
117
|
"@backstage/test-utils": "1.7.20-next.0",
|
|
117
118
|
"@testing-library/dom": "^10.0.0",
|