From 972c6ebb4d7c4a783ab44ed1b0996cabe1c20df0 Mon Sep 17 00:00:00 2001 From: Vijay Prasanna Date: Mon, 29 May 2023 17:37:48 +0530 Subject: [PATCH] console: remove outdated feature flags from the settings tab PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9190 Co-authored-by: Luca Restagno <59067245+lucarestagno@users.noreply.github.com> GitOrigin-RevId: 910fcc9ca4c5a6b18f07b47b60e0470b01db6bb7 --- .../Services/Data/DataSubSidebar.js | 45 +- .../Data/GDCTree/hooks/useTreeData.ts | 11 +- .../Services/Data/Schema/ManageDatabase.tsx | 552 +----------------- .../FeatureFlags/availableFeatureFlags.ts | 22 - 4 files changed, 26 insertions(+), 604 deletions(-) diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSubSidebar.js b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSubSidebar.js index 470d47cc147..62aa78ac94c 100644 --- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSubSidebar.js +++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSubSidebar.js @@ -23,10 +23,6 @@ import { Button } from '../../../new-components/Button'; import styles from '../../Common/Layout/LeftSubSidebar/LeftSubSidebar.module.scss'; import Spinner from '../../Common/Spinner/Spinner'; import { useGDCTreeItemClick } from './GDCTree/hooks/useGDCTreeItemClick'; -import { - availableFeatureFlagIds, - useIsFeatureFlagEnabled, -} from '../../../features/FeatureFlags'; const DATA_SIDEBAR_SET_LOADING = 'dataSidebar/DATA_SIDEBAR_SET_LOADING'; @@ -87,9 +83,6 @@ const DataSubSidebar = props => { const [schemaLoading, setSchemaLoading] = useState(false); const [isFetching, setIsFetching] = useState(false); const [preLoadState, setPreLoadState] = useState(true); - const { enabled: isBigQueryEnabled, isLoading } = useIsFeatureFlagEnabled( - availableFeatureFlagIds.enabledNewUIForBigQuery - ); const onDatabaseChange = newSourceName => { if (newSourceName === currentDataSource) { @@ -130,7 +123,7 @@ const DataSubSidebar = props => { const getItems = (schemaInfo = null) => { let sourceItems = []; sources.forEach(source => { - if (source.kind === 'bigquery' && isBigQueryEnabled === true) return; + if (source.kind === 'bigquery') return; if (isInconsistentSource(source.name, inconsistentObjects)) return; @@ -250,15 +243,7 @@ const DataSubSidebar = props => { setTreeViewItems(newItems); } ); - }, [ - sources.length, - tables, - functions, - enums, - schemaList, - currentTable, - isLoading, - ]); + }, [sources.length, tables, functions, enums, schemaList, currentTable]); const databasesCount = metadataSources.length; @@ -301,20 +286,18 @@ const DataSubSidebar = props => { diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/hooks/useTreeData.ts b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/hooks/useTreeData.ts index 6c1396b95e9..786342756a3 100644 --- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/hooks/useTreeData.ts +++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/GDCTree/hooks/useTreeData.ts @@ -5,10 +5,6 @@ import { nativeDrivers, ReleaseType, } from '../../../../../features/DataSource'; -import { - availableFeatureFlagIds, - useIsFeatureFlagEnabled, -} from '../../../../../features/FeatureFlags'; import { useMetadata } from '../../../../../features/hasura-metadata-api'; import { useHttpClient } from '../../../../../features/Network'; import { DataNode } from 'antd/lib/tree'; @@ -20,8 +16,6 @@ const isValueDataNode = (value: DataNode | null): value is DataNode => export const useTreeData = () => { const httpClient = useHttpClient(); const { data: metadata, isFetching } = useMetadata(); - const { enabled: isBigQueryEnabled, isLoading: isFeatureFlagsLoading } = - useIsFeatureFlagEnabled(availableFeatureFlagIds.enabledNewUIForBigQuery); const { data: availableDrivers } = useAvailableDrivers(); return useQuery({ @@ -35,8 +29,7 @@ export const useTreeData = () => { */ .filter( source => - !nativeDrivers.includes(source.kind) || - (isBigQueryEnabled && source.kind === 'bigquery') + !nativeDrivers.includes(source.kind) || source.kind === 'bigquery' ) .map(async source => { const releaseName = availableDrivers?.find( @@ -57,7 +50,7 @@ export const useTreeData = () => { return filteredResult; }, - enabled: !isFetching && !isFeatureFlagsLoading && !!availableDrivers, + enabled: !isFetching && !!availableDrivers, refetchOnWindowFocus: false, staleTime: DEFAULT_STALE_TIME, }); diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/Schema/ManageDatabase.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/Schema/ManageDatabase.tsx index 06663dbd564..5e71068d5c3 100644 --- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/Schema/ManageDatabase.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/Schema/ManageDatabase.tsx @@ -1,275 +1,24 @@ /* eslint-disable no-underscore-dangle */ -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import Helmet from 'react-helmet'; import { connect, ConnectedProps } from 'react-redux'; -import { - FaExclamationTriangle, - FaEye, - FaTimes, - FaHourglassHalf, - FaRedoAlt, - FaExternalLinkAlt, -} from 'react-icons/fa'; -import { browserHistory } from 'react-router'; -import produce from 'immer'; import { ManageAgents } from '../../../../features/ManageAgents'; import { Button } from '../../../../new-components/Button'; import { Analytics, REDACT_EVERYTHING } from '../../../../features/Analytics'; -import { nativeDrivers } from '../../../../features/DataSource'; -import { getProjectId } from '../../../../utils/cloudConsole'; -import { - CheckDatabaseLatencyResponse, - useCheckDatabaseLatency, - useUpdateProjectRegionChangeStat, -} from '../../../../features/ConnectDB'; -import { IndicatorCard } from '../../../../new-components/IndicatorCard'; -import { isCloudConsole } from '../../../../utils'; -import globals from '../../../../Globals'; -import { LearnMoreLink } from '../../../../new-components/LearnMoreLink'; import styles from './styles.module.scss'; -import { Dispatch, ReduxState } from '../../../../types'; +import { ReduxState } from '../../../../types'; import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb'; -import { DataSource } from '../../../../metadata/types'; -import { Driver } from '../../../../dataSources'; -import { - removeDataSource, - reloadDataSource, -} from '../../../../metadata/actions'; -import { GDCDatabaseListItem } from './components/GDCDatabaseListItem'; import { RightContainer } from '../../../Common/Layout/RightContainer'; import { getDataSources } from '../../../../metadata/selector'; -import ToolTip from '../../../Common/Tooltip/Tooltip'; -import { getConfirmation } from '../../../Common/utils/jsUtils'; import { mapDispatchToPropsEmpty } from '../../../Common/utils/reactUtils'; import _push from '../push'; -import { isInconsistentSource } from '../utils'; -import Endpoints, { globalCookiePolicy } from '../../../../Endpoints'; -import { getRunSqlQuery } from '../../../Common/utils/v1QueryUtils'; -import requestAction from '../../../../utils/requestAction'; -import { showErrorNotification } from '../../Common/Notification'; -import { services } from '../../../../dataSources/services'; -import CollapsibleToggle from './CollapsibleToggle'; import VPCBanner from '../../../Common/VPCBanner/VPCBanner'; -import { - checkHighLatencySources, - DBLatencyData, - getSourceInfoFromLatencyData, - useVPCBannerVisibility, -} from './utils'; -import { NeonDashboardLink } from '../DataSources/CreateDataSource/Neon/components/NeonDashboardLink'; +import { useVPCBannerVisibility } from './utils'; import { getRoute } from '../../../../utils/getDataRoute'; -import { - availableFeatureFlagIds, - useIsFeatureFlagEnabled, -} from '../../../../features/FeatureFlags'; import { Collapsible } from '../../../../new-components/Collapsible'; import { IconTooltip } from '../../../../new-components/Tooltip'; import { ListConnectedDatabases } from '../../../../features/ConnectDBRedesign'; -import { - MetadataSelectors, - useMetadata, -} from '../../../../features/hasura-metadata-api'; -import { PostgresConfiguration } from '../../../../features/hasura-metadata-types'; - -const KNOW_MORE_PROJECT_REGION_UPDATE = - 'https://hasura.io/docs/latest/projects/regions/#changing-region-of-an-existing-project'; - -type DatabaseListItemProps = { - dataSource: DataSource; - inconsistentObjects: InjectedProps['inconsistentObjects']; - onEdit: (dbName: string) => void; - onReload: (name: string, driver: Driver, cb: () => void) => void; - onRemove: (name: string, driver: Driver, cb: () => void) => void; - pushRoute: (route: string) => void; - dispatch: Dispatch; - dataHeaders: Record; - dbLatencyData?: DBLatencyData; -}; - -const DatabaseListItem: React.FC = ({ - onEdit, - pushRoute, - onReload, - onRemove, - dataSource, - inconsistentObjects, - dispatch, - dataHeaders, - dbLatencyData, -}) => { - const [reloading, setReloading] = useState(false); - const [removing, setRemoving] = useState(false); - const [showUrl, setShowUrl] = useState(false); - const [dbVersion, setDbVersion] = useState(''); - const { data: sourceInfo } = useMetadata(m => - MetadataSelectors.findSource(dataSource?.name)(m) - ); - - const fetchDBVersion = () => { - const query = services[dataSource.driver].getDatabaseVersionSql ?? ''; - - if (!query) { - setDbVersion(''); - return; - } - - const url = Endpoints.query; - const options: RequestInit = { - method: 'POST', - credentials: globalCookiePolicy, - headers: dataHeaders, - body: JSON.stringify( - getRunSqlQuery(query, dataSource.name, false, true, dataSource.driver) - ), - }; - - dispatch(requestAction(url, options)).then( - data => { - setDbVersion(data.result[1][0]); - }, - error => { - dispatch( - showErrorNotification('Failed to fetch Database version', null, error) - ); - } - ); - }; - - useEffect(() => { - fetchDBVersion(); - }, []); - - const viewDB = () => { - if (dataSource?.name) pushRoute(`/data/${dataSource.name}/schema`); - }; - const isInconsistentDataSource = isInconsistentSource( - dataSource.name, - inconsistentObjects - ); - - const isTotalMaxConnectionSet = !!( - sourceInfo?.configuration as PostgresConfiguration - )?.connection_info?.pool_settings?.total_max_connections; - const isMaxConnectionSet = !!( - sourceInfo?.configuration as PostgresConfiguration - )?.connection_info?.pool_settings?.max_connections; - const showMaxConnectionWarning = - isCloudConsole(globals) && !isTotalMaxConnectionSet && isMaxConnectionSet; - - return ( - - - - - {showMaxConnectionWarning && ( - { - onEdit(dataSource.name); - }} - > - - Set Total Max Connections - - )} - - - - {isInconsistentDataSource && ( - - - )} - - - {showUrl ? ( - typeof dataSource.url === 'string' ? ( - dataSource.url - ) : ( - dataSource.url.from_env - ) - ) : ( - setShowUrl(true)} - > - - )} - {showUrl && ( - - - )} - - - ); -}; type ManageDatabaseProps = InjectedProps; @@ -283,15 +32,8 @@ const ManageDatabase: React.FC = ({ dataHeaders, sourcesFromMetadata, }) => { - const { enabled: isConnectDBRedesignEnabled, isLoading } = - useIsFeatureFlagEnabled(availableFeatureFlagIds.connectDBRedesign); - useEffect(() => { - if ( - sourcesFromMetadata.length === 0 && - !autoRedirectedToConnectPage && - !isLoading - ) { + if (sourcesFromMetadata.length === 0 && !autoRedirectedToConnectPage) { /** * Because the getDataSources() doesn't list the GDC sources, the Data tab will redirect to the /connect page * thinking that are no sources available in Hasura, even if there are GDC sources connected to it. Modifying getDataSources() @@ -299,21 +41,10 @@ const ManageDatabase: React.FC = ({ * So a quick workaround is to check from the actual metadata if any sources are present - * Combined with checks between getDataSources() and metadata -> we know the remaining sources are GDC sources. In such a case redirect to the manage db route */ - if (isConnectDBRedesignEnabled) - dispatch(_push('/data/v2/manage/connect')); - else { - dispatch(_push('/data/manage/connect')); - } + dispatch(_push('/data/v2/manage/connect')); autoRedirectedToConnectPage = true; } - }, [ - location, - dataSources, - dispatch, - sourcesFromMetadata.length, - isConnectDBRedesignEnabled, - isLoading, - ]); + }, [location, dataSources, dispatch, sourcesFromMetadata.length]); const { show: shouldShowVPCBanner, dismiss: dismissVPCBanner } = useVPCBannerVisibility(); @@ -329,116 +60,10 @@ const ManageDatabase: React.FC = ({ }, ]; - const onRemove = (name: string, driver: Driver, cb: () => void) => { - const confirmation = getConfirmation( - `Your action will remove the "${name}" data source`, - true, - name - ); - if (confirmation) { - dispatch(removeDataSource({ driver, name })) - .then(cb) - .catch(err => { - console.error(err); - cb(); - }); - return; - } - // in case there was no confirmation - cb(); - }; - - const onReload = (name: string, driver: Driver, cb: () => void) => { - dispatch(reloadDataSource({ driver, name })).then(cb); - }; - const onClickConnectDB = () => { - isConnectDBRedesignEnabled - ? dispatch(_push(getRoute().connectDatabase())) - : dispatch(_push('/data/manage/connect')); + dispatch(_push(getRoute().connectDatabase())); }; - const pushRoute = (route: string) => { - if (route) dispatch(_push(route)); - }; - - const onEdit = (dbName: string) => { - dispatch(_push(`/data/manage/edit/${dbName}`)); - }; - - const isPgMssqlSourceConnected = sourcesFromMetadata.some( - source => source.kind === 'mssql' || source.kind === 'postgres' - ); - - const [fireLatencyRequest, setFireLatencyRequest] = useState(false); - - const queryResponse = useCheckDatabaseLatency(fireLatencyRequest); - - const checkDatabaseLatency = () => { - setFireLatencyRequest(true); - }; - - const insertProjectRegionChangeStatMutation = - useUpdateProjectRegionChangeStat(); - - const openUpdateProjectRegionPage = () => { - const projectId = getProjectId(globals); - if (!projectId) { - return; - } - insertProjectRegionChangeStatMutation.mutate(queryResponse.data); - - const cloudDetailsPage = `${window.location.protocol}//${window.location.host}/project/${projectId}/details?open_update_region_drawer=true`; - - window.open(cloudDetailsPage, '_blank'); - }; - - const [showCheckLatencyButton, setLatencyButtonVisibility] = useState( - sourcesFromMetadata.length !== 0 && - isPgMssqlSourceConnected && - isCloudConsole(globals) - ); - - const [latencyCheckData, setLatencyCheckData] = useState< - CheckDatabaseLatencyResponse | undefined - >(undefined); - - const [showErrorIndicator, setShowErrorIndicator] = useState(false); - - useEffect(() => { - if (queryResponse.isSuccess && typeof queryResponse.data !== 'string') { - setFireLatencyRequest(false); - setLatencyButtonVisibility(false); - setLatencyCheckData(queryResponse.data); - } else if (typeof queryResponse.data === 'string') { - setShowErrorIndicator(true); - } - setFireLatencyRequest(false); - }, [queryResponse.isSuccess, queryResponse.data]); - - const showAccelerateProjectSection = - isCloudConsole(globals) && - !showCheckLatencyButton && - !checkHighLatencySources(latencyCheckData) && - (!queryResponse.isLoading || !queryResponse.isFetching); - - useEffect(() => { - if (!location.search.includes('trigger_db_latency_check')) { - return; - } - - setFireLatencyRequest(true); - - const newLocation = produce(browserHistory.getCurrentLocation(), draft => { - // NOTE: the next few lines will help remove the query param once we trigger - // a request to check the db latency to avoid situations where might - // end up rendering the page in loops - delete draft.query.trigger_db_latency_check; - }); - - browserHistory.replace(newLocation); - }, []); - return ( @@ -472,166 +97,9 @@ const ManageDatabase: React.FC = ({
- {isConnectDBRedesignEnabled ? ( -
- -
- ) : ( - <> -
-
- - - - - - - {sourcesFromMetadata.length ? ( - sourcesFromMetadata.map(source => { - if (nativeDrivers.includes(source.kind)) { - const data = dataSources.find( - s => s.name === source.name - ); - if (!data) return null; - - return ( - - ); - } - return ( - - ); - }) - ) : ( - - )} - -
- - Database - - Connection String -
- You don't have any data sources connected, please - connect one to continue. -
-
-
- - {showCheckLatencyButton ? ( - - ) : null} - {showAccelerateProjectSection ? ( -
- -
- - Databases marked with “Elevated Latency” indicate that - it took us over 200 ms for this Hasura project to - communicate with your database. These conditions - generally happen when databases and projects are in - geographically distant regions. This can cause API and - subsequently application performance issues. We want - your GraphQL APIs to be lightning fast, therefore - we recommend that you either deploy your Hasura project - in the same region as your database or select a database - instance that's closer to where you've - deployed Hasura. - - -
- - -
-
- -
- ) : null} - {showErrorIndicator ? ( -
- -
- - There was an error in fetching the latest latency data. - 
{queryResponse.data}
- -
- - -
-
- -
- ) : null} - - - )} +
+ +
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/FeatureFlags/availableFeatureFlags.ts b/frontend/libs/console/legacy-ce/src/lib/features/FeatureFlags/availableFeatureFlags.ts index b3f348e4e2f..ed2e85e0d73 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/FeatureFlags/availableFeatureFlags.ts +++ b/frontend/libs/console/legacy-ce/src/lib/features/FeatureFlags/availableFeatureFlags.ts @@ -4,8 +4,6 @@ import globals from '../../Globals'; const relationshipTabTablesId = 'f6c57c31-abd3-46d9-aae9-b97435793273'; const importActionFromOpenApiId = '12e5aaf4-c794-4b8f-b762-5fda0bff946a'; -const enabledNewUIForBigQuery = 'e2d790ba-96fb-11ed-a8fc-0242ac120002'; -const connectDBRedesign = '532492b6-adca-11ed-afa1-0242ac120002'; const permissionsNewUI = '5f7b1673-b2ef-4c98-89f7-f30cb64f0136'; const importActionFromOpenApi: FeatureFlagDefinition = { @@ -22,8 +20,6 @@ const importActionFromOpenApi: FeatureFlagDefinition = { export const availableFeatureFlagIds = { relationshipTabTablesId, importActionFromOpenApiId, - enabledNewUIForBigQuery, - connectDBRedesign, permissionsNewUI, }; @@ -38,24 +34,6 @@ export const availableFeatureFlags: FeatureFlagDefinition[] = [ defaultValue: true, discussionUrl: '', }, - { - id: enabledNewUIForBigQuery, - title: 'Enable the revamped UI for BigQuery', - description: 'Try out the new UI experience for BigQuery.', - section: 'data', - status: 'beta', - defaultValue: true, - discussionUrl: '', - }, - { - id: connectDBRedesign, - title: 'Enable the revamped UI for Connect database experience', - description: 'Try out the new UI experience for connecting a database.', - section: 'data', - status: 'beta', - defaultValue: true, - discussionUrl: '', - }, { id: permissionsNewUI, title: 'Enable the revamped UI for Permissions',