Show an Argo CD Application Set as Details page in Dev Console

console-extensions.json

@@ -388,5 +388,23 @@
             "$codeRef": "yamlApplicationTemplates.defaultApplicationSetYamlTemplate"
         }
     }
+  },
+  {
+    "type": "console.page/resource/details",
+    "flags": {
+        "required": [
+            "APPLICATIONSET"
+        ]
+    },
+    "properties": {
+        "model": {
+            "group": "argoproj.io",
+            "kind": "ApplicationSet",
+            "version": "v1alpha1"
+        },
+        "component": {
+            "$codeRef": "ApplicationSetDetailsPage"
+        }
+    }
   }
 ]

plugin-metadata.ts

@@ -15,6 +15,7 @@ const metadata: ConsolePluginBuildMetadata = {
     "topology": "./components/topology",
     ApplicationList: "./gitops/components/application/ApplicationListTab.tsx",
     ApplicationSetList: "./gitops/components/application/ApplicationSetListTab.tsx",
+    ApplicationSetDetailsPage: "./gitops/components/application/ApplicationSetDetailsPage.tsx",
     yamlApplicationTemplates: "./gitops/components/application/templates/index.ts"
   }
 };

src/gitops/components/application/ApplicationSetDetailsPage.scss

@@ -0,0 +1,219 @@
+.application-set-details-page {
+  &__main-section {
+    // PatternFly page main section styles
+  }
+
+  &__body {
+    // PatternFly flex layout styles
+  }
+
+  &__pane-body {
+    // Console pane body styles
+  }
+
+  &__grid {
+    // PatternFly grid styles
+  }
+
+  &__grid-item {
+    // PatternFly grid item styles
+  }
+
+  &__header {
+    margin-bottom: 24px;
+    padding-left: 24px;
+    padding-top: 24px;
+
+    &-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+  }
+
+  &__content {
+    padding-left: 24px;
+  }
+
+  &__conditions {
+    margin-top: 32px;
+
+    &-title {
+      font-weight: 700;
+      font-size: 24px;
+      margin-bottom: 20px;
+      margin-top: 8px;
+    }
+
+    &-table {
+      width: 100%;
+      border-top: 1px solid #393F44;
+      margin-bottom: 0;
+
+      &-header {
+        display: flex;
+        font-weight: 600;
+        font-size: 16px;
+        padding: 16px 0 8px 0;
+
+        &-cell {
+          text-align: left;
+
+          &--type {
+            flex: 2;
+            padding-left: 0;
+          }
+
+          &--status {
+            flex: 1;
+          }
+
+          &--updated {
+            flex: 2;
+          }
+
+          &--reason {
+            flex: 2;
+          }
+
+          &--message {
+            flex: 4;
+          }
+        }
+      }
+
+      &-row {
+        display: flex;
+        font-size: 15px;
+        padding: 16px 0;
+        align-items: flex-start;
+        border-top: 1px solid #393F44;
+
+        &:first-child {
+          border-top: none;
+        }
+
+        &-cell {
+          text-align: left;
+
+          &--type {
+            flex: 2;
+            padding-left: 0;
+          }
+
+          &--status {
+            flex: 1;
+          }
+
+          &--updated {
+            flex: 2;
+            display: flex;
+            align-items: center;
+          }
+
+          &--reason {
+            flex: 2;
+          }
+
+          &--message {
+            flex: 4;
+          }
+        }
+      }
+    }
+  }
+
+  &__generators {
+    &-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    &-item {
+      border: 1px solid #393F44;
+      border-radius: 8px;
+      padding: 16px;
+      background-color: #212427;
+
+      &-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+
+        &-icon {
+          width: 24px;
+          height: 24px;
+          background-color: #73bcf7;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 8px;
+          font-size: 12px;
+          font-weight: bold;
+          color: #003a70;
+        }
+
+        &-title {
+          font-weight: 600;
+          font-size: 16px;
+        }
+      }
+
+      &-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &-row {
+          display: flex;
+          align-items: center;
+
+          &-label {
+            font-weight: 500;
+            min-width: 80px;
+            color: #8a8d90;
+          }
+
+          &-value {
+            color: #73bcf7;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+  &__yaml-editor {
+    &-header {
+      &-buttons {
+        // YAML editor header buttons styles
+      }
+
+      &-shortcuts {
+        // YAML editor shortcuts styles
+
+        &-link {
+          // YAML editor shortcuts link styles
+        }
+      }
+    }
+
+    &-content {
+      background: #1e1e1e;
+      color: #d4d4d4;
+      font-family: monospace;
+      font-size: 14px;
+      border-radius: 4px;
+      padding: 0;
+
+      pre {
+        margin: 0;
+        padding: 16px;
+        overflow: auto;
+      }
+    }
+  }
+} 

src/gitops/components/application/ApplicationSetDetailsPage.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom-v5-compat';
+import AppSetNavPage from '../appset/AppSetNavPage';
+
+const ApplicationSetDetailsPage: React.FC = () => {
+  const { name, ns } = useParams<{ name: string; ns: string }>();
+
+  return (
+    <AppSetNavPage 
+      name={name} 
+      namespace={ns} 
+      kind="ApplicationSet" 
+    />
+  );
+};
+
+export default ApplicationSetDetailsPage;

src/gitops/components/application/application-details-title.scss

@@ -0,0 +1,73 @@
+// Application Details Title Styles
+.co-resource-item__resource-name {
+  font-size: var(--pf-v6-global--font-size--2xl);
+  font-weight: var(--pf-v6-global--font-weight--bold);
+  color: var(--pf-v6-global--Color--100);
+}
+
+.co-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-v6-global--spacer--sm);
+}
+
+// Breadcrumb styles
+.pf-c-breadcrumb.co-breadcrumb {
+  padding: var(--pf-v6-global--spacer--md) var(--pf-v6-global--spacer--lg);
+  background-color: var(--pf-v6-global--BackgroundColor--100);
+  border-bottom: 1px solid var(--pf-v6-global--BorderColor--100);
+}
+
+// Ensure AS icon matches ApplicationSet list page color
+.co-m-resource-icon {
+  &.co-m-resource-icon--lg {
+    // Force the ApplicationSet color from console-extensions.json
+    background-color: #E9654B !important;
+    color: white !important;
+  }
+}
+
+// Ensure NS badge is green
+.pf-v6-c-badge {
+  &.pf-m-green {
+    background-color: var(--pf-v6-global--success-color--100) !important;
+    color: var(--pf-v6-global--Color--100) !important;
+  }
+}
+
+// Labels container styling - ensure it's visible and vertical
+.labels-container {
+  background-color: var(--pf-v6-global--BackgroundColor--200) !important;
+  border: 1px solid var(--pf-v6-global--BorderColor--200) !important;
+  border-radius: var(--pf-v6-global--BorderRadius--sm) !important;
+  padding: var(--pf-v6-global--spacer--md) !important;
+  min-height: 60px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--pf-v6-global--spacer--sm) !important;
+  margin-top: var(--pf-v6-global--spacer--sm) !important;
+}
+
+// Labels styling - force vertical layout
+.labels-container .pf-v6-c-label-group {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--pf-v6-global--spacer--sm) !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+.labels-container .pf-v6-c-label-group .pf-v6-c-label {
+  display: inline-flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+  font-size: var(--pf-v6-global--font-size--sm) !important;
+  font-weight: var(--pf-v6-global--font-weight--normal) !important;
+  line-height: 1.2 !important;
+  padding: var(--pf-v6-global--spacer--xs) var(--pf-v6-global--spacer--sm) !important;
+  border-radius: var(--pf-v6-global--BorderRadius--sm) !important;
+  background-color: var(--pf-v6-global--BackgroundColor--300) !important;
+  color: var(--pf-v6-global--Color--100) !important;
+  border: 1px solid var(--pf-v6-global--BorderColor--300) !important;
+  width: fit-content !important;
+}