show YAML page

Signed-off-by: Atif Ali <atali@redhat.com>

show YAML page better

Signed-off-by: Atif Ali <atali@redhat.com>

complete YAML page and cleanup

Signed-off-by: Atif Ali <atali@redhat.com>

implement edit appset

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

src/gitops/components/appset/AppSetDetailsTab.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { ApplicationSetKind } from '../../models/ApplicationSetModel';
 import {
@@ -12,7 +13,7 @@ import {
 import ResourceDetailsAttributes from '../../utils/components/ResourceDetails/ResourceDetailsAttributes';
 import './AppSetDetailsTab.scss';
 
-type AppSetDetailsTabProps = {
+type AppSetDetailsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: ApplicationSetKind;
   namespace?: string;
   name?: string;

src/gitops/components/appset/AppSetNavPage.scss

@@ -2,7 +2,7 @@
   &__main-section {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: 100vh; // Use full viewport height
   }
 
   &__body {
@@ -14,6 +14,33 @@
   &__pane-body {
     flex: 1;
     padding: 20px;
-    overflow-y: auto;
+    overflow-y: auto; // Restore scrolling for other tabs
+
+    /* Remove min-height constraints that force outer scrolling */
+    .pf-v6-c-code-editor,
+    .pf-c-code-editor {
+      height: 100% !important;
+      border: 0 !important;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+    .pf-v6-c-code-editor__main,
+    .pf-c-code-editor__main {
+      height: 100% !important;
+      border: 0 !important;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+    .pf-v6-c-code-editor__main::before,
+    .pf-v6-c-code-editor__main::after,
+    .pf-v6-c-code-editor__main::before,
+    .pf-c-code-editor__main::after {
+      content: none !important;
+      display: none !important;
+    }
+    .monaco-editor,
+    .monaco-editor .overflow-guard {
+      height: 100% !important;
+    }
   }
 }

src/gitops/components/appset/AppSetNavPage.tsx

@@ -16,6 +16,7 @@ import AppsTab from './AppsTab';
 import EventsTab from './EventsTab';
 import YAMLTab from './YAMLTab';
 import './AppSetNavPage.scss';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 type AppSetPageProps = {
   name: string;
@@ -24,8 +25,9 @@ type AppSetPageProps = {
 };
 
 const AppSetNavPage: React.FC<AppSetPageProps> = ({ name, namespace, kind }) => {
+  const location = useLocation();
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  
+
   const [appSet, loaded, loadError] = useK8sWatchResource<ApplicationSetKind>({
     groupVersionKind: {
       group: 'argoproj.io',
@@ -38,14 +40,26 @@ const AppSetNavPage: React.FC<AppSetPageProps> = ({ name, namespace, kind }) =>
 
   const [actions] = useApplicationSetActionsProvider(appSet);
 
+  // Handle tab query parameter
+  React.useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const tabParam = searchParams.get('tab');
+    if (tabParam === 'yaml') {
+      setActiveTabKey(1); // YAML tab is at index 1
+    }
+  }, [location.search]);
+
   if (loadError) return <div>Error loading ApplicationSet details.</div>;
   if (!loaded || !appSet) return (
     <Bullseye>
       <Spinner size="xl" />
     </Bullseye>
   );
 
-  const handleTabClick = (event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
+  const handleTabClick = (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    tabIndex: string | number,
+  ) => {
     setActiveTabKey(tabIndex);
   };
 
@@ -60,8 +74,8 @@ const AppSetNavPage: React.FC<AppSetPageProps> = ({ name, namespace, kind }) =>
         iconText="AS"
         iconTitle="Argo CD ApplicationSet"
         resourcePrefix="Argo CD"
+        showDevPreviewBadge={true}
       />
-      
       <div className="application-set-details-page__body">
         <div className="application-set-details-page__pane-body">
           <Tabs activeKey={activeTabKey} onSelect={handleTabClick} className="pf-v6-c-tabs">

src/gitops/components/appset/AppsTab.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { ApplicationSetKind } from '../../models/ApplicationSetModel';
 import { PageSection } from '@patternfly/react-core';
 import ApplicationList from '../shared/ApplicationList';
 import './AppsTab.scss';
 
-type AppsTabProps = {
+type AppsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: ApplicationSetKind;
   namespace?: string;
   name?: string;

src/gitops/components/appset/EventsTab.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { ApplicationSetKind } from '../../models/ApplicationSetModel';
 import {
   Badge,
@@ -7,7 +8,7 @@ import {
 } from '@patternfly/react-core';
 import './EventsTab.scss';
 
-type EventsTabProps = {
+type EventsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: ApplicationSetKind;
   namespace?: string;
   name?: string;

src/gitops/components/appset/GeneratorsTab.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { ApplicationSetKind } from '../../models/ApplicationSetModel';
 import { PageSection } from '@patternfly/react-core';
 import Generators from './Generators';
 import './GeneratorsTab.scss';
 
-type GeneratorsTabProps = {
+type GeneratorsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
   obj?: ApplicationSetKind;
   namespace?: string;
   name?: string;

src/gitops/components/appset/YAMLTab.scss

@@ -1,51 +1,61 @@
-.application-set-details-page {
-  &__yaml-editor {
-    background: #1a1d21;
-    border: 1px solid #393F44;
-    border-radius: 8px;
-    overflow: hidden;
+.yaml-tab-container {
+  // Use viewport height to fit the page without scrolling - adjust for header, tabs, and footer
+  height: calc(97vh - 320px); // Slightly reduced to make footer fully visible
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Prevent page scrolling for YAML tab only
+
+  // Override parent scrolling behavior for YAML tab
+  .application-set-details-page__pane-body {
+    overflow: hidden !important; // Override parent scrolling for YAML tab
+  }
+
+  .pf-v6-c-code-editor:focus-within,
+  .pf-c-code-editor:focus-within {
+    box-shadow: none !important;
+    outline: none !important;
   }
 
-  &__yaml-editor-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 16px;
-    background: #212427;
-    border-bottom: 1px solid #393F44;
+  .monaco-editor .scrollbar .slider {
+    border: 0 !important;
   }
 
-  &__yaml-editor-header-buttons {
-    display: flex;
-    gap: 8px;
+  .monaco-editor .scrollbar .slider:hover {
+    border: 0 !important;
   }
 
-  &__yaml-editor-header-shortcuts {
-    font-size: 12px;
+  .monaco-editor .scrollbar.vertical {
+    border-left: 0 !important;
   }
 
-  &__yaml-editor-header-shortcuts-link {
-    color: #0066cc;
-    text-decoration: none;
+  .monaco-editor .scrollbar.horizontal {
+    border-top: 0 !important;
+  }
+
+  .monaco-editor .margin-view-overlays {
+    border: 0 !important;
+  }
 
-    &:hover {
-      text-decoration: underline;
-    }
+  .monaco-editor .glyph-margin {
+    border: 0 !important;
   }
 
-  &__yaml-editor-content {
-    padding: 16px;
-    max-height: 600px;
-    overflow-y: auto;
+  .monaco-editor .monaco-editor-background:focus {
+    outline: none !important;
+    border: 0 !important;
+  }
+
+  .monaco-editor .scrollbar .corner:hover {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .monaco-editor .scrollbar .slider.active:hover {
+    border: 0 !important;
+  }
 
-    pre {
-      margin: 0;
-      color: #ffffff;
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 12px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
+  .monaco-editor .scrollbar .slider::before,
+  .monaco-editor .scrollbar .slider::after {
+    display: none !important;
   }
 }

src/gitops/components/appset/YAMLTab.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ApplicationSetKind } from '../../models/ApplicationSetModel';
 import { ResourceYAMLEditor } from '@openshift-console/dynamic-plugin-sdk';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+import './YAMLTab.scss';
 
 type YAMLTabProps = {
   obj?: ApplicationSetKind;
@@ -12,7 +14,11 @@ const YAMLTab: React.FC<YAMLTabProps> = ({ obj }) => {
   if (!obj) return null;
 
   return (
-    <ResourceYAMLEditor initialResource={obj} header={obj?.kind} />
+    <div className="yaml-tab-container">
+      <React.Suspense fallback={<Bullseye><Spinner size="xl" /></Bullseye>}>
+        <ResourceYAMLEditor initialResource={obj} />
+      </React.Suspense>
+    </div>
   );
 };