From fc4bfe6d75ebc573ec51b951a9b91dfb39bf480b Mon Sep 17 00:00:00 2001
From: Joshua Israel <65822698+joshri@users.noreply.github.com>
Date: Wed, 25 Oct 2023 10:33:15 -0400
Subject: [PATCH] update dependencies msg with links (#4099)

---
 ui/components/DependenciesView.tsx | 70 +++++++++++++-----------------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/ui/components/DependenciesView.tsx b/ui/components/DependenciesView.tsx
index 8af30ddd31..4f95d2fdc7 100644
--- a/ui/components/DependenciesView.tsx
+++ b/ui/components/DependenciesView.tsx
@@ -6,30 +6,12 @@ import { getGraphNodes } from "../lib/dependencies";
 import { Automation, FluxObjectNode, FluxObjectNodesMap } from "../lib/objects";
 import DagGraph from "./DagGraph";
 import Flex from "./Flex";
+import Link from "./Link";
 import MessageBox from "./MessageBox";
 import RequestStateHandler from "./RequestStateHandler";
 import Spacer from "./Spacer";
 import Text from "./Text";
 
-const NoDependenciesMessage = styled(MessageBox)`
-  & {
-    h2 {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    p {
-      margin-top: 0;
-      margin-bottom: 0;
-      font-size: 16px;
-      line-height: 20px;
-    }
-  }
-`;
-
-const Heading = Text.withComponent("h2");
-const Paragraph = Text.withComponent("p");
-
 type DependenciesViewProps = {
   className?: string;
   automation?: Automation;
@@ -90,28 +72,38 @@ function DependenciesView({ className, automation }: DependenciesViewProps) {
       ) : (
         <Flex className={className} wide tall column align>
           <Spacer padding="xl" />
-          <NoDependenciesMessage>
-            <Heading semiBold size="large">
+          <MessageBox gap="12">
+            <Text semiBold size="large">
               No Dependencies
-            </Heading>
-            <Spacer padding="xs" />
-            <Paragraph>
-              There are no dependencies set up for your kustomizations or helm
-              releases at this time. You can set them up using the dependsOn
-              field on the kustomization or helm release object.
-            </Paragraph>
-            <Spacer padding="xs" />
-            <Heading semiBold size="large">
+            </Text>
+            <Text>
+              Currently no dependencies are set up for your Kustomizations or
+              HelmReleases. You can set them up using the dependsOn field on the{" "}
+              <Link
+                newTab
+                href="https://fluxcd.io/flux/components/kustomize/kustomizations/#dependencies"
+              >
+                Kustomization
+              </Link>{" "}
+              or{" "}
+              <Link
+                newTab
+                href="https://fluxcd.io/flux/components/helm/helmreleases/#helmrelease-dependencies"
+              >
+                Helm Release
+              </Link>{" "}
+              object.
+            </Text>
+            <Text semiBold size="large">
               What are dependencies for?
-            </Heading>
-            <Spacer padding="xs" />
-            <Paragraph>
-              Dependencies allow you to relate different kustomizations and helm
-              releases, as well as specifying an order in which your resources
-              should be started. For example, you can wait for a database to
-              report as 'Ready' before attempting to deploy other services.
-            </Paragraph>
-          </NoDependenciesMessage>
+            </Text>
+            <Text>
+              Dependencies allow you to relate different Kustomizations and Helm
+              Releases and to specify an order in which your resources should be
+              started. For example, you can wait for a database to report as
+              'Ready' before attempting to deploy other services.
+            </Text>
+          </MessageBox>
           <Spacer padding="xl" />
         </Flex>
       )}