Adding Preview PR to create secret Page

ui-cra/src/components/Secrets/Create/PrviewPRModal.tsx

@@ -0,0 +1,67 @@
+import { Button, LoadingPage, theme } from '@weaveworks/weave-gitops';
+import { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import useNotifications from '../../../contexts/Notifications';
+import { SecretPRPreview } from '../../../types/custom';
+import { renderKustomization } from '../../Applications/utils';
+import Preview from '../../Templates/Form/Partials/Preview';
+const { small } = theme.spacing;
+const PreviewPRSection = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: ${small};
+`;
+
+export const PrviewPRModal = ({ formData, getClusterAutomations }: any) => {
+  const [openPreview, setOpenPreview] = useState(false);
+  const [previewLoading, setPreviewLoading] = useState<boolean>(false);
+  const [PRPreview, setPRPreview] = useState<SecretPRPreview | null>(null);
+  const { setNotifications } = useNotifications();
+
+  const handlePRPreview = useCallback(() => {
+    setPreviewLoading(true);
+    return renderKustomization({ clusterAutomations: getClusterAutomations() })
+      .then(data => {
+        setOpenPreview(true);
+        setPRPreview(data);
+      })
+      .catch(err => {
+        setNotifications([
+          {
+            message: { text: err.message },
+            severity: 'error',
+            display: 'bottom',
+          },
+        ]);
+      })
+      .finally(() => setPreviewLoading(false));
+  }, [
+    formData,
+    getClusterAutomations,
+    setOpenPreview,
+    setPRPreview,
+    setPreviewLoading,
+    setNotifications,
+  ]);
+
+  return (
+    <PreviewPRSection>
+      {previewLoading ? (
+        <LoadingPage className="preview-loading" />
+      ) : (
+        <div className="preview-cta">
+          <Button onClick={() => handlePRPreview()}>PREVIEW PR</Button>
+        </div>
+      )}
+      {openPreview && PRPreview ? (
+        <Preview
+          context="secret"
+          openPreview={openPreview}
+          setOpenPreview={setOpenPreview}
+          PRPreview={PRPreview}
+          sourceType={formData.source_type}
+        />
+      ) : null}
+    </PreviewPRSection>
+  );
+};

ui-cra/src/components/Secrets/Create/index.tsx

@@ -1,44 +1,45 @@
 import { MenuItem } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core/styles';
+import {
+  Button,
+  GitRepository,
+  Link,
+  LoadingPage,
+  theme,
+  useListSources
+} from '@weaveworks/weave-gitops';
+import { PageRoute } from '@weaveworks/weave-gitops/ui/lib/types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import {
   ClusterAutomation,
   ExternalSecretStore,
-  GitopsCluster,
+  GitopsCluster
 } from '../../../cluster-services/cluster_services.pb';
+import CallbackStateContextProvider from '../../../contexts/GitAuth/CallbackStateContext';
+import useNotifications from '../../../contexts/Notifications';
+import { localEEMuiTheme } from '../../../muiTheme';
 import { useCallbackState } from '../../../utils/callback-state';
 import { Input, Select, validateFormData } from '../../../utils/form';
-import useNotifications from '../../../contexts/Notifications';
 import { Routes } from '../../../utils/nav';
-import { ContentWrapper } from '../../Layout/ContentWrapper';
-import { PageTemplate } from '../../Layout/PageTemplate';
-import GitOps from '../../Templates/Form/Partials/GitOps';
-import { ThemeProvider } from '@material-ui/core/styles';
-import { localEEMuiTheme } from '../../../muiTheme';
-import { useHistory } from 'react-router-dom';
-import {
-  Button,
-  Link,
-  LoadingPage,
-  theme,
-  GitRepository,
-  useListSources,
-} from '@weaveworks/weave-gitops';
 import { isUnauthenticated, removeToken } from '../../../utils/request';
 import {
   CreateDeploymentObjects,
-  useClustersWithSources,
+  useClustersWithSources
 } from '../../Applications/utils';
+import { getGitRepos } from '../../Clusters';
+import { clearCallbackState, getProviderToken } from '../../GitAuth/utils';
+import { ContentWrapper } from '../../Layout/ContentWrapper';
+import { PageTemplate } from '../../Layout/PageTemplate';
+import { GitRepositoryEnriched } from '../../Templates/Form';
+import GitOps from '../../Templates/Form/Partials/GitOps';
 import {
   getInitialGitRepo,
-  getRepositoryUrl,
+  getRepositoryUrl
 } from '../../Templates/Form/utils';
-import { GitRepositoryEnriched } from '../../Templates/Form';
-import { getGitRepos } from '../../Clusters';
-import CallbackStateContextProvider from '../../../contexts/GitAuth/CallbackStateContext';
-import { PageRoute } from '@weaveworks/weave-gitops/ui/lib/types';
-import { clearCallbackState, getProviderToken } from '../../GitAuth/utils';
 import { SelectSecretStore } from './Form/Partials/SelectSecretStore';
+import { PrviewPRModal } from './PrviewPRModal';
 
 const { medium, large } = theme.spacing;
 const { neutral20, neutral10 } = theme.colors;
@@ -424,6 +425,10 @@ const CreateSecret = () => {
                   }
                 />
               </div>
+              <PrviewPRModal
+                formData={formData}
+                getClusterAutomations={getClusterAutomations}
+              />
               <GitOps
                 formData={formData}
                 setFormData={setFormData}

ui-cra/src/components/Templates/Form/Partials/Preview.tsx

@@ -10,7 +10,11 @@ import {
   Dialog,
   Box,
 } from '@material-ui/core';
-import { AppPRPreview, ClusterPRPreview } from '../../../../types/custom';
+import {
+  AppPRPreview,
+  ClusterPRPreview,
+  SecretPRPreview,
+} from '../../../../types/custom';
 import {
   CommitFile,
   RenderTemplateResponse,
@@ -88,10 +92,10 @@ const Preview: FC<{
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue);
   };
-
-  const tabsContent: Array<TabContent> =
-    context === 'app'
-      ? [
+  const getTabsContent = (context: string) => {
+    switch (context) {
+      case 'app':
+        return [
           {
             tabName: 'Kustomizations',
             files: PRPreview.kustomizationFiles,
@@ -100,8 +104,16 @@ const Preview: FC<{
             tabName: 'Helm Releases',
             files: (PRPreview as AppPRPreview).helmReleaseFiles,
           },
-        ]
-      : [
+        ];
+      case 'secret':
+        return [
+          {
+            tabName: 'External Secret',
+            files: (PRPreview as SecretPRPreview).externalSecretsFiles,
+          },
+        ];
+      default:
+        return [
           {
             tabName: 'Resource Definition',
             files: (PRPreview as ClusterPRPreview).renderedTemplate,
@@ -115,6 +127,9 @@ const Preview: FC<{
             files: PRPreview.kustomizationFiles,
           },
         ];
+    }
+  };
+  const tabsContent: Array<TabContent> = getTabsContent(context || '');
 
   const downloadFile = () => {
     const zip = new JSZip();

ui-cra/src/types/custom.ts

@@ -162,3 +162,6 @@ export interface AppPRPreview {
   kustomizationFiles: { path: string; content: string }[];
   helmReleaseFiles: { path: string; content: string }[];
 }
+export interface SecretPRPreview {
+  externalSecretsFiles: { path: string; content: string }[];
+}