[UI] Add edit option to resources that have create template in annota…

…tion (#2846) * Add edit option to resources that have create template in anno - WIP * Move edit option to resource details page * Refactor edit in details * Extract custom actions component * Remove edit from core details table * Remove edit from core details table - updated * Fix some errors * Add custom actions to the details page * Add custom actions to the details page - updated * Add actions type and move edit button * Add actions type and move edit button - updated * Lint
weaveworks · Oct 12, 2022 · e83b2ce · e83b2ce
1 parent d77bf3b
commit e83b2ce
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 9 deletions.
diff --git a/ui/components/AutomationDetail.tsx b/ui/components/AutomationDetail.tsx
@@ -8,6 +8,7 @@ import { useToggleSuspend } from "../hooks/flux";
 import { Kind } from "../lib/api/core/types.pb";
 import { Automation } from "../lib/objects";
 import Button from "./Button";
+import CustomActions from "./CustomActions";
 import DependenciesView from "./DependenciesView";
 import EventsTable from "./EventsTable";
 import Flex from "./Flex";
@@ -28,9 +29,16 @@ type Props = {
   className?: string;
   info: InfoField[];
   customTabs?: Array<routeTab>;
+  customActions?: JSX.Element[];
 };
 
-function AutomationDetail({ automation, className, info, customTabs }: Props) {
+function AutomationDetail({
+  automation,
+  className,
+  info,
+  customTabs,
+  customActions,
+}: Props) {
   const { path } = useRouteMatch();
   const { setNodeYaml, appState } = React.useContext(AppContext);
   const nodeYaml = appState.nodeYaml;
@@ -152,6 +160,7 @@ function AutomationDetail({ automation, className, info, customTabs }: Props) {
         >
           {automation.suspended ? "Resume" : "Suspend"}
         </Button>
+        <CustomActions actions={customActions} />
       </Flex>
 
       <SubRouterTabs rootPath={`${path}/details`}>

diff --git a/ui/components/BucketDetail.tsx b/ui/components/BucketDetail.tsx
@@ -11,9 +11,10 @@ import { InfoField } from "./InfoList";
 type Props = {
   className?: string;
   bucket: Bucket;
+  customActions?: JSX.Element[];
 };
 
-function BucketDetail({ className, bucket }: Props) {
+function BucketDetail({ className, bucket, customActions }: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -32,6 +33,7 @@ function BucketDetail({ className, bucket }: Props) {
       className={className}
       type={Kind.Bucket}
       source={bucket}
+      customActions={customActions}
       info={[
         ["Type", Kind.Bucket],
         ["Endpoint", bucket.endpoint],

diff --git a/ui/components/CustomActions.tsx b/ui/components/CustomActions.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import Spacer from "./Spacer";
+
+function CustomActions({ actions }: { actions: JSX.Element[] }) {
+  return actions?.length > 0 ? (
+    <>
+      {actions?.map((action, index) => (
+        <React.Fragment key={index}>
+          <Spacer padding="xs" />
+          {action}
+        </React.Fragment>
+      ))}
+    </>
+  ) : null;
+}
+
+export default CustomActions;
diff --git a/ui/components/GitRepositoryDetail.tsx b/ui/components/GitRepositoryDetail.tsx
@@ -12,9 +12,14 @@ import { InfoField } from "./InfoList";
 type Props = {
   className?: string;
   gitRepository: GitRepository;
+  customActions?: JSX.Element[];
 };
 
-function GitRepositoryDetail({ className, gitRepository }: Props) {
+function GitRepositoryDetail({
+  className,
+  gitRepository,
+  customActions,
+}: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -32,6 +37,7 @@ function GitRepositoryDetail({ className, gitRepository }: Props) {
       className={className}
       type={Kind.GitRepository}
       source={gitRepository}
+      customActions={customActions}
       info={[
         ["Type", Kind.GitRepository],
         [

diff --git a/ui/components/HelmChartDetail.tsx b/ui/components/HelmChartDetail.tsx
@@ -11,9 +11,10 @@ import { InfoField } from "./InfoList";
 type Props = {
   className?: string;
   helmChart: HelmChart;
+  customActions?: JSX.Element[];
 };
 
-function HelmChartDetail({ className, helmChart }: Props) {
+function HelmChartDetail({ className, helmChart, customActions }: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -31,6 +32,7 @@ function HelmChartDetail({ className, helmChart }: Props) {
       type={Kind.HelmChart}
       className={className}
       source={helmChart}
+      customActions={customActions}
       info={[
         ["Type", Kind.HelmChart],
         ["Chart", helmChart.chart],

diff --git a/ui/components/HelmReleaseDetail.tsx b/ui/components/HelmReleaseDetail.tsx
@@ -18,6 +18,7 @@ type Props = {
   helmRelease?: HelmRelease;
   className?: string;
   customTabs?: Array<routeTab>;
+  customActions?: JSX.Element[];
 };
 
 function helmChartLink(helmRelease: HelmRelease) {
@@ -49,7 +50,12 @@ function helmChartLink(helmRelease: HelmRelease) {
   );
 }
 
-function HelmReleaseDetail({ helmRelease, className, customTabs }: Props) {
+function HelmReleaseDetail({
+  helmRelease,
+  className,
+  customTabs,
+  customActions,
+}: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -67,6 +73,7 @@ function HelmReleaseDetail({ helmRelease, className, customTabs }: Props) {
       className={className}
       automation={helmRelease}
       customTabs={customTabs}
+      customActions={customActions}
       info={[
         ["Source", helmChartLink(helmRelease)],
         ["Chart", helmRelease?.helmChart.chart],

diff --git a/ui/components/HelmRepositoryDetail.tsx b/ui/components/HelmRepositoryDetail.tsx
@@ -12,9 +12,14 @@ import Timestamp from "./Timestamp";
 type Props = {
   className?: string;
   helmRepository: HelmRepository;
+  customActions?: JSX.Element[];
 };
 
-function HelmRepositoryDetail({ className, helmRepository }: Props) {
+function HelmRepositoryDetail({
+  className,
+  helmRepository,
+  customActions,
+}: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -32,6 +37,7 @@ function HelmRepositoryDetail({ className, helmRepository }: Props) {
       className={className}
       type={Kind.HelmRepository}
       source={helmRepository}
+      customActions={customActions}
       info={[
         ["Type", Kind.HelmRepository],
         ["Repository Type", helmRepository.repositoryType.toLowerCase()],

diff --git a/ui/components/KustomizationDetail.tsx b/ui/components/KustomizationDetail.tsx
@@ -21,9 +21,15 @@ type Props = {
   kustomization?: Kustomization;
   className?: string;
   customTabs?: Array<routeTab>;
+  customActions?: JSX.Element[];
 };
 
-function KustomizationDetail({ kustomization, className, customTabs }: Props) {
+function KustomizationDetail({
+  kustomization,
+  className,
+  customTabs,
+  customActions,
+}: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -42,6 +48,7 @@ function KustomizationDetail({ kustomization, className, customTabs }: Props) {
       className={className}
       customTabs={customTabs}
       automation={kustomization}
+      customActions={customActions}
       info={[
         [
           "Source",

diff --git a/ui/components/OCIRepositoryDetail.tsx b/ui/components/OCIRepositoryDetail.tsx
@@ -8,12 +8,18 @@ import Interval from "./Interval";
 import Link from "./Link";
 import SourceDetail from "./SourceDetail";
 import Timestamp from "./Timestamp";
+
 type Props = {
   className?: string;
   ociRepository: OCIRepository;
+  customActions?: JSX.Element[];
 };
 
-function OCIRepositoryDetail({ className, ociRepository }: Props) {
+function OCIRepositoryDetail({
+  className,
+  ociRepository,
+  customActions,
+}: Props) {
   const { data } = useFeatureFlags();
   const flags = data?.flags || {};
 
@@ -31,6 +37,7 @@ function OCIRepositoryDetail({ className, ociRepository }: Props) {
       className={className}
       type={Kind.OCIRepository}
       source={ociRepository}
+      customActions={customActions}
       info={[
         ["Type", Kind.OCIRepository],
         ["URL", <Link href={ociRepository.url}>{ociRepository.url}</Link>],

diff --git a/ui/components/SourceDetail.tsx b/ui/components/SourceDetail.tsx
@@ -9,6 +9,7 @@ import { HelmRelease, Source } from "../lib/objects";
 import { getSourceRefForAutomation } from "../lib/utils";
 import AutomationsTable from "./AutomationsTable";
 import Button from "./Button";
+import CustomActions from "./CustomActions";
 import EventsTable from "./EventsTable";
 import Flex from "./Flex";
 import InfoList, { InfoField } from "./InfoList";
@@ -27,9 +28,10 @@ type Props = {
   children?: JSX.Element;
   source: Source;
   info: InfoField[];
+  customActions?: JSX.Element[];
 };
 
-function SourceDetail({ className, source, info, type }: Props) {
+function SourceDetail({ className, source, info, type, customActions }: Props) {
   const { data: automations, isLoading: automationsLoading } =
     useListAutomations();
   const { path } = useRouteMatch();
@@ -107,6 +109,7 @@ function SourceDetail({ className, source, info, type }: Props) {
         >
           {source?.suspended ? "Resume" : "Suspend"}
         </Button>
+        <CustomActions actions={customActions} />
       </Flex>
 
       <SubRouterTabs rootPath={`${path}/details`}>