feat: Add ArgoCDForm

Author: jinhodotchoi

websites/poolc.org/src/components/my-page/MyPageArgoCDForm.tsx

@@ -0,0 +1,32 @@
+import { Form, Input } from 'antd';
+import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
+import useCopy from '../../hooks/useCopy';
+
+const USER_NAME = 'poolini';
+
+const PASSWORD = 'rgbc0ffee';
+
+export default function MyPageArgoCDForm() {
+  const { styles } = useStyles();
+
+  const { isCopied: isUserNameCopied, copy: copyUserName } = useCopy();
+  const { isCopied: isPasswordCopied, copy: copyPassword } = useCopy();
+
+  return (
+    <Form layout="vertical">
+      <Form.Item label="username" className={styles.inputWrap}>
+        <Input value={USER_NAME} readOnly addonAfter={isUserNameCopied ? <CheckOutlined /> : <CopyOutlined onClick={() => copyUserName(USER_NAME)} />} />
+      </Form.Item>
+      <Form.Item label="password" className={styles.inputWrap}>
+        <Input value={PASSWORD} readOnly addonAfter={isPasswordCopied ? <CheckOutlined /> : <CopyOutlined onClick={() => copyPassword(PASSWORD)} />} />
+      </Form.Item>
+    </Form>
+  );
+}
+
+const useStyles = createStyles(({ css }) => ({
+  inputWrap: css({
+    marginBottom: '8px',
+  }),
+}));

websites/poolc.org/src/components/my-page/MyPagePKSSection.tsx

@@ -1,14 +1,16 @@
-import { CopyOutlined, CheckOutlined, ArrowRightOutlined, SettingTwoTone, BookTwoTone, DeploymentUnitOutlined, EyeTwoTone } from '@ant-design/icons';
-import { Typography, Space, Button, List } from 'antd';
+import { CopyOutlined, CheckOutlined, ArrowRightOutlined, SettingTwoTone, BookTwoTone, DeploymentUnitOutlined, EyeTwoTone, QuestionCircleFilled } from '@ant-design/icons';
+import { Button, Popover, Space, Typography, List } from 'antd';
 import { createStyles } from 'antd-style';
-import useCopy from '../../hooks/useCopy';
+import { ReactNode } from 'react';
+import useCopy from '~/hooks/useCopy';
+import MyPageArgoCDForm from './MyPageArgoCDForm';
 
 export default function MyPagePKSSection({ jwtToken }: { jwtToken: string }) {
   const { styles } = useStyles();
   const { isCopied, copy } = useCopy();
 
   const linkList: {
-    title: string;
+    title: ReactNode;
     icon: JSX.Element;
     link: string;
   }[] = [
@@ -23,7 +25,14 @@ export default function MyPagePKSSection({ jwtToken }: { jwtToken: string }) {
       link: 'https://github.com/PoolC/PKS-docs/tree/main',
     },
     {
-      title: 'Argo CD',
+      title: (
+        <Space size={4}>
+          Argo CD
+          <Popover title="계정정보" content={<MyPageArgoCDForm />}>
+            <QuestionCircleFilled />
+          </Popover>
+        </Space>
+      ),
       icon: <DeploymentUnitOutlined size={24} />,
       link: 'http://argocd.dev.poolc.org',
     },