feat: impl cronjob show envs (#4833)

* feat: impl cronjob show envs

* fix: pnpm lock

frontend/pnpm-lock.yaml

@@ -980,6 +980,9 @@ importers:
       '@next/font':
         specifier: 13.1.6
         version: 13.1.6
+      '@sealos/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       '@tanstack/react-query':
         specifier: ^4.35.3
         version: 4.36.1(react-dom@18.2.0)(react@18.2.0)

frontend/providers/cronjob/next.config.js

@@ -17,6 +17,7 @@ const nextConfig = {
     config.plugins = [...config.plugins];
     return config;
   },
+  transpilePackages: ['@sealos/ui'],
   experimental: {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, '../../')

frontend/providers/cronjob/package.json

@@ -21,6 +21,7 @@
     "@kubernetes/client-node": "^0.18.1",
     "@next/font": "13.1.6",
     "@tanstack/react-query": "^4.35.3",
+    "@sealos/ui": "workspace:^",
     "ansi_up": "^5.2.1",
     "axios": "^1.5.1",
     "cron-parser": "^4.9.0",

frontend/providers/cronjob/src/pages/job/edit/components/Form.tsx

@@ -23,12 +23,14 @@ import {
   Button,
   useDisclosure
 } from '@chakra-ui/react';
+import { MyTooltip } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { throttle } from 'lodash';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { Controller, UseFormReturn, useFieldArray } from 'react-hook-form';
+import styles from './index.module.scss';
 import Cron from './Cron';
 import Label from './Label';
 import EditEnvs from './EditEnvs';
@@ -368,6 +370,36 @@ const Form = ({ formHook }: { formHook: UseFormReturn<CronJobEditType, any> }) =
                   >
                     {t('Edit Environment Variables')}
                   </Button>
+                  <Box mt={3} w={'300px'}>
+                    <table className={'table-cross'}>
+                      <tbody>
+                        {envs.map((env) => {
+                          const valText = env.value
+                            ? env.value
+                            : env.valueFrom
+                            ? 'value from | ***'
+                            : '';
+                          return (
+                            <tr key={env.id}>
+                              <th>{env.key}</th>
+                              <th>
+                                <MyTooltip label={valText}>
+                                  <Box
+                                    className={styles.textEllipsis}
+                                    style={{
+                                      userSelect: 'auto'
+                                    }}
+                                  >
+                                    {valText}
+                                  </Box>
+                                </MyTooltip>
+                              </th>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </Box>
                 </Box>
               </>
             )}

frontend/providers/cronjob/src/pages/job/edit/components/index.module.scss

@@ -22,7 +22,8 @@
   color: #333333;
   font-size: 16px;
   font-weight: bold;
-  margin-bottom: 10px;
+  flex-shrink: 0;
+  width: 100px;
 }
 .textEllipsis {
   text-overflow: ellipsis;
@@ -34,9 +35,10 @@
   overflow: hidden;
   table-layout: fixed;
   width: 100%;
+  background: #f4f6f8;
 
   th {
-    border: 1px solid #eff0f1;
+    border: 1px solid #dee0e2;
     text-align: left;
     padding: 8px;
     user-select: all;

frontend/providers/cronjob/src/styles/global.scss

@@ -0,0 +1,31 @@
+.table-cross {
+  border-radius: 6px;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+
+  th {
+    border: 1px solid transparent;
+    text-align: left;
+    padding: 8px 16px;
+    user-select: all;
+    font-weight: 500;
+    color: #485264;
+  }
+  th {
+    border: 1px solid transparent;
+    text-align: left;
+    padding: 8px 16px;
+    user-select: all;
+    font-weight: 500;
+    color: #485264;
+  }
+
+  thead tr {
+    background: #f4f4f7;
+  }
+
+  tbody tr:nth-child(odd) {
+    background: #fafafc;
+  }
+}

frontend/providers/cronjob/src/styles/reset.scss

@@ -1,3 +1,5 @@
+@import './global.scss';
+
 body,
 h1,
 h2,