diff --git a/frontend/src/concepts/connectionTypes/validationUtils.ts b/frontend/src/concepts/connectionTypes/validationUtils.ts index aa12a47b58..4d117a30ac 100644 --- a/frontend/src/concepts/connectionTypes/validationUtils.ts +++ b/frontend/src/concepts/connectionTypes/validationUtils.ts @@ -19,7 +19,7 @@ const baseFieldPropertiesSchema = z.object({ const baseDataFieldPropertiesSchema = baseFieldSchema.extend({ envVar: z.string().regex(ENV_VAR_NAME_REGEX, { message: - 'Valid characters include letters, numbers, and underscores ( _ ), and must not start with a number.', + 'Must start with a letter or underscore. Valid characters include letters, numbers, and underscores ( _ ).', }), required: z.boolean().optional(), }); diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx index 5c6d20216a..9d08bfd5c4 100644 --- a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx +++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx @@ -191,14 +191,14 @@ export const ConnectionTypeDataFieldModal: React.FC = ({ variant={isEnvVarValid ? 'default' : 'error'} icon={isEnvVarValid ? undefined : } > - Valid characters include letters, numbers, and underscores ( _ ), and must not start - with a number. + Must start with a letter or underscore. Valid characters include letters, numbers, + and underscores ( _ ). {isEnvVarConflict ? ( } variant="warning"> - {envVar} already exists within this connection type. + {envVar} already exists within this connection type. Try a different name. ) : undefined} diff --git a/frontend/src/pages/projects/screens/detail/connections/ConnectionsList.tsx b/frontend/src/pages/projects/screens/detail/connections/ConnectionsList.tsx index 551e19266d..a6f773baa1 100644 --- a/frontend/src/pages/projects/screens/detail/connections/ConnectionsList.tsx +++ b/frontend/src/pages/projects/screens/detail/connections/ConnectionsList.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button, Popover } from '@patternfly/react-core'; +import { Button, Popover, Tooltip } from '@patternfly/react-core'; import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'; import { ProjectSectionID } from '~/pages/projects/screens/detail/types'; import { ProjectSectionTitles } from '~/pages/projects/screens/detail/const'; @@ -34,6 +34,8 @@ const ConnectionsList: React.FC = () => { isEdit?: boolean; }>(); + const tooltipRef = React.useRef(); + return ( <> { } actions={[ - , + <> + + {enabledConnectionTypes.length === 0 && ( + + )} + , ]} isLoading={!loaded || !connectionTypesLoaded} isEmpty={connections.length === 0} @@ -71,17 +85,29 @@ const ConnectionsList: React.FC = () => { iconImage={typedEmptyImage(ProjectObjectType.connections)} imageAlt="create a connection" createButton={ - + <> + + {enabledConnectionTypes.length === 0 && ( + + )} + } /> } diff --git a/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx b/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx index 5b2cc3a21f..990ee0790b 100644 --- a/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx +++ b/frontend/src/pages/projects/screens/spawner/connections/ConnectionsFormSection.tsx @@ -17,7 +17,10 @@ import { createSecret, replaceSecret } from '~/api'; import { NotebookKind, ProjectKind } from '~/k8sTypes'; import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils'; import { Connection, ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types'; -import { getConnectionTypeDisplayName } from '~/concepts/connectionTypes/utils'; +import { + filterEnabledConnectionTypes, + getConnectionTypeDisplayName, +} from '~/concepts/connectionTypes/utils'; import { useWatchConnectionTypes } from '~/utilities/useWatchConnectionTypes'; import { useNotebooksStates } from '~/pages/projects/notebook/useNotebooksStates'; import { SpawnerPageSectionTitles } from '~/pages/projects/screens/spawner/const'; @@ -71,6 +74,11 @@ export const ConnectionsFormSection: React.FC = ({ }) => { const [connectionTypes] = useWatchConnectionTypes(); + const enabledConnectionTypes = React.useMemo( + () => filterEnabledConnectionTypes(connectionTypes), + [connectionTypes], + ); + const columns = React.useMemo(() => getColumns(connectionTypes), [connectionTypes]); const initialNumberConnections = React.useRef(selectedConnections.length); @@ -106,7 +114,8 @@ export const ConnectionsFormSection: React.FC = ({ [selectedConnections], ); - const tooltipRef = React.useRef(); + const connectionsTooltipRef = React.useRef(); + const connectionTypesTooltipRef = React.useRef(); return ( = ({ variant="secondary" isAriaDisabled={unselectedConnections.length === 0} onClick={() => setShowAttachConnectionsModal(true)} - ref={tooltipRef} + ref={connectionsTooltipRef} > Attach existing connections {unselectedConnections.length === 0 && ( )} + {enabledConnectionTypes.length === 0 && ( + + )} }