From 21e53731d76ef2f5c27075c971e90063b420c3c2 Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Wed, 6 Mar 2024 15:24:25 -0500
Subject: [PATCH] add feature gate

---
 .../dagster-ui/packages/ui-core/src/app/Flags.tsx    |  1 +
 .../packages/ui-core/src/assets/ChangedReasons.tsx   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
index c0002a922d86a..2fc2910941675 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
@@ -13,6 +13,7 @@ export const FeatureFlag = {
   flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const,
   flagUseNewAutomationPage: 'flagUseNewAutomationPage' as const,
   flagUseNewOverviewPage: 'flagUseNewOverviewPage' as const,
+  flagExperimentalBranchDiff: 'flagExperimentalBranchDiff' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx
index b42a897075aed..35f1584a66b94 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/ChangedReasons.tsx
@@ -10,6 +10,7 @@ import {
 } from '@dagster-io/ui-components';
 import styled from 'styled-components';
 
+import {FeatureFlag, featureEnabled} from '../app/Flags';
 import {displayNameForAssetKey} from '../asset-graph/Utils';
 import {AssetKeyInput, ChangeReason} from '../graphql/types';
 import {numberFormatter} from '../ui/formatters';
@@ -21,7 +22,8 @@ export const ChangedReasonsTag = ({
   changedReasons?: ChangeReason[];
   assetKey: AssetKeyInput;
 }) => {
-  if (!changedReasons?.length) {
+  const flagExperimentalBranchDiff = featureEnabled(FeatureFlag.flagExperimentalBranchDiff);
+  if (!changedReasons?.length || !flagExperimentalBranchDiff) {
     return null;
   }
   return (
@@ -45,6 +47,10 @@ export const ChangedReasonsPopover = ({
   assetKey: AssetKeyInput;
   children: React.ReactNode;
 }) => {
+  const flagExperimentalBranchDiff = featureEnabled(FeatureFlag.flagExperimentalBranchDiff);
+  if (!flagExperimentalBranchDiff) {
+    return null;
+  }
   const modifiedChanges = changedReasons.filter((reason) => reason !== ChangeReason.NEW);
   function getDescription(change: ChangeReason) {
     switch (change) {
@@ -100,6 +106,10 @@ export const MinimalNodeChangedDot = ({
   changedReasons: ChangeReason[];
   assetKey: AssetKeyInput;
 }) => {
+  const flagExperimentalBranchDiff = featureEnabled(FeatureFlag.flagExperimentalBranchDiff);
+  if (!flagExperimentalBranchDiff) {
+    return null;
+  }
   return (
     <ChangedReasonsPopover changedReasons={changedReasons} assetKey={assetKey}>
       <MinimalNodeChangedDotContainer />