adding validation for group name input

Sunandadadi · Feb 13, 2024 · b38bd94 · b38bd94
1 parent 678be22
commit b38bd94
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 6 deletions.
diff --git a/web/cypress/e2e/team-sync.cy.ts b/web/cypress/e2e/team-sync.cy.ts
@@ -30,6 +30,36 @@ describe('OIDC Team Sync', () => {
     ).as('getTeammembers');
   });
 
+  it('Validate OIDC group name', () => {
+    cy.visit('/organization/teamsyncorg/teams/testteam?tab=Teamsandmembership');
+    cy.get('#team-members-toolbar').within(() =>
+      cy.get('button:contains("Enable Directory Sync")').click(),
+    );
+    cy.get('#oidc-team-sync-helper-text').contains(
+      'The expected OIDC group name format is - org_name:team_name. Must match ^[a-z0-9][a-z0-9]+:[a-z0-9]+$',
+    );
+    cy.get('#directory-sync-modal')
+      .find('input[id="team-sync-group-name"]')
+      .type('random');
+    cy.get('button:contains("Enable Sync")').should('be.disabled');
+    cy.get('#directory-sync-modal')
+      .find('input[id="team-sync-group-name"]')
+      .clear();
+
+    cy.get('#directory-sync-modal')
+      .find('input[id="team-sync-group-name"]')
+      .type('1:1');
+    cy.get('button:contains("Enable Sync")').should('be.disabled');
+    cy.get('#directory-sync-modal')
+      .find('input[id="team-sync-group-name"]')
+      .clear();
+
+    cy.get('#directory-sync-modal')
+      .find('input[id="team-sync-group-name"]')
+      .type('org:team');
+    cy.get('button:contains("Enable Sync")').should('not.be.disabled');
+  });
+
   it('Enable directory sync', () => {
     cy.intercept(
       'POST',
@@ -44,7 +74,7 @@ describe('OIDC Team Sync', () => {
     );
     cy.get('#directory-sync-modal')
       .find('input[id="team-sync-group-name"]')
-      .type('random');
+      .type('org:team');
     cy.get('button:contains("Enable Sync")').click();
     cy.wait('@getTeamSyncSuccess');
     cy.contains('Successfully updated team sync config');
@@ -66,7 +96,7 @@ describe('OIDC Team Sync', () => {
     ).should('exist');
     cy.contains('Directory Synchronization Config').should('exist');
     cy.contains('Bound to group').should('exist');
-    cy.contains('random').should('exist');
+    cy.contains('teamsyncorg:groupname').should('exist');
     cy.contains('Last Updated').should('exist');
     cy.contains('Never').should('exist');
     cy.contains('tr', 'teamsyncorg+robotacct');
@@ -87,7 +117,7 @@ describe('OIDC Team Sync', () => {
     ).should('exist');
     cy.contains('Directory Synchronization Config').should('not.exist');
     cy.contains('Bound to group').should('not.exist');
-    cy.contains('random').should('not.exist');
+    cy.contains('org:team').should('not.exist');
     cy.contains('Last Updated').should('not.exist');
     cy.contains('tr', 'teamsyncorg+robotacct');
   });
@@ -148,7 +178,7 @@ describe('OIDC Team Sync', () => {
     cy.contains('button', 'Enable Directory Sync').click();
     cy.get('#directory-sync-modal')
       .find('input[id="team-sync-group-name"]')
-      .type('random');
+      .type('org:team');
     cy.get('button:contains("Enable Sync")').click();
     cy.wait('@getTeamSyncSuccess');
     cy.contains('Successfully updated team sync config');

diff --git a/web/src/components/modals/OIDCTeamSyncModal.tsx b/web/src/components/modals/OIDCTeamSyncModal.tsx
@@ -2,17 +2,46 @@ import {useState} from 'react';
 import {
   Alert,
   Button,
+  HelperText,
+  HelperTextItem,
   Modal,
   Text,
   TextInput,
   TextVariants,
 } from '@patternfly/react-core';
 import Conditional from 'src/components/empty/Conditional';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+interface Validation {
+  message: string;
+  isValid: boolean;
+  type: 'default' | 'error';
+}
+
+const defaultMessage: Validation = {
+  message:
+    'The expected OIDC group name format is - org_name:team_name. Must match ^[a-z0-9][a-z0-9]+:[a-z0-9]+$',
+  isValid: false,
+  type: 'default',
+};
 
 export default function OIDCTeamSyncModal(props: OIDCTeamSyncModalProps) {
   const [groupName, setGroupName] = useState<string>('');
+  const [validation, setValidation] = useState<Validation>(defaultMessage);
 
   const handleInputChange = (value: string) => {
+    const regex = /^[a-z0-9][a-z0-9]+:[a-z0-9]+$/;
+    if (!regex.test(value)) {
+      setValidation({
+        message:
+          'The expected OIDC group name format is - org_name:team_name. Must match ^[a-z0-9][a-z0-9]+:[a-z0-9]+$',
+        isValid: false,
+        type: 'error',
+      });
+    } else {
+      defaultMessage['isValid'] = true;
+      setValidation(defaultMessage);
+    }
     setGroupName(value);
   };
 
@@ -28,6 +57,7 @@ export default function OIDCTeamSyncModal(props: OIDCTeamSyncModalProps) {
           key="confirm"
           variant="primary"
           onClick={() => props.onConfirmSync(groupName)}
+          isDisabled={!validation.isValid}
         >
           Enable Sync
         </Button>,
@@ -47,7 +77,18 @@ export default function OIDCTeamSyncModal(props: OIDCTeamSyncModalProps) {
           type="text"
           onChange={(_event, value) => handleInputChange(value)}
           id="team-sync-group-name"
+          validated={validation.type}
         />
+        <HelperText id="oidc-team-sync-helper-text">
+          <HelperTextItem
+            variant={validation.type}
+            {...(validation.type === 'error' && {
+              icon: <ExclamationCircleIcon />,
+            })}
+          >
+            {validation.message}
+          </HelperTextItem>
+        </HelperText>
       </div>
       <br />
       <Conditional if={props.alertText != null}>

diff --git a/web/src/resources/TeamSyncResource.ts b/web/src/resources/TeamSyncResource.ts
@@ -12,7 +12,7 @@ export async function enableTeamSyncForOrg(
   let data = {};
   if (service == 'oidc') {
     data = {
-      group_config: `${orgName}:${groupName}`,
+      group_config: groupName,
     };
   }
   const response: AxiosResponse = await axios.post(enableSyncUrl, data);

diff --git a/...nsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx b/...nsList/Organization/Tabs/TeamsAndMembership/TeamsView/ManageMembers/ManageMembersList.tsx
@@ -320,7 +320,7 @@ export default function ManageMembersList(props: ManageMembersListProps) {
   useEffect(() => {
     if (teamSyncInfo != null) {
       if (teamSyncInfo.service == 'oidc') {
-        setOIDCGroupName(teamSyncInfo.config?.group_config.split(':')[1]);
+        setOIDCGroupName(teamSyncInfo.config?.group_config);
       }
       setPageInReadOnlyMode(true);
     }