[UI] Routes & layout fixes for CORE resources (#686)

* run install again

* WG357 Kubeconfig name

* Update dev and release instructions

* WG645 Routes WIP

* Fix routes and layouts for CORE resources

* Fix routes and layouts for CORE resources - updated

* Fix routes and layouts for CORE resources - updated2

* Update ui-cra/src/components/Applications/HelmRelease.tsx

Co-authored-by: Simon <[email protected]>

* Implement PR feedback

* Implement PR feedback - 2

* Adds some missing rolebindings

- Whose absence was discovered while authoring this PR

* Rough hack to avoid rendering HelmRelease before we have data

- Core is a bit more "protective" over components, only rendering them
  if they are loaded and don't have an error

* Adds temporary loading/error page

Co-authored-by: Simon <[email protected]>

Author: AlinaGoaga

charts/mccp/templates/rbac/admin_role_bindings.yaml

@@ -30,7 +30,7 @@ roleRef:
 apiVersion: rbac.authorization.k8s.io/v1
 kind: RoleBinding
 metadata:
-  name: wego-admin-read-secrets
+  name: wego-admin-read-cluster-secrets
   namespace: {{ .Values.config.capi.clusters.namespace }}
 subjects:
 - kind: User
@@ -42,6 +42,20 @@ roleRef:
   apiGroup: rbac.authorization.k8s.io
 ---
 apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: wego-admin-read-release-namespace-secrets
+  namespace: {{ .Release.Namespace | quote }}
+subjects:
+- kind: User
+  name: "wego-admin"
+  apiGroup: rbac.authorization.k8s.io
+roleRef:
+  kind: ClusterRole
+  name: gitops-secrets-reader
+  apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
 kind: ClusterRoleBinding
 metadata:
   name: wego-admin-read-identities
@@ -66,4 +80,18 @@ roleRef:
   kind: ClusterRole
   name: gitops-policies-reader
   apiGroup: rbac.authorization.k8s.io
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: wego-admin-read-gitopsclusters
+  namespace: {{ .Values.config.capi.clusters.namespace }}
+subjects:
+- kind: User
+  name: "wego-admin"
+  apiGroup: rbac.authorization.k8s.io
+roleRef:
+  kind: ClusterRole
+  name: gitops-gitopsclusters-reader
+  apiGroup: rbac.authorization.k8s.io
 {{- end }}

charts/mccp/templates/rbac/user_roles.yaml

@@ -72,4 +72,13 @@ rules:
   - apiGroups: ["pac.weave.works"]
     resources: ["policies"]
     verbs: ["get", "list"]
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRole
+metadata:
+  name: gitops-gitopscluster-reader
+rules:
+- apiGroups: ["gitops.weave.works"]
+  resources: ["gitopsclusters"]
+  verbs: ["get", "watch", "list"]
 {{- end }}

ui-cra/src/components/Applications/Bucket.tsx

@@ -8,9 +8,9 @@ import { BucketDetail } from '@weaveworks/weave-gitops';
 type Props = {
   name: string;
   namespace: string;
-}
+};
 
-const WGApplicationsBucket: FC<Props> = ({ name, namespace }) => {
+const WGApplicationsBucket: FC<Props> = props => {
   const applicationsCount = useApplicationsCount();
 
   return (
@@ -24,11 +24,8 @@ const WGApplicationsBucket: FC<Props> = ({ name, namespace }) => {
           },
         ]}
       />
-      <ContentWrapper type="WG">
-        <BucketDetail
-          name={name}
-          namespace={namespace}
-        />
+      <ContentWrapper>
+        <BucketDetail {...props} />
       </ContentWrapper>
     </PageTemplate>
   );

ui-cra/src/components/Applications/GitRepository.tsx

@@ -10,7 +10,7 @@ type Props = {
   namespace: string;
 };
 
-const WGApplicationsGitRepository: FC<Props> = ({ name, namespace }) => {
+const WGApplicationsGitRepository: FC<Props> = props => {
   const applicationsCount = useApplicationsCount();
 
   return (
@@ -25,7 +25,7 @@ const WGApplicationsGitRepository: FC<Props> = ({ name, namespace }) => {
         ]}
       />
       <ContentWrapper>
-        <GitRepositoryDetail name={name} namespace={namespace} />
+        <GitRepositoryDetail {...props} />
       </ContentWrapper>
     </PageTemplate>
   );

ui-cra/src/components/Applications/HelmChart.tsx

@@ -8,9 +8,9 @@ import { HelmChartDetail } from '@weaveworks/weave-gitops';
 type Props = {
   name: string;
   namespace: string;
-}
+};
 
-const WGApplicationsHelmChart: FC<Props> = ({ name, namespace }) => {
+const WGApplicationsHelmChart: FC<Props> = props => {
   const applicationsCount = useApplicationsCount();
 
   return (
@@ -24,11 +24,8 @@ const WGApplicationsHelmChart: FC<Props> = ({ name, namespace }) => {
           },
         ]}
       />
-      <ContentWrapper type="WG">
-        <HelmChartDetail
-          name={name}
-          namespace={namespace}
-        />
+      <ContentWrapper>
+        <HelmChartDetail {...props} />
       </ContentWrapper>
     </PageTemplate>
   );

ui-cra/src/components/Applications/HelmRelease.tsx

@@ -3,17 +3,26 @@ import { PageTemplate } from '../Layout/PageTemplate';
 import { SectionHeader } from '../Layout/SectionHeader';
 import { ContentWrapper } from '../Layout/ContentWrapper';
 import { useApplicationsCount } from './utils';
-import { HelmReleaseDetail, useGetHelmRelease } from '@weaveworks/weave-gitops';
+import {
+  HelmReleaseDetail,
+  LoadingPage,
+  useGetHelmRelease,
+} from '@weaveworks/weave-gitops';
 
 type Props = {
   name: string;
   clusterName: string;
   namespace: string;
-}
+};
 
-const WGApplicationsBucket: FC<Props> = ({ name, clusterName }) => {
+const WGApplicationsHelmRelease: FC<Props> = props => {
   const applicationsCount = useApplicationsCount();
-  const { data } = useGetHelmRelease(name);
+  const { name, namespace, clusterName } = props;
+  const { data, isLoading, error } = useGetHelmRelease(
+    name,
+    namespace,
+    clusterName,
+  );
   const helmRelease = data?.helmRelease;
 
   return (
@@ -27,11 +36,15 @@ const WGApplicationsBucket: FC<Props> = ({ name, clusterName }) => {
           },
         ]}
       />
-      <ContentWrapper type="WG">
-        <HelmReleaseDetail helmRelease={helmRelease} clusterName={clusterName} name={name} />
+      <ContentWrapper>
+        {error && <h3>{error.message}</h3>}
+        {isLoading && <LoadingPage />}
+        {!error && !isLoading && (
+          <HelmReleaseDetail helmRelease={helmRelease} {...props} />
+        )}
       </ContentWrapper>
     </PageTemplate>
   );
 };
 
-export default WGApplicationsBucket;
+export default WGApplicationsHelmRelease;

ui-cra/src/components/Applications/HelmRepository.tsx

@@ -8,9 +8,9 @@ import { HelmRepositoryDetail } from '@weaveworks/weave-gitops';
 type Props = {
   name: string;
   namespace: string;
-}
+};
 
-const WGApplicationsHelmRepository: FC<Props> = ({ name, namespace }) => {
+const WGApplicationsHelmRepository: FC<Props> = props => {
   const applicationsCount = useApplicationsCount();
 
   return (
@@ -24,11 +24,8 @@ const WGApplicationsHelmRepository: FC<Props> = ({ name, namespace }) => {
           },
         ]}
       />
-      <ContentWrapper type="WG">
-        <HelmRepositoryDetail
-          name={name}
-          namespace={namespace}
-        />
+      <ContentWrapper>
+        <HelmRepositoryDetail {...props} />
       </ContentWrapper>
     </PageTemplate>
   );

ui-cra/src/components/ResponsiveDrawer.tsx

@@ -268,23 +268,35 @@ const App = () => {
               path={V2Routes.GitRepo}
             />
             <Route
-              component={withSearchParams(WGApplicationsHelmRepository)}
-              exact
+              component={withSearchParams((props: any) => (
+                <CoreWrapper>
+                  <WGApplicationsHelmRepository {...props} />
+                </CoreWrapper>
+              ))}
               path={V2Routes.HelmRepo}
             />
             <Route
-              component={withSearchParams(WGApplicationsBucket)}
-              exact
+              component={withSearchParams((props: any) => (
+                <CoreWrapper>
+                  <WGApplicationsBucket {...props} />
+                </CoreWrapper>
+              ))}
               path={V2Routes.Bucket}
             />
             <Route
-              component={withSearchParams(WGApplicationsHelmRelease)}
-              exact
+              component={withSearchParams((props: any) => (
+                <CoreWrapper>
+                  <WGApplicationsHelmRelease {...props} />
+                </CoreWrapper>
+              ))}
               path={V2Routes.HelmRelease}
             />
             <Route
-              component={withSearchParams(WGApplicationsHelmChart)}
-              exact
+              component={withSearchParams((props: any) => (
+                <CoreWrapper>
+                  <WGApplicationsHelmChart {...props} />
+                </CoreWrapper>
+              ))}
               path={V2Routes.HelmChart}
             />
             <Route