Modify hook on verified status check (#3974)

* modify hook on verified status check * extra variable * remove export into SourcesTable * refactoring to one component * edit comment explaining verification check
weaveworks · Aug 31, 2023 · 8564a2f · 8564a2f
1 parent d28b464
commit 8564a2f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 39 deletions.
diff --git a/ui/components/AutomationsTable.tsx b/ui/components/AutomationsTable.tsx
@@ -128,7 +128,9 @@ function AutomationsTable({
     {
       label: "Verified",
       value: (a: Automation) => (
-        <SourceIsVerifiedStatus sourceRef={getSourceRefForAutomation(a)} />
+        <SourceIsVerifiedStatus
+          sourceRef={getSourceRefForAutomation(a) || {}}
+        />
       ),
     },
     {

diff --git a/ui/components/SourcesTable.tsx b/ui/components/SourcesTable.tsx
@@ -11,8 +11,8 @@ import {
   Source,
 } from "../lib/objects";
 import { showInterval } from "../lib/time";
-import { convertGitURLToGitProvider, statusSortHelper } from "../lib/utils";
 import { SearchedNamespaces } from "../lib/types";
+import { convertGitURLToGitProvider, statusSortHelper } from "../lib/utils";
 import DataTable, {
   Field,
   filterByStatusCallback,
@@ -21,7 +21,7 @@ import DataTable, {
 import KubeStatusIndicator, { computeMessage } from "./KubeStatusIndicator";
 import Link from "./Link";
 import Timestamp from "./Timestamp";
-import { VerifiableSource, VerifiedStatus } from "./VerifiedStatus";
+import { SourceIsVerifiedStatus } from "./VerifiedStatus";
 
 type Props = {
   className?: string;
@@ -74,7 +74,7 @@ function SourcesTable({ className, sources, searchedNamespaces }: Props) {
     { label: "Namespace", value: "namespace" },
     {
       label: "Verified",
-      value: (s: VerifiableSource) => <VerifiedStatus source={s} />,
+      value: (s: Source) => <SourceIsVerifiedStatus source={s} />,
     },
     ...(isFlagEnabled("WEAVE_GITOPS_FEATURE_TENANCY")
       ? [{ label: "Tenant", value: "tenant" }]

diff --git a/ui/components/VerifiedStatus.tsx b/ui/components/VerifiedStatus.tsx
@@ -1,14 +1,12 @@
-import React from "react";
 import { Tooltip } from "@material-ui/core";
-import { Condition, ObjectRef } from "../lib/api/core/types.pb";
-import { GitRepository, OCIRepository } from "../lib/objects";
-import { useListSources } from "../hooks/sources";
+import React from "react";
+import { useGetObject } from "../hooks/objects";
+import { Condition, Kind, ObjectRef } from "../lib/api/core/types.pb";
+import { GitRepository, OCIRepository, Source } from "../lib/objects";
+import Flex from "./Flex";
 import Icon, { IconType } from "./Icon";
 
-export interface VerifiableSource {
-  isVerifiable: boolean;
-  conditions: Condition[];
-}
+type VerifiableSource = GitRepository | OCIRepository;
 
 const getVerifiedStatusColor = (status?: string) => {
   let color;
@@ -23,17 +21,25 @@ const getVerifiedStatusColor = (status?: string) => {
 };
 
 export const findVerificationCondition = (
-  a: VerifiableSource
+  a: VerifiableSource | undefined
 ): Condition | undefined =>
   a?.conditions?.find((condition) => condition.type === "SourceVerified");
 
-export const VerifiedStatus = ({
+const checkVerifiable = (sourceRef: ObjectRef): boolean => {
+  //guard against an undefined or non-verifiable obj (as of right now anything that's not a git or oci repo)
+  const { name, namespace, kind } = sourceRef;
+  const undefinedRef = !name || !namespace || !kind;
+  return (
+    (kind === Kind.GitRepository || kind === Kind.OCIRepository) &&
+    !undefinedRef
+  );
+};
+
+const VerifiedStatus = ({
   source,
 }: {
-  source: VerifiableSource;
-}): JSX.Element | null => {
-  if (!source.isVerifiable) return null;
-
+  source?: VerifiableSource;
+}): JSX.Element => {
   const condition = findVerificationCondition(source);
   const color = getVerifiedStatusColor(condition?.status);
 
@@ -46,27 +52,33 @@ export const VerifiedStatus = ({
   );
 };
 
-export const SourceIsVerifiedStatus: React.FC<{ sourceRef: ObjectRef }> = ({
-  sourceRef,
-}): JSX.Element | null => {
-  const { data: sources } = useListSources();
-  const verifiableSources = sources?.result.filter(
-    (source: GitRepository | OCIRepository) => source.isVerifiable
-  );
-  const resourceSource = verifiableSources?.find(
-    (source) => sourceRef?.name === source.name
-  ) as GitRepository | OCIRepository | undefined;
-
-  if (!resourceSource) return null;
+export const SourceIsVerifiedStatus: React.FC<{
+  sourceRef?: ObjectRef;
+  source?: Source;
+}> = ({ sourceRef, source }): JSX.Element => {
+  const isVerifiable = source
+    ? checkVerifiable({
+        name: source.name,
+        namespace: source.namespace,
+        clusterName: source.clusterName,
+        kind: source?.type,
+      })
+    : checkVerifiable(sourceRef || {});
+  if (!isVerifiable) return <Flex>-</Flex>;
 
-  const condition = findVerificationCondition(resourceSource);
-  const color = getVerifiedStatusColor(condition?.status);
-
-  return (
-    <Tooltip title={condition?.message || "pending verification"}>
-      <div>
-        <Icon type={IconType.VerifiedUser} color={color} size="base" />
-      </div>
-    </Tooltip>
+  if (source) return <VerifiedStatus source={source as VerifiableSource} />;
+  const {
+    name = "",
+    namespace = "",
+    kind = "",
+    clusterName = "",
+  } = sourceRef || {};
+  const { data: verifiable } = useGetObject<VerifiableSource>(
+    name,
+    namespace,
+    Kind[kind],
+    clusterName
   );
+
+  return <VerifiedStatus source={verifiable} />;
 };