update microcopy per design guidelines (#3403)

remove unused import

disable create connection button and show tooltip on hover

remove key, add aria-describedBy,format

remove duplicate ID on button

fix aria-describedBy check to match disabled check

add ID, apply tooltip to disabled Add Connection button

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(),
 });

frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx

@@ -191,14 +191,14 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
                 variant={isEnvVarValid ? 'default' : 'error'}
                 icon={isEnvVarValid ? undefined : <ExclamationCircleIcon />}
               >
-                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 ( _ ).
               </HelperTextItem>
             </HelperText>
             {isEnvVarConflict ? (
               <HelperText data-testid="envvar-conflict-warning">
                 <HelperTextItem icon={<WarningTriangleIcon />} variant="warning">
-                  {envVar} already exists within this connection type.
+                  {envVar} already exists within this connection type. Try a different name.
                 </HelperTextItem>
               </HelperText>
             ) : undefined}

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<HTMLButtonElement>();
+
   return (
     <>
       <DetailsSection
@@ -49,17 +51,29 @@ const ConnectionsList: React.FC = () => {
           </Popover>
         }
         actions={[
-          <Button
-            key={`action-${ProjectSectionID.CONNECTIONS}`}
-            data-testid="add-connection-button"
-            variant="primary"
-            onClick={() => {
-              setManageConnectionModal({});
-            }}
-            isDisabled={enabledConnectionTypes.length === 0}
-          >
-            Add connection
-          </Button>,
+          <>
+            <Button
+              data-testid="add-connection-button"
+              variant="primary"
+              onClick={() => {
+                setManageConnectionModal({});
+              }}
+              aria-describedby={
+                enabledConnectionTypes.length === 0 ? 'no-connection-types-tooltip' : undefined
+              }
+              isAriaDisabled={enabledConnectionTypes.length === 0}
+              ref={tooltipRef}
+            >
+              Add connection
+            </Button>
+            {enabledConnectionTypes.length === 0 && (
+              <Tooltip
+                id="no-connection-types-tooltip"
+                content="No connection types available"
+                triggerRef={tooltipRef}
+              />
+            )}
+          </>,
         ]}
         isLoading={!loaded || !connectionTypesLoaded}
         isEmpty={connections.length === 0}
@@ -71,17 +85,29 @@ const ConnectionsList: React.FC = () => {
             iconImage={typedEmptyImage(ProjectObjectType.connections)}
             imageAlt="create a connection"
             createButton={
-              <Button
-                key={`action-${ProjectSectionID.CONNECTIONS}`}
-                variant="primary"
-                data-testid="create-connection-button"
-                onClick={() => {
-                  setManageConnectionModal({});
-                }}
-                isDisabled={enabledConnectionTypes.length === 0}
-              >
-                Create connection
-              </Button>
+              <>
+                <Button
+                  variant="primary"
+                  data-testid="create-connection-button"
+                  aria-describedby={
+                    enabledConnectionTypes.length === 0 ? 'no-connection-types-tooltip' : undefined
+                  }
+                  isAriaDisabled={enabledConnectionTypes.length === 0}
+                  onClick={() => {
+                    setManageConnectionModal({});
+                  }}
+                  ref={tooltipRef}
+                >
+                  Create connection
+                </Button>
+                {enabledConnectionTypes.length === 0 && (
+                  <Tooltip
+                    id="no-connection-types-tooltip"
+                    content="No connection types available"
+                    triggerRef={tooltipRef}
+                  />
+                )}
+              </>
             }
           />
         }

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<Props> = ({
 }) => {
   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<Props> = ({
     [selectedConnections],
   );
 
-  const tooltipRef = React.useRef<HTMLButtonElement>();
+  const connectionsTooltipRef = React.useRef<HTMLButtonElement>();
+  const connectionTypesTooltipRef = React.useRef<HTMLButtonElement>();
 
   return (
     <FormSection
@@ -122,26 +131,39 @@ export const ConnectionsFormSection: React.FC<Props> = ({
               variant="secondary"
               isAriaDisabled={unselectedConnections.length === 0}
               onClick={() => setShowAttachConnectionsModal(true)}
-              ref={tooltipRef}
+              ref={connectionsTooltipRef}
             >
               Attach existing connections
             </Button>
             {unselectedConnections.length === 0 && (
               <Tooltip
                 id="no-connections-tooltip"
-                content="No existing connections available"
-                triggerRef={tooltipRef}
+                content="No connections available"
+                triggerRef={connectionsTooltipRef}
               />
             )}
           </FlexItem>
           <FlexItem>
             <Button
               data-testid="create-connection-button"
+              aria-describedby={
+                enabledConnectionTypes.length === 0 ? 'no-connection-types-tooltip' : undefined
+              }
               variant="secondary"
+              content="No connection types available"
+              isAriaDisabled={enabledConnectionTypes.length === 0}
               onClick={() => setManageConnectionModal({ connection: undefined, isEdit: false })}
+              ref={connectionTypesTooltipRef}
             >
               Create connection
             </Button>
+            {enabledConnectionTypes.length === 0 && (
+              <Tooltip
+                id="no-connection-types-tooltip"
+                content="No connection types available"
+                triggerRef={connectionTypesTooltipRef}
+              />
+            )}
           </FlexItem>
         </Flex>
       }