update(console): support job failed reason, add new copy & text component (#2472)

Author: waynelwz

console/packages/starwhale-ui/src/Copy/CopyToClipboard.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import Copy from 'react-copy-to-clipboard'
+import IconFont from '../IconFont'
+import Button from '../Button'
+
+export interface ICopyToClipboardProps {
+    content: string
+    children?: React.ReactNode
+}
+
+function CopyToClipboard({
+    content,
+    children,
+}: ICopyToClipboardProps): React.FunctionComponentElement<ICopyToClipboardProps> {
+    const [copied, setCopied] = React.useState(false)
+
+    return (
+        <Copy
+            text={content}
+            onCopy={() => {
+                setCopied(true)
+            }}
+        >
+            <Button as='link' kind='tertiary'>
+                {typeof children === 'function' ? children(copied) : children}
+            </Button>
+        </Copy>
+    )
+}
+
+function IconCopy(props: ICopyToClipboardProps) {
+    return (
+        <CopyToClipboard {...props}>
+            {(copied: boolean) => <IconFont type={copied ? 'check' : 'copy'} style={{ marginLeft: '5px' }} />}
+        </CopyToClipboard>
+    )
+}
+
+export { IconCopy }
+
+export default React.memo<ICopyToClipboardProps>(CopyToClipboard)

console/packages/starwhale-ui/src/Copy/index.tsx

@@ -0,0 +1,2 @@
+export * from './CopyToClipboard'
+export { default as CopyToClipboard } from './CopyToClipboard'

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1688023288848') format('woff2'),
-       url('iconfont.woff?t=1688023288848') format('woff'),
-       url('iconfont.ttf?t=1688023288848') format('truetype');
+  src: url('iconfont.woff2?t=1688627096806') format('woff2'),
+       url('iconfont.woff?t=1688627096806') format('woff'),
+       url('iconfont.ttf?t=1688627096806') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-a-copylink:before {
+  content: "\e66f";
+}
+
+.icon-copy:before {
+  content: "\e670";
+}
+
 .icon-global2:before {
   content: "\e66e";
 }

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.js

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "36317040",
+      "name": "copy link",
+      "font_class": "a-copylink",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "36317041",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
     {
       "icon_id": "36161167",
       "name": "global2",

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:546784e4ea093fe91ad86af067cd673730db4fb78bf7879a5df25a4d34bbc23a
-size 20276
+oid sha256:091baf54f607f257ab2e6b1e701bb8b8e576710d8d261eed78781b906c92a433
+size 20776

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.ttf

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1853237c23ff096172c6a897e49d906d85b848bb505b4ba73a869dd12253c563
-size 11684
+oid sha256:2ba650f46fe20e13547d996d808704bd2005554ec8b1ead89f2774bef673dcc3
+size 11972

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.woff

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f607da82f46c7e738be095e3a3273eb9771cbb115ef22461935a61a0626a2ec7
-size 9732
+oid sha256:ac49aed478de2396faa7eb029ec3bbaebe267ba29393c0170bb2b3a75336bf77
+size 9996

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.woff2

@@ -113,6 +113,8 @@ export type IconTypesT =
     | 'top2'
     | 'time'
     | 'global2'
+    | 'copy'
+    | 'a-copylink'
 
 interface IIconFontProps {
     style?: React.CSSProperties

console/packages/starwhale-ui/src/IconFont/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Tooltip } from '../Tooltip'
+import { IconCopy } from '../Copy'
+import { themedUseStyletron } from '../theme/styletron'
+
+export interface ITextProps {
+    children?: React.ReactNode
+    size?: 'small' | 'medium' | 'large' | 'xlarge'
+    style?: React.CSSProperties
+    tooltip?: React.ReactNode
+    content?: string
+    maxWidth?: string
+}
+
+const fontSizeMap: { [k in Exclude<ITextProps['size'], undefined>]: string } = {
+    small: '12px',
+    medium: '14px',
+    large: '16px',
+    xlarge: '20px',
+}
+
+function Text({ children, style, size = 'medium', tooltip = '', content = '', maxWidth = '200px' }: ITextProps) {
+    const [css] = themedUseStyletron()
+
+    let Component = (
+        <span
+            style={style}
+            className={css({
+                fontSize: fontSizeMap[size],
+                WebkitLineClamp: 1,
+                display: 'inline-block',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                verticalAlign: 'middle',
+                maxWidth,
+            })}
+        >
+            {children ?? content}
+        </span>
+    )
+
+    if (tooltip) {
+        Component = (
+            <Tooltip content={tooltip} showArrow placement='top'>
+                {Component}
+            </Tooltip>
+        )
+    }
+
+    return (
+        <>
+            {Component}
+            {content && <IconCopy content={content} />}
+        </>
+    )
+}
+
+function MonoText({ children, style, ...props }: ITextProps) {
+    return (
+        <Text {...props} style={{ ...style, fontFamily: 'Roboto Mono' }}>
+            {children}
+        </Text>
+    )
+}
+
+export { MonoText }
+export default Text