chore: backport recent prs to release-0.5 (#1801)

Signed-off-by: Remington Breeze <remington@breeze.software>
Signed-off-by: Hidde Beydals <hidde@hhh.computer>
Co-authored-by: Remington Breeze <remington@breeze.software>
Co-authored-by: Hidde Beydals <hiddeco@users.noreply.github.com>

charts/kargo/templates/users/cluster-roles.yaml

@@ -64,6 +64,14 @@ rules:
   - analysistemplates
   verbs:
   - "*"
+- apiGroups:
+  - argoproj.io
+  resources:
+  - analysisruns
+  verbs:
+  - get
+  - list
+  - watch
 {{- end }}
 ---
 apiVersion: rbac.authorization.k8s.io/v1
@@ -110,5 +118,13 @@ rules:
   - get
   - list
   - watch
+- apiGroups:
+  - argoproj.io
+  resources:
+  - analysisruns
+  verbs:
+  - get
+  - list
+  - watch
 {{- end }}
 {{- end }}

ui/src/features/common/freight-label.tsx

@@ -37,6 +37,7 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => {
     >
       {alias || id ? (
         <Tooltip
+          placement='right'
           title={
             <>
               <div className='uppercase text-xs w-full text-center font-semibold text-gray-400'>

ui/src/features/common/layout/main-layout.module.less

@@ -38,11 +38,24 @@
 
 .logo {
   text-align: center;
-  padding: ~'@{sizeXL}px 0';
   display: flex;
   flex-direction: column;
   font-weight: 600;
   font-size: 20px;
+  @apply pt-8;
+}
+
+.version {
+  margin: 0 auto;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 80px;
+  text-align: center;
+  @apply text-gray-500 font-mono;
 }
 
 .icon {

ui/src/features/common/layout/main-layout.tsx

@@ -1,6 +1,6 @@
 import { faArrowRightFromBracket, faBook, faBoxes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Outlet } from 'react-router-dom';
 
 import { paths } from '@ui/config/paths';
@@ -19,6 +19,9 @@ export const MainLayout = () => {
           <img src='/kargo-icon.png' alt='Kargo Icon' className={styles.icon} />
           kargo
         </div>
+        <Tooltip className={styles.version} title={__UI_VERSION__} placement='right'>
+          {__UI_VERSION__ === 'development' ? 'dev' : __UI_VERSION__}
+        </Tooltip>
         <nav className={styles.nav}>
           <NavItem icon={faBoxes} path={paths.projects}>
             Projects

ui/src/features/project/pipelines/nodes/repo-node.module.less

@@ -33,12 +33,19 @@
   @apply items-center justify-center;
 }
 
+.valueContainer {
+  width: 145px;
+  display: block;
+}
+
 .value {
-  display: flex;
+  display: block;
   margin-top: 3px;
   text-decoration: none;
   white-space: nowrap;
-  overflow-x: hidden;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
   padding-bottom: 0.25em;
   text-overflow: ellipsis;
   color: black;

ui/src/features/project/pipelines/nodes/repo-node.tsx

@@ -46,9 +46,19 @@ export const RepoNode = ({ nodeData, children }: Props) => {
           {nodeData.type === NodeType.WAREHOUSE && nodeData?.data?.status?.message && (
             <Tooltip
               title={
-                <div className='flex items-center'>
-                  <FontAwesomeIcon icon={faExclamationCircle} className='mr-2' />
-                  {nodeData?.data?.status?.message}
+                <div className='flex overflow-y-scroll text-wrap max-h-48'>
+                  <FontAwesomeIcon icon={faExclamationCircle} className='mr-2 mt-1 pl-1' />
+                  <div
+                    className='cursor-pointer min-w-0'
+                    onClick={() => {
+                      const msg = nodeData?.data?.status?.message;
+                      if (msg) {
+                        navigator.clipboard.writeText(msg);
+                      }
+                    }}
+                  >
+                    {nodeData?.data?.status?.message}
+                  </div>
                 </div>
               }
             >
@@ -60,7 +70,7 @@ export const RepoNode = ({ nodeData, children }: Props) => {
       </h3>
       <div className={styles.body}>
         {nodeData.type !== NodeType.WAREHOUSE && (
-          <div className='text-center'>
+          <div className={styles.valueContainer}>
             <div className={styles.repoLabel}>REPO URL</div>
             <Tooltip title={value}>
               <a

ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+declare const __UI_VERSION__: string;

ui/tests/api/apimachinery.spec.ts

@@ -17,18 +17,18 @@ describe('metav1.Time', () => {
     expect(time.nanos).toBe(0);
   });
   test('toJson', () => {
-    const time = new Time({seconds: BigInt(1685404800), nanos: 0});
+    const time = new Time({ seconds: BigInt(1685404800), nanos: 0 });
     expect(time.toJson()).toBe('2023-05-30T00:00:00Z');
   });
   // Make sure that the generated code behaves identically to metav1.Time implementation in Go.
   test('toJson with empty value', () => {
     const time = new Time({});
-    expect(time.toDate()).toStrictEqual(new Date(0))
+    expect(time.toDate()).toStrictEqual(new Date(0));
     expect(time.toJson()).toBeNull();
   });
   test('toDate', () => {
     const date = new Date('2023-05-30T00:00:00Z');
-    const time = new Time({seconds: BigInt(1685404800), nanos: 0});
+    const time = new Time({ seconds: BigInt(1685404800), nanos: 0 });
     expect(time.toDate().getTime()).toBe(date.getTime());
   });
 });

ui/vite.config.ts

@@ -17,6 +17,9 @@ export const API_URL = process.env.API_URL || 'http://localhost:30081';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    __UI_VERSION__: JSON.stringify(UI_VERSION)
+  },
   build: {
     outDir: 'build',
     sourcemap: false