Realtime git info

src/Panel.tsx

@@ -6,12 +6,12 @@ import {
 } from "@storybook/manager-api";
 import React, { useCallback } from "react";
 
-import { ADDON_ID, PANEL_ID, START_BUILD } from "./constants";
+import { ADDON_ID, GIT_INFO, PANEL_ID, START_BUILD } from "./constants";
 import { Authentication } from "./screens/Authentication/Authentication";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
-import { AddonState } from "./types";
+import { AddonState, GitInfo } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
 import { StatusUpdate } from "./utils/testsToStatusUpdate";
 import { useProjectId } from "./utils/useProjectId";
@@ -20,13 +20,16 @@ interface PanelProps {
   active: boolean;
 }
 
-const { GIT_BRANCH, GIT_SLUG } = process.env;
+const { GIT_BRANCH, GIT_SLUG, GIT_COMMIT } = process.env;
 
 export const Panel = ({ active }: PanelProps) => {
   const api = useStorybookApi();
   const [accessToken, setAccessToken] = useAccessToken();
 
-  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, { isOutdated: false });
+  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, {
+    isOutdated: false,
+    gitInfo: { branch: GIT_BRANCH, commit: GIT_COMMIT, slug: GIT_SLUG },
+  });
   const { storyId } = useStorybookState();
 
   const setIsOutdated = useCallback(
@@ -38,7 +41,11 @@ export const Panel = ({ active }: PanelProps) => {
     [state, setAddonState]
   );
 
-  const emit = useChannel({});
+  const emit = useChannel({
+    [GIT_INFO]: (gitInfo: GitInfo) => {
+      setAddonState({ ...state, gitInfo });
+    },
+  });
 
   const runDevBuild = useCallback(() => {
     if (state.isRunning) return;
@@ -79,8 +86,8 @@ export const Panel = ({ active }: PanelProps) => {
     <Provider key={PANEL_ID} value={client}>
       <VisualTests
         projectId={projectId}
-        branch={GIT_BRANCH}
-        slug={GIT_SLUG}
+        branch={state.gitInfo.branch}
+        slug={state.gitInfo.slug}
         isOutdated={state.isOutdated}
         isRunning={state.isRunning}
         lastDevBuildId={state.lastBuildId}

src/constants.ts

@@ -11,6 +11,7 @@ export const ACCESS_TOKEN_KEY = `${ADDON_ID}/access-token/${CHROMATIC_BASE_URL}`
 export const DEV_BUILD_ID_KEY = `${ADDON_ID}/dev-build-id`;
 
 export const START_BUILD = `${ADDON_ID}/startBuild`;
+export const GIT_INFO = `${ADDON_ID}/gitInfo`;
 export const BUILD_STARTED = `${ADDON_ID}/buildStarted`;
 
 export const UPDATE_PROJECT = `${ADDON_ID}/updateProject`;

src/index.ts

@@ -9,10 +9,12 @@ import {
   BUILD_STARTED,
   CHROMATIC_ADDON_NAME,
   CHROMATIC_BASE_URL,
+  GIT_INFO,
   START_BUILD,
   UPDATE_PROJECT,
   UpdateProjectPayload,
 } from "./constants";
+import { GitInfo } from "./types";
 import { findConfig } from "./utils/storybook.config.utils";
 
 /**
@@ -77,12 +79,38 @@ async function serverChannel(
     }
   );
 
+  observeGitInfo((info) => {
+    channel.emit(GIT_INFO, info);
+  });
+
   return channel;
 }
 
+const observeGitInfo = async (callback: (info: GitInfo) => void) => {
+  // use a looping setTimeout over setInterval to avoid overlapping calls because of the async nature of the function
+  let timer: NodeJS.Timeout | null = null;
+  const existing = await getGitInfo();
+  const act = async () => {
+    const latest = await getGitInfo();
+    if (
+      latest.branch !== existing.branch ||
+      latest.commit !== existing.commit ||
+      latest.slug !== existing.slug
+    ) {
+      callback(latest);
+    }
+
+    timer = setTimeout(act, 1000);
+  };
+
+  timer = setTimeout(act, 1000);
+
+  return () => clearTimeout(timer);
+};
+
 // TODO: use the chromatic CLI to get this info?
 const execPromise = promisify(exec);
-async function getGitInfo() {
+async function getGitInfo(): Promise<GitInfo> {
   const branch = (await execPromise("git rev-parse --abbrev-ref HEAD")).stdout.trim();
   const commit = (await execPromise("git log -n 1 HEAD --format='%H'")).stdout.trim();
   const origin = (await execPromise("git config --get remote.origin.url")).stdout.trim();

src/types.ts

@@ -4,6 +4,7 @@ export interface AddonState {
   isOutdated?: boolean;
   isRunning?: boolean;
   lastBuildId?: string;
+  gitInfo?: GitInfo;
 }
 
 export type AnnouncedBuild = Extract<BuildFieldsFragment, { __typename: "AnnouncedBuild" }>;
@@ -12,3 +13,9 @@ export type StartedBuild = Extract<BuildFieldsFragment, { __typename: "StartedBu
 export type CompletedBuild = Extract<BuildFieldsFragment, { __typename: "CompletedBuild" }>;
 
 export type BuildWithTests = StartedBuild | CompletedBuild;
+
+export type GitInfo = {
+  branch: string;
+  commit: string;
+  slug: string;
+};