chore: Cloud Agent Info

web/src/components/CodeBlock/CodeBlock.styled.ts

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 
 export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}>`
   position: relative;
-  border: ${({theme}) => `1px solid ${theme.color.border}`};
   min-height: ${({$minHeight}) => $minHeight || '370px'};
 
   pre {
     margin: 0;
     padding: 13px 16px !important;
     min-height: inherit;
+    border: ${({theme}) => `1px solid ${theme.color.border}`};
     max-height: ${({$maxHeight}) => $maxHeight || '340px'};
     background: ${({theme}) => theme.color.background} !important;
 
@@ -19,7 +19,9 @@ export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}
   }
 `;
 
-export const FrameContainer = styled.div``;
+export const FrameContainer = styled.div`
+  position: relative;
+`;
 export const FrameHeader = styled.div`
   display: flex;
   justify-content: space-between;
@@ -36,9 +38,12 @@ export const FrameTitle = styled(Typography.Paragraph)`
   }
 `;
 
-export const CopyButton = styled(Button)`
+export const CopyButton = styled(Button).attrs({
+  size: 'small',
+})`
   && {
     padding: 0 8px;
+    width: 80px;
     background: ${({theme}) => theme.color.white};
     font-weight: 600;
 

web/src/components/CodeBlock/CodeBlock.tsx

@@ -10,6 +10,7 @@ export interface IProps {
   mimeType?: string;
   maxHeight?: string;
   minHeight?: string;
+  className?: string;
 }
 
 const getLanguage = (mimeType: string): LanguageName | undefined => {
@@ -32,7 +33,7 @@ const formatValue = (value: string, lang?: string): string => {
   }
 };
 
-const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = ''}: IProps) => {
+const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = '', className = ''}: IProps) => {
   const lang = useMemo(() => language || getLanguage(mimeType), [language, mimeType]);
 
   // SyntaxHighlighter has a performance problem, so we need to memoize it
@@ -47,7 +48,7 @@ const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight =
   );
 
   return (
-    <S.CodeContainer data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight}>
+    <S.CodeContainer className={className} data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight}>
       {memoizedHighlighter}
     </S.CodeContainer>
   );

web/src/components/CodeBlock/UrlCodeBlock.styled.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import DefaultCodeBlock from './CodeBlock';
+import * as S from './CodeBlock.styled';
+
+export const CodeBlock = styled(DefaultCodeBlock)`
+  && {
+    pre {
+      padding: 5px 10px !important;
+      border-radius: 4px;
+    }
+  }
+`;
+
+export const CopyButton = styled(S.CopyButton)`
+  && {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    z-index: 1;
+  }
+`;

web/src/components/CodeBlock/UrlCodeBlock.tsx

@@ -0,0 +1,19 @@
+import * as S from './CodeBlock.styled';
+import * as U from './UrlCodeBlock.styled';
+import {IProps} from './CodeBlock';
+import useCopy from '../../hooks/useCopy';
+
+const UrlCodeBlock = ({...props}: IProps) => {
+  const copy = useCopy();
+
+  return (
+    <S.FrameContainer>
+      <U.CopyButton ghost type="primary" onClick={() => copy(props.value)}>
+        Copy
+      </U.CopyButton>
+      <U.CodeBlock {...props} />
+    </S.FrameContainer>
+  );
+};
+
+export default UrlCodeBlock;