Verified sources (#3887)

* Show verified source status in Automation and Sources - WIP

* Update type of source being sent to VerifiedStatus

* Update colors in ver source with theme colors and return null if automation doesnt have a verified source

* Verified status tooltip shows condition message and bring back contributing file

CONTRIBUTING.md → CONTRIBUTING.MD

@@ -26,4 +26,4 @@ In general, we will merge a PR once at least one maintainer has endorsed it. For
 
 Limit the subject to 50 characters and write as the continuation of the sentence "If applied, this commit will ..."
 Explain what and why in the body, if more than a trivial change; wrap it at 72 characters.
-The [following article](https://cbea.ms/git-commit/#seven-rules) has some more helpful advice on documenting your work.
+The [following article](https://cbea.ms/git-commit/#seven-rules) has some more helpful advice on documenting your work.

ui/components/AutomationsTable.tsx

@@ -16,6 +16,7 @@ import KubeStatusIndicator, { computeMessage } from "./KubeStatusIndicator";
 import Link from "./Link";
 import SourceLink from "./SourceLink";
 import Timestamp from "./Timestamp";
+import { SourceIsVerifiedStatus } from "./VerifiedStatus";
 
 type Props = {
   className?: string;
@@ -118,6 +119,12 @@ function AutomationsTable({ className, automations, hideSource }: Props) {
       },
       sortValue: (a: Automation) => getSourceRefForAutomation(a)?.name,
     },
+    {
+      label: "Verified",
+      value: (a: Automation) => (
+        <SourceIsVerifiedStatus sourceRef={getSourceRefForAutomation(a)} />
+      ),
+    },
     {
       label: "Status",
       value: (a: Automation) =>

ui/components/SourcesTable.tsx

@@ -20,6 +20,7 @@ import DataTable, {
 import KubeStatusIndicator, { computeMessage } from "./KubeStatusIndicator";
 import Link from "./Link";
 import Timestamp from "./Timestamp";
+import { VerifiableSource, VerifiedStatus } from "./VerifiedStatus";
 
 type Props = {
   className?: string;
@@ -70,6 +71,10 @@ function SourcesTable({ className, sources }: Props) {
     },
     { label: "Kind", value: "type" },
     { label: "Namespace", value: "namespace" },
+    {
+      label: "Verified",
+      value: (s: VerifiableSource) => <VerifiedStatus source={s} />,
+    },
     ...(isFlagEnabled("WEAVE_GITOPS_FEATURE_TENANCY")
       ? [{ label: "Tenant", value: "tenant" }]
       : []),

ui/components/UserSettings.tsx

@@ -12,6 +12,7 @@ import { Auth } from "../contexts/AuthContext";
 import { V2Routes } from "../lib/types";
 import DarkModeSwitch from "./DarkModeSwitch";
 import Icon, { IconType } from "./Icon";
+
 const SettingsMenu = styled(Menu)`
   .MuiPaper-root {
     background: ${(props) => props.theme.colors.whiteToPrimary};

ui/components/VerifiedStatus.tsx

@@ -0,0 +1,72 @@
+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 Icon, { IconType } from "./Icon";
+
+export interface VerifiableSource {
+  isVerifiable: boolean;
+  conditions: Condition[];
+}
+
+const getVerifiedStatusColor = (status?: string) => {
+  let color;
+  if (status === "True") {
+    color = "successOriginal";
+  } else if (status === "False") {
+    color = "alertOriginal";
+  } else if (!status) {
+    color = "feedbackOriginal";
+  }
+  return color;
+};
+
+export const findVerificationCondition = (
+  a: VerifiableSource
+): Condition | undefined =>
+  a?.conditions?.find((condition) => condition.type === "SourceVerified");
+
+export const VerifiedStatus = ({
+  source,
+}: {
+  source: VerifiableSource;
+}): JSX.Element | null => {
+  if (!source.isVerifiable) return null;
+
+  const condition = findVerificationCondition(source);
+  const color = getVerifiedStatusColor(condition?.status);
+
+  return (
+    <Tooltip title={condition?.message || "pending verification"}>
+      <div>
+        <Icon type={IconType.VerifiedUser} color={color} size="base" />
+      </div>
+    </Tooltip>
+  );
+};
+
+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;
+
+  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>
+  );
+};

ui/lib/objects.ts

@@ -189,6 +189,10 @@ export class GitRepository extends FluxObject {
   get reference(): GitRepositoryRef {
     return this.obj.spec?.ref || {};
   }
+
+  get isVerifiable(): boolean {
+    return Boolean(this.obj.spec.verify);
+  }
 }
 
 export class OCIRepository extends FluxObject {
@@ -211,6 +215,10 @@ export class OCIRepository extends FluxObject {
     }
     return metadata["org.opencontainers.image.revision"] || "";
   }
+
+  get isVerifiable(): boolean {
+    return Boolean(this.obj.spec.verify);
+  }
 }
 
 export class Kustomization extends FluxObject {