[ui] Add Integrations Marketplace to app

Author: hellendag

js_modules/dagster-ui/packages/ui-core/package.json

@@ -48,6 +48,7 @@
     "chart.js": "^3.4.1",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-zoom": "^1.1.1",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.2",
     "cronstrue": "^2.51.0",
     "dagre": "dagster-io/dagre#0.8.5",

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

@@ -4,7 +4,9 @@ import {NavLink} from 'react-router-dom';
 import {AppTopNavRightOfLogo} from 'shared/app/AppTopNav/AppTopNavRightOfLogo.oss';
 import styled from 'styled-components';
 
+import {useFeatureFlags} from '../Flags';
 import {GhostDaggyWithTooltip} from './GhostDaggy';
+import {MarketplaceLink} from '../../integrations/MarketplaceLink';
 import {
   reloadFnForWorkspace,
   useRepositoryLocationReload,
@@ -20,6 +22,7 @@ interface Props {
 }
 
 export const AppTopNav = ({children, allowGlobalReload = false}: Props) => {
+  const {flagMarketplace} = useFeatureFlags();
   const {reloading, tryReload} = useRepositoryLocationReload({
     scope: 'workspace',
     reloadFn: reloadFnForWorkspace,
@@ -46,6 +49,7 @@ export const AppTopNav = ({children, allowGlobalReload = false}: Props) => {
           </ShortcutHandler>
         ) : null}
         <SearchDialog />
+        {flagMarketplace ? <MarketplaceLink /> : null}
         {children}
       </Box>
     </AppTopNavContainer>

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

@@ -6,6 +6,7 @@ import {AssetsOverviewRoot} from 'shared/assets/AssetsOverviewRoot.oss';
 import {Route} from './Route';
 import {AssetFeatureProvider} from '../assets/AssetFeatureContext';
 import {RunsFeedBackfillPage} from '../instance/backfill/RunsFeedBackfillPage';
+import {IntegrationsRoot} from '../integrations/IntegrationsRoot';
 import RunsFeedRoot from '../runs/RunsFeedRoot';
 import {lazy} from '../util/lazy';
 
@@ -91,6 +92,9 @@ export const ContentRoot = memo(() => {
           <Route path="/deployment">
             <SettingsRoot />
           </Route>
+          <Route path="/integrations">
+            <IntegrationsRoot />
+          </Route>
           <Route path="*" isNestingRoute>
             <FallthroughRoot />
           </Route>

js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx

@@ -6,6 +6,7 @@ export enum FeatureFlag {
   flagSelectionSyntax = 'flagSelectionSyntax-always-on',
   flagAssetSelectionWorker = 'flagAssetSelectionWorker',
   flagUseNewObserveUIs = 'flagUseNewObserveUIs',
+  flagMarketplace = 'flagMarketplace',
 
   // Flags for tests
   __TestFlagDefaultNone = '__TestFlagDefaultNone',

js_modules/dagster-ui/packages/ui-core/src/integrations/IntegrationPage.tsx

@@ -1,8 +1,8 @@
-import {Body, Box, Colors, Heading, PageHeader} from '@dagster-io/ui-components';
+import {Body, Box, Colors} from '@dagster-io/ui-components';
+import clsx from 'clsx';
 import {useLayoutEffect, useRef, useState} from 'react';
 import ReactMarkdown from 'react-markdown';
-import {CodeComponent} from 'react-markdown/lib/ast-to-react';
-import {Link} from 'react-router-dom';
+import {Components} from 'react-markdown/lib/ast-to-react';
 import rehypeHighlight from 'rehype-highlight';
 import remarkGfm from 'remark-gfm';
 
@@ -24,22 +24,7 @@ export const IntegrationPage = ({integration}: Props) => {
 
   return (
     <div>
-      <PageHeader
-        title={
-          <Heading>
-            <Box flex={{direction: 'row', gap: 8}}>
-              <Link to="/integrations">Integrations Marketplace</Link>
-              <span> / </span>
-              <div>{title}</div>
-            </Box>
-          </Heading>
-        }
-      />
-      <Box
-        padding={{vertical: 24}}
-        flex={{direction: 'column', gap: 24}}
-        style={{width: '1100px', margin: '0 auto'}}
-      >
+      <Box padding={{vertical: 24}} flex={{direction: 'column', gap: 12}}>
         <Box flex={{direction: 'row', gap: 12, alignItems: 'flex-start'}}>
           <IntegrationIcon name={name} logo={logo} />
           <Box flex={{direction: 'column', gap: 2}} margin={{top: 4}}>
@@ -54,6 +39,7 @@ export const IntegrationPage = ({integration}: Props) => {
             rehypePlugins={[[rehypeHighlight, {ignoreMissing: true}]]}
             components={{
               code: Code,
+              a: Anchor,
             }}
           >
             {content}
@@ -64,15 +50,36 @@ export const IntegrationPage = ({integration}: Props) => {
   );
 };
 
-const Code: CodeComponent = (props) => {
-  const {children, className, ...rest} = props;
+const DOCS_ORIGIN = 'https://docs.dagster.io';
+
+const Anchor: Components['a'] = (props) => {
+  const {children, href, ...rest} = props;
+  const finalHref = href?.startsWith('/') ? `${DOCS_ORIGIN}${href}` : href;
+  return (
+    <a href={finalHref} target="_blank" rel="noreferrer" {...rest}>
+      {children}
+    </a>
+  );
+};
+
+const Code: Components['code'] = (props) => {
+  const {children, className, inline, ...rest} = props;
+
   const codeRef = useRef<HTMLElement>(null);
   const [value, setValue] = useState('');
 
   useLayoutEffect(() => {
     setValue(codeRef.current?.textContent?.trim() ?? '');
   }, [children]);
 
+  if (inline) {
+    return (
+      <code className={clsx(className, styles.inlineCode)} {...rest}>
+        {children}
+      </code>
+    );
+  }
+
   return (
     <div className={styles.codeBlock}>
       <code className={className} {...rest} ref={codeRef}>

js_modules/dagster-ui/packages/ui-core/src/integrations/IntegrationRoot.tsx

@@ -0,0 +1,71 @@
+import {Box, Heading, Icon, NonIdealState, PageHeader} from '@dagster-io/ui-components';
+import {useMemo} from 'react';
+import {Link, useParams} from 'react-router-dom';
+
+import {IntegrationPage} from './IntegrationPage';
+import * as allIntegrations from './__generated__';
+import {AnchorButton} from '../ui/AnchorButton';
+
+export const IntegrationRoot = () => {
+  const {integrationName} = useParams<{integrationName: string}>();
+
+  const matchingIntegration = useMemo(() => {
+    const match = Object.entries(allIntegrations).find(
+      ([key]) => key.toLocaleLowerCase() === integrationName.toLocaleLowerCase(),
+    );
+    return match ? match[1] : null;
+  }, [integrationName]);
+
+  const content = () => {
+    if (!matchingIntegration) {
+      return (
+        <Box padding={64} flex={{direction: 'column', gap: 12}}>
+          <NonIdealState
+            icon="search"
+            title="Integration not found"
+            description="This integration could not be found."
+            action={
+              <AnchorButton to="/integrations" icon={<Icon name="arrow_back" />}>
+                Back to Integrations Marketplace
+              </AnchorButton>
+            }
+          />
+        </Box>
+      );
+    }
+
+    return <IntegrationPage integration={matchingIntegration} />;
+  };
+
+  return (
+    <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'hidden'}}>
+      <PageHeader
+        title={
+          <Heading>
+            <Box flex={{direction: 'row', gap: 8}}>
+              <Link to="/integrations">Integrations Marketplace</Link>
+              {matchingIntegration ? (
+                <>
+                  <span> / </span>
+                  <div>{matchingIntegration?.frontmatter.name}</div>
+                </>
+              ) : null}
+            </Box>
+          </Heading>
+        }
+      />
+      <div style={{flex: 1, overflowY: 'auto'}}>
+        <div
+          style={{
+            width: '80vw',
+            maxWidth: '1100px',
+            minWidth: '900px',
+            margin: '0 auto',
+          }}
+        >
+          {content()}
+        </div>
+      </div>
+    </Box>
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/integrations/IntegrationTag.tsx

@@ -3,9 +3,9 @@ import {IconName} from '@dagster-io/ui-components';
 export enum IntegrationTag {
   Alerting = 'alerting',
   BiTools = 'bi-tools',
-  ComponentReady = 'component-ready',
   Compute = 'compute',
-  EltTools = 'elt-tools',
+  DagsterSupported = 'dagster-supported',
+  EtlTools = 'etl',
   Metadata = 'metadata',
   Monitoring = 'monitoring',
   Notifications = 'notifications',
@@ -15,9 +15,9 @@ export enum IntegrationTag {
 export const IntegrationTagLabel: Record<IntegrationTag, string> = {
   [IntegrationTag.Alerting]: 'Alerting',
   [IntegrationTag.BiTools]: 'BI tools',
-  [IntegrationTag.ComponentReady]: 'Component-ready',
   [IntegrationTag.Compute]: 'Compute',
-  [IntegrationTag.EltTools]: 'ELT tools',
+  [IntegrationTag.DagsterSupported]: 'Dagster Supported',
+  [IntegrationTag.EtlTools]: 'ETL tools',
   [IntegrationTag.Metadata]: 'Metadata',
   [IntegrationTag.Monitoring]: 'Monitoring',
   [IntegrationTag.Notifications]: 'Notifications',
@@ -27,9 +27,9 @@ export const IntegrationTagLabel: Record<IntegrationTag, string> = {
 export const IntegrationTagIcon: Record<IntegrationTag, IconName> = {
   [IntegrationTag.Alerting]: 'alert',
   [IntegrationTag.BiTools]: 'chart_bar',
-  [IntegrationTag.ComponentReady]: 'repo',
   [IntegrationTag.Compute]: 'speed',
-  [IntegrationTag.EltTools]: 'transform',
+  [IntegrationTag.DagsterSupported]: 'dagster_solid',
+  [IntegrationTag.EtlTools]: 'transform',
   [IntegrationTag.Metadata]: 'metadata',
   [IntegrationTag.Monitoring]: 'visibility',
   [IntegrationTag.Notifications]: 'notifications',

js_modules/dagster-ui/packages/ui-core/src/integrations/IntegrationsRoot.tsx

@@ -0,0 +1,20 @@
+import {Redirect, Route, Switch} from 'react-router';
+
+import {IntegrationRoot} from './IntegrationRoot';
+import {MarketplaceRoot} from './MarketplaceRoot';
+import {useFeatureFlags} from '../app/Flags';
+
+export const IntegrationsRoot = () => {
+  const {flagMarketplace} = useFeatureFlags();
+
+  if (!flagMarketplace) {
+    return <Redirect to="/deployment" />;
+  }
+
+  return (
+    <Switch>
+      <Route path="/integrations" component={MarketplaceRoot} exact />
+      <Route path="/integrations/:integrationName" component={IntegrationRoot} />
+    </Switch>
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/integrations/MarketplaceHome.tsx

@@ -14,8 +14,14 @@ interface Props {
 export const MarketplaceHome = (props: Props) => {
   const {integrations} = props;
   const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState<IntegrationTag | null>(null);
 
-  const filteredIntegrations = integrations.filter((integration) => {
+  const filteredByTag = integrations.filter((integration) => {
+    const {tags} = integration.frontmatter;
+    return filters === null || tags.some((tag) => filters === tag);
+  });
+
+  const filteredIntegrations = filteredByTag.filter((integration) => {
     return integration.frontmatter.name.toLowerCase().includes(searchQuery.toLowerCase());
   });
 
@@ -30,10 +36,18 @@ export const MarketplaceHome = (props: Props) => {
         placeholder="Search for integrations"
         icon="search"
       />
-      <Box flex={{direction: 'row', gap: 12, alignItems: 'center'}}>
+      <Box
+        flex={{direction: 'row', gap: 12, alignItems: 'center', wrap: 'wrap'}}
+        margin={{bottom: 12}}
+      >
         <div style={{fontSize: 16}}>Filters</div>
         {Object.values(IntegrationTag).map((tag) => (
-          <Button key={tag} icon={<Icon name={IntegrationTagIcon[tag]} />}>
+          <Button
+            key={tag}
+            icon={<Icon name={IntegrationTagIcon[tag]} />}
+            onClick={() => setFilters(filters === tag ? null : tag)}
+            style={{backgroundColor: filters === tag ? Colors.backgroundBlue() : 'transparent'}}
+          >
             {IntegrationTagLabel[tag]}
           </Button>
         ))}

js_modules/dagster-ui/packages/ui-core/src/integrations/MarketplaceLink.tsx

@@ -0,0 +1,18 @@
+import {Box, Icon} from '@dagster-io/ui-components';
+import {Link} from 'react-router-dom';
+
+import styles from './css/MarketplaceLink.module.css';
+
+export const MarketplaceLink = () => {
+  return (
+    <Link className={styles.marketplaceLink} to="/integrations">
+      <Box
+        flex={{direction: 'row', alignItems: 'center', gap: 8, justifyContent: 'center'}}
+        className={styles.marketplaceLinkContent}
+      >
+        <Icon name="compute_kind" />
+        Integrations
+      </Box>
+    </Link>
+  );
+};

js_modules/dagster-ui/packages/ui-core/src/integrations/MarketplaceRoot.tsx

@@ -0,0 +1,18 @@
+import {Box, Colors, Page} from '@dagster-io/ui-components';
+
+import {MarketplaceHome} from './MarketplaceHome';
+import * as allIntegrations from './__generated__';
+
+export const MarketplaceRoot = () => {
+  const integrations = Object.values(allIntegrations);
+  return (
+    <Page style={{backgroundColor: Colors.backgroundLight()}}>
+      <Box
+        padding={{vertical: 32}}
+        style={{width: '80vw', maxWidth: '1200px', minWidth: '800px', margin: '0 auto'}}
+      >
+        <MarketplaceHome integrations={integrations} />
+      </Box>
+    </Page>
+  );
+};