From 54a820151f6c647cea3b965a1d8b36fd7d473c10 Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com>
Date: Wed, 11 Sep 2024 16:54:01 -0500
Subject: [PATCH] [ui] Fix CodeLocationSource in flex container (#24422)

## Summary & Motivation

The CodeLocationSource button is stretching when rendered in a flex
container. Wrap it in a div.

Created a storybook example to demo the different possibilities of the
component.

<img width="209" alt="Screenshot 2024-09-11 at 16 44 00"
src="https://github.com/user-attachments/assets/6f736caf-915b-4993-b7f1-1f6ab74475c8">

## How I Tested These Changes

Storybook

## Changelog

- [ ] `BUGFIX` [ui] Fixed broken code location URL button rendering.
---
 .../src/workspace/CodeLocationSource.tsx      | 16 +++++++------
 .../CodeLocationSource.stories.tsx            | 24 +++++++++++++++++++
 2 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/workspace/__stories__/CodeLocationSource.stories.tsx

diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationSource.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationSource.tsx
index c1429082f027a..e005d529f38c5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationSource.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationSource.tsx
@@ -28,13 +28,15 @@ export const CodeLocationSource = ({metadata}: {metadata: Metadata[]}) => {
   const {type, url} = urlValue;
 
   return (
-    <ExternalAnchorButton
-      href={url.toString()}
-      icon={<Icon name={type === 'github-url' ? 'github' : 'gitlab'} />}
-      rightIcon={<Icon name="open_in_new" />}
-    >
-      View repo
-    </ExternalAnchorButton>
+    <div>
+      <ExternalAnchorButton
+        href={url.toString()}
+        icon={<Icon name={type === 'github-url' ? 'github' : 'gitlab'} />}
+        rightIcon={<Icon name="open_in_new" />}
+      >
+        View repo
+      </ExternalAnchorButton>
+    </div>
   );
 };
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/__stories__/CodeLocationSource.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/__stories__/CodeLocationSource.stories.tsx
new file mode 100644
index 0000000000000..7954f12ddea97
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/__stories__/CodeLocationSource.stories.tsx
@@ -0,0 +1,24 @@
+import {Box} from '@dagster-io/ui-components';
+import {Meta} from '@storybook/react';
+
+import {CodeLocationSource} from '../CodeLocationSource';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'CodeLocationSource',
+  component: CodeLocationSource,
+} as Meta;
+
+export const Default = () => {
+  return (
+    <Box flex={{direction: 'column', gap: 20}}>
+      <CodeLocationSource metadata={[]} />
+      <CodeLocationSource metadata={[{key: 'url', value: 'not-a-url'}]} />
+      <CodeLocationSource
+        metadata={[{key: 'url', value: 'https://github.com/dagster-io/dagster'}]}
+      />
+      <CodeLocationSource metadata={[{key: 'url', value: 'https://gitlab.com/foo-bar'}]} />
+      <CodeLocationSource metadata={[{key: 'url', value: 'https://zombo.com'}]} />
+    </Box>
+  );
+};