[3/n][Observe UI] Add lineage tab

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -73,6 +73,7 @@ import code_location from '../icon-svgs/code_location.svg';
 import code_location_reload from '../icon-svgs/code_location_reload.svg';
 import collapse from '../icon-svgs/collapse.svg';
 import collapse_arrows from '../icon-svgs/collapse_arrows.svg';
+import collapse_fullscreen from '../icon-svgs/collapse_fullscreen.svg';
 import column_lineage from '../icon-svgs/column_lineage.svg';
 import column_schema from '../icon-svgs/column_schema.svg';
 import compute_kind from '../icon-svgs/compute_kind.svg';
@@ -143,6 +144,7 @@ import execute from '../icon-svgs/execute.svg';
 import executing from '../icon-svgs/executing.svg';
 import expand from '../icon-svgs/expand.svg';
 import expand_arrows from '../icon-svgs/expand_arrows.svg';
+import expand_fullscreen from '../icon-svgs/expand_fullscreen.svg';
 import expand_less from '../icon-svgs/expand_less.svg';
 import expand_more from '../icon-svgs/expand_more.svg';
 import expectation from '../icon-svgs/expectation.svg';
@@ -488,6 +490,7 @@ export const Icons = {
   code_location,
   code_location_reload,
   collapse,
+  collapse_fullscreen,
   collapse_arrows,
   column_lineage,
   column_schema,
@@ -559,6 +562,7 @@ export const Icons = {
   executing,
   expand,
   expand_arrows,
+  expand_fullscreen,
   expand_less,
   expand_more,
   expectation,

js_modules/dagster-ui/packages/ui-core/src/app/App.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import {useRecoilValue} from 'recoil';
 import styled from 'styled-components';
 
 import {LayoutContext} from './LayoutProvider';
 import {LEFT_NAV_WIDTH, LeftNav} from '../nav/LeftNav';
+import {isFullScreenAtom} from './AppTopNav/AppTopNavContext';
 
 interface Props {
   banner?: React.ReactNode;
@@ -18,8 +20,10 @@ export const App = ({banner, children}: Props) => {
     }
   }, [nav]);
 
+  const isFullScreen = useRecoilValue(isFullScreenAtom);
+
   return (
-    <Container>
+    <Container $isFullScreen={isFullScreen}>
       <LeftNav />
       <Main $smallScreen={nav.isSmallScreen} $navOpen={nav.isOpen} onClick={onClickMain}>
         <div>{banner}</div>
@@ -50,9 +54,15 @@ const Main = styled.div<{$smallScreen: boolean; $navOpen: boolean}>`
   }}
 `;
 
-const Container = styled.div`
+const Container = styled.div<{$isFullScreen: boolean}>`
   display: flex;
-  height: calc(100% - 64px);
+  ${({$isFullScreen}) => {
+    if ($isFullScreen) {
+      return `height: 100%;`;
+    } else {
+      return `height: calc(100% - 64px);`;
+    }
+  }}
 `;
 
 const ChildContainer = styled.div`

js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx

@@ -1,6 +1,7 @@
 import {Box, Colors, Icon, IconWrapper} from '@dagster-io/ui-components';
 import * as React from 'react';
 import {NavLink} from 'react-router-dom';
+import {useRecoilValue} from 'recoil';
 import {AppTopNavRightOfLogo} from 'shared/app/AppTopNav/AppTopNavRightOfLogo.oss';
 import styled from 'styled-components';
 
@@ -14,6 +15,7 @@ import {
 import {SearchDialog} from '../../search/SearchDialog';
 import {LayoutContext} from '../LayoutProvider';
 import {ShortcutHandler} from '../ShortcutHandler';
+import {isFullScreenAtom} from './AppTopNavContext';
 
 interface Props {
   children?: React.ReactNode;
@@ -22,6 +24,13 @@ interface Props {
 }
 
 export const AppTopNav = ({children, allowGlobalReload = false}: Props) => {
+  const isFullScreen = useRecoilValue(isFullScreenAtom);
+  return isFullScreen ? null : (
+    <AppTopNavImpl allowGlobalReload={allowGlobalReload}>{children}</AppTopNavImpl>
+  );
+};
+
+const AppTopNavImpl = ({children, allowGlobalReload = false}: Props) => {
   const {flagMarketplace} = useFeatureFlags();
   const {reloading, tryReload} = useRepositoryLocationReload({
     scope: 'workspace',

js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavContext.tsx

@@ -0,0 +1,6 @@
+import {atom} from 'recoil';
+
+export const isFullScreenAtom = atom<boolean>({
+  key: 'isFullScreenAtom',
+  default: false,
+});