From b45093b2853e111b1d5cda79f9fbe39523d4180d Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Wed, 7 Aug 2024 15:51:20 -0400 Subject: [PATCH] injection points --- .../src/app/AppTopNav/AppTopNavLinks.tsx | 3 ++- .../ui-core/src/app/FeatureFlags.oss.tsx | 7 +++++++ .../packages/ui-core/src/app/Flags.tsx | 21 ++++++------------- .../ui-core/src/app/UserSettingsButton.tsx | 2 +- .../UserSettingsDialog/UserSettingsDialog.tsx | 11 +++++----- .../packages/ui-core/src/app/Util.tsx | 3 ++- ....tsx => getVisibleFeatureFlagRows.oss.tsx} | 2 +- .../ui-core/src/settings/SettingsLeftPane.tsx | 2 +- 8 files changed, 26 insertions(+), 25 deletions(-) create mode 100644 js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx rename js_modules/dagster-ui/packages/ui-core/src/app/{getVisibleFeatureFlagRows.tsx => getVisibleFeatureFlagRows.oss.tsx} (94%) diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx index 73f90d6b42b59..65b36fd256aaa 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx @@ -1,6 +1,7 @@ import {Box} from '@dagster-io/ui-components'; import {ReactNode} from 'react'; import {useHistory} from 'react-router-dom'; +import {FeatureFlag} from 'src/app/FeatureFlags.oss'; import {TopNavLink} from './AppTopNav'; import { @@ -11,7 +12,7 @@ import { locationPathMatcher, } from './activePathMatchers'; import {DeploymentStatusIcon} from '../../nav/DeploymentStatusIcon'; -import {FeatureFlag, featureEnabled} from '../Flags'; +import {featureEnabled} from '../Flags'; import {ShortcutHandler} from '../ShortcutHandler'; export type AppNavLinkType = { diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx new file mode 100644 index 0000000000000..aa7ae972fc182 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx @@ -0,0 +1,7 @@ +export enum FeatureFlag { + flagDebugConsoleLogging = 'flagDebugConsoleLogging', + flagDisableWebsockets = 'flagDisableWebsockets', + flagSidebarResources = 'flagSidebarResources', + flagDisableAutoLoadDefaults = 'flagDisableAutoLoadDefaults', + flagSettingsPage = 'flagSettingsPage', +} 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 7d2ae12db39f8..effa66b199a07 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 @@ -1,28 +1,19 @@ import memoize from 'lodash/memoize'; import {useMemo} from 'react'; +import {FeatureFlag} from 'src/app/FeatureFlags.oss'; import {getJSONForKey} from '../hooks/useStateWithStorage'; export const DAGSTER_FLAGS_KEY = 'DAGSTER_FLAGS'; -// Use const because we need to extend this in cloud. https://blog.logrocket.com/extend-enums-typescript/ -export const FeatureFlag = { - flagDebugConsoleLogging: 'flagDebugConsoleLogging' as const, - flagDisableWebsockets: 'flagDisableWebsockets' as const, - flagSidebarResources: 'flagSidebarResources' as const, - flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const, - flagSettingsPage: 'flagSettingsPage' as const, -}; -export type FeatureFlagType = keyof typeof FeatureFlag; - -export const getFeatureFlags: () => FeatureFlagType[] = memoize( +export const getFeatureFlags: () => FeatureFlag[] = memoize( () => getJSONForKey(DAGSTER_FLAGS_KEY) || [], ); -export const featureEnabled = memoize((flag: FeatureFlagType) => getFeatureFlags().includes(flag)); +export const featureEnabled = memoize((flag: FeatureFlag) => getFeatureFlags().includes(flag)); type FlagMap = { - readonly [F in FeatureFlagType]: boolean; + readonly [F in FeatureFlag]: boolean; }; export const useFeatureFlags = () => { @@ -30,13 +21,13 @@ export const useFeatureFlags = () => { const flagSet = new Set(getFeatureFlags()); const all: Record = {}; for (const flag in FeatureFlag) { - all[flag] = flagSet.has(flag as FeatureFlagType); + all[flag] = flagSet.has(flag as FeatureFlag); } return all as FlagMap; }, []); }; -export const setFeatureFlags = (flags: FeatureFlagType[]) => { +export const setFeatureFlags = (flags: FeatureFlag[]) => { if (!(flags instanceof Array)) { throw new Error('flags must be an array'); } diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsButton.tsx index 9981aa1477477..06b2f6b8d8bfa 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsButton.tsx @@ -1,10 +1,10 @@ import {Icon} from '@dagster-io/ui-components'; import {useState} from 'react'; +import {getVisibleFeatureFlagRows} from 'src/app/getVisibleFeatureFlagRows.oss'; import {useFeatureFlags} from './Flags'; import {TopNavButton} from './TopNavButton'; import {UserSettingsDialog} from './UserSettingsDialog/UserSettingsDialog'; -import {getVisibleFeatureFlagRows} from './getVisibleFeatureFlagRows'; export const UserSettingsButton = () => { const {flagSettingsPage} = useFeatureFlags(); diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx index 458dd45939389..b338366911f17 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserSettingsDialog.tsx @@ -11,13 +11,14 @@ import { Tooltip, } from '@dagster-io/ui-components'; import * as React from 'react'; +import {FeatureFlag} from 'src/app/FeatureFlags.oss'; import {UserPreferences} from 'src/app/UserSettingsDialog/UserPreferences.oss'; import {CodeLinkProtocolSelect} from '../../code-links/CodeLinkProtocol'; -import {FeatureFlagType, getFeatureFlags, setFeatureFlags} from '../Flags'; +import {getFeatureFlags, setFeatureFlags} from '../Flags'; type OnCloseFn = (event: React.SyntheticEvent) => void; -type VisibleFlag = {key: string; label?: React.ReactNode; flagType: FeatureFlagType}; +type VisibleFlag = {key: string; label?: React.ReactNode; flagType: FeatureFlag}; interface DialogProps { isOpen: boolean; @@ -40,7 +41,7 @@ export const UserSettingsDialog = ({isOpen, onClose, visibleFlags}: DialogProps) interface DialogContentProps { onClose: OnCloseFn; - visibleFlags: {key: string; label?: React.ReactNode; flagType: FeatureFlagType}[]; + visibleFlags: {key: string; label?: React.ReactNode; flagType: FeatureFlag}[]; } /** @@ -48,7 +49,7 @@ interface DialogContentProps { * we want to render it. */ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps) => { - const [flags, setFlags] = React.useState(() => getFeatureFlags()); + const [flags, setFlags] = React.useState(() => getFeatureFlags()); const [reloading, setReloading] = React.useState(false); const initialFlagState = React.useRef(JSON.stringify([...getFeatureFlags().sort()])); @@ -57,7 +58,7 @@ const UserSettingsDialogContent = ({onClose, visibleFlags}: DialogContentProps) setFeatureFlags(flags); }); - const toggleFlag = (flag: FeatureFlagType) => { + const toggleFlag = (flag: FeatureFlag) => { setFlags(flags.includes(flag) ? flags.filter((f) => f !== flag) : [...flags, flag]); }; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx index 18078eb07ada0..12c9536e7cb1c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx @@ -1,8 +1,9 @@ import {cache} from 'idb-lru-cache'; import memoize from 'lodash/memoize'; import LRU from 'lru-cache'; +import {FeatureFlag} from 'src/app/FeatureFlags.oss'; -import {FeatureFlag, featureEnabled} from './Flags'; +import {featureEnabled} from './Flags'; import {timeByParts} from './timeByParts'; function twoDigit(v: number) { diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.oss.tsx similarity index 94% rename from js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx rename to js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.oss.tsx index dfa2570dc0826..d59406d5dfdf4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.oss.tsx @@ -1,4 +1,4 @@ -import {FeatureFlag} from './Flags'; +import {FeatureFlag} from 'src/app/FeatureFlags.oss'; /** * Open-source feature flags to be displayed in Dagster UI "User settings" diff --git a/js_modules/dagster-ui/packages/ui-core/src/settings/SettingsLeftPane.tsx b/js_modules/dagster-ui/packages/ui-core/src/settings/SettingsLeftPane.tsx index b562147f421b3..e942351de4f4c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/settings/SettingsLeftPane.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/settings/SettingsLeftPane.tsx @@ -1,9 +1,9 @@ import {Box, Icon} from '@dagster-io/ui-components'; import {useState} from 'react'; import {useLocation} from 'react-router-dom'; +import {getVisibleFeatureFlagRows} from 'src/app/getVisibleFeatureFlagRows.oss'; import {UserSettingsDialog} from '../app/UserSettingsDialog/UserSettingsDialog'; -import {getVisibleFeatureFlagRows} from '../app/getVisibleFeatureFlagRows'; import {SideNavItem, SideNavItemConfig} from '../ui/SideNavItem'; const items: SideNavItemConfig[] = [