give it a UI

Author: filiptronicek

components/dashboard/src/data/prebuilds/prebuild-queries.ts

@@ -5,9 +5,11 @@
  */
 
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { prebuildClient, stream } from "../../service/public-api";
+import { configurationClient, prebuildClient, stream } from "../../service/public-api";
 import { Prebuild, PrebuildPhase_Phase } from "@gitpod/public-api/lib/gitpod/v1/prebuild_pb";
 import { ApplicationError, ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
+import { PlainMessage, toPlainMessage } from "@bufbuild/protobuf";
+import { GetConfigurationWebhookActivityStatusResponse } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 
 export function usePrebuildQuery(prebuildId: string) {
     return useQuery<Prebuild, Error>(
@@ -75,3 +77,18 @@ export function useTriggerPrebuildMutation(configurationId?: string, gitRef?: st
         },
     });
 }
+
+export function useWebhookActivityStatusQuery(configurationId: string) {
+    return useQuery<PlainMessage<GetConfigurationWebhookActivityStatusResponse>, Error>(
+        ["webhookActivityStatus", configurationId],
+        async () => {
+            const resp = await configurationClient.getConfigurationWebhookActivityStatus({ configurationId });
+            return toPlainMessage(resp);
+        },
+        {
+            retry: false,
+            staleTime: 1000 * 60, // 1 minute
+            cacheTime: 1000 * 60 * 15, // 15 minutes
+        },
+    );
+}

components/dashboard/src/repositories/detail/ConfigurationDetailPrebuilds.tsx

@@ -5,7 +5,7 @@
  */
 
 import { FC, useCallback, useState } from "react";
-import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
+import { Configuration, PrebuildTriggerStrategy } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 import { ConfigurationSettingsField } from "./ConfigurationSettingsField";
 import { Heading3, Subheading } from "@podkit/typography/Headings";
 import { SwitchInputField } from "@podkit/switch/Switch";
@@ -15,6 +15,9 @@ import { LoadingState } from "@podkit/loading/LoadingState";
 import { EnablePrebuildsError } from "./prebuilds/EnablePrebuildsError";
 import { TextMuted } from "@podkit/typography/TextMuted";
 import { Link } from "react-router-dom";
+import { useWebhookActivityStatusQuery } from "../../data/prebuilds/prebuild-queries";
+import Alert from "../../components/Alert";
+import { useToast } from "../../components/toasts/Toasts";
 
 type Props = {
     configuration: Configuration;
@@ -59,6 +62,10 @@ export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
             <ConfigurationSettingsField>
                 <Heading3>Prebuilds</Heading3>
                 <Subheading className="max-w-lg">Prebuilds reduce wait time for new workspaces.</Subheading>
+                {configuration.prebuildSettings?.enabled &&
+                    configuration.prebuildSettings.triggerStrategy !== PrebuildTriggerStrategy.ACTIVITY_BASED && (
+                        <WebhookTriggerMessage configurationId={configuration.id} />
+                    )}
 
                 <SwitchInputField
                     className="mt-6"
@@ -95,3 +102,39 @@ export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
         </>
     );
 };
+
+export const WebhookTriggerMessage = ({ configurationId }: { configurationId: string }) => {
+    const integrationStatus = useWebhookActivityStatusQuery(configurationId);
+    const { toast } = useToast();
+
+    if (integrationStatus.isError) {
+        toast("Failed to load webhook activity status");
+        return null;
+    }
+    if (!integrationStatus?.data?.isWebhookActive) {
+        return null;
+    }
+
+    return (
+        <Alert type="warning">
+            <div className="flex flex-row gap-2 items-center">
+                <span>
+                    We have gotten webhook activity from your repository recently, indicating you have webhooks
+                    installed on your repo. To optimize prebuilds usage, you might want to consider enabling Activity
+                    based prebuilds by removing our webhook. If you remove them, it might take a new commit for this
+                    message to disappear, although activity based prebuilds will start working right away.
+                </span>
+                <div>
+                    <a
+                        href="https://www.gitpod.io/changelog/activity-based-prebuilds"
+                        className="gp-link"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        Learn more about Activity based prebuilds
+                    </a>
+                </div>
+            </div>
+        </Alert>
+    );
+};

components/dashboard/src/repositories/detail/prebuilds/EnablePrebuildsError.tsx

@@ -22,7 +22,7 @@ export const EnablePrebuildsError: FC<Props> = ({ error, onReconnect }) => {
     // We need to authorize with the provider to acquire the correct scopes to install webhooks
     if (error instanceof ApplicationError && error.code === ErrorCodes.NOT_AUTHENTICATED) {
         return (
-            <RepositoryUnauthroizedErrorMessage
+            <RepositoryUnauthorizedErrorMessage
                 error={error.data as RepositoryUnauthorizedError}
                 onReconnect={onReconnect}
             />
@@ -63,11 +63,11 @@ const GenericErrorMessage: FC<GenericErrorMessageProps> = ({ message }) => {
     );
 };
 
-type RepositoryUnauthroizedErrorMessageProps = {
+type RepositoryUnauthorizedErrorMessageProps = {
     error: RepositoryUnauthorizedError;
     onReconnect: () => void;
 };
-const RepositoryUnauthroizedErrorMessage: FC<RepositoryUnauthroizedErrorMessageProps> = ({ error, onReconnect }) => {
+const RepositoryUnauthorizedErrorMessage: FC<RepositoryUnauthorizedErrorMessageProps> = ({ error, onReconnect }) => {
     const { toast } = useToast();
 
     const authorizeWithProvider = useCallback(async () => {
@@ -106,7 +106,7 @@ const RepositoryUnauthroizedErrorMessage: FC<RepositoryUnauthroizedErrorMessageP
                     </span>
                 ) : (
                     <span>
-                        Unable to enable prebuilds. This could be because you don’t have admin/write premissions for
+                        Unable to enable prebuilds. This could be because you don’t have admin/write permissions for
                         this repo or it could be an invalid token. Please try to reconnect. If the problem persists, you
                         can contact support.
                     </span>