add UI for certificate authority list (#26955)

For #26605

This is the UI for the certificate authority list that shows the added
CAs. This includes:

**new CA section and list on integration page**


![image](https://github.com/user-attachments/assets/4159bd6d-632e-4adc-ae45-d83f824380ae)

**empty CA list state**


![image](https://github.com/user-attachments/assets/8f27cd8b-53b2-4cf3-ac64-8fa6ec0a2ae2)

**gitops mode on add CA card and CA list**


![image](https://github.com/user-attachments/assets/981a353c-f515-44ed-90d5-f55e412053ba)


![image](https://github.com/user-attachments/assets/286dc503-f2cd-4329-aa46-6301df75b826)


- [ ] Added/updated automated tests
- [x] Manual QA for all new/changed functionality

frontend/components/GitOpsModeTooltipWrapper/GitOpsModeTooltipWrapper.tsx

@@ -30,16 +30,16 @@ const GitOpsModeTooltipWrapper = ({
 
   const tipContent = (
     // at this point repoURL will always be defined
-    <>
+    <div className={`${baseClass}__tooltip-content`}>
       {repoURL && (
-        <>
+        <span>
           Manage in{" "}
           <CustomLink newTab text="YAML" variant="tooltip-link" url={repoURL} />
           <br />
-        </>
+        </span>
       )}
-      (GitOps mode enabled)
-    </>
+      <span>(GitOps mode enabled)</span>
+    </div>
   );
 
   return (

frontend/components/GitOpsModeTooltipWrapper/_styles.scss

@@ -1,4 +1,10 @@
 .gitops-mode-tooltip-wrapper {
+  &__tooltip-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .component__tooltip-wrapper {
     &__tip-text {
       cursor: default;