ui: following capitalisation guidelines in the new ui (PROJQUAY-6247) (…

…#2488) * ui: unifying title text to follow sentance case (PROJQUAY-6247) * capitalize Repository and Organization pronouns * fixing tests * fixing eslint * convert breadcrumbs and page titles to Titlecase * fixing tests * fix repositories list test * reuse title case to capitalize first word + not capitalizing user input * fixing tests * fixing eslint * fix case of page titles * fixing case for make public
quay · Nov 22, 2023 · a7b448c · a7b448c
1 parent 29acc8d
commit a7b448c
Show file tree

Hide file tree

Showing 30 changed files with 75 additions and 65 deletions.
diff --git a/web/cypress/e2e/breadcrumbs.cy.ts b/web/cypress/e2e/breadcrumbs.cy.ts
@@ -27,7 +27,7 @@ describe('Tests for Breadcrumbs', () => {
         .each(($el, index) => {
           switch (index) {
             case 0:
-              cy.wrap($el).should('have.text', 'organization');
+              cy.wrap($el).should('have.text', 'Organization');
               cy.wrap($el)
                 .children('a')
                 .should('have.attr', 'href', '/organization');
@@ -54,7 +54,7 @@ describe('Tests for Breadcrumbs', () => {
         .each(($el, index) => {
           switch (index) {
             case 0:
-              cy.wrap($el).should('have.text', 'repository');
+              cy.wrap($el).should('have.text', 'Repository');
               cy.wrap($el)
                 .children('a')
                 .should('have.attr', 'href', '/repository');
@@ -87,7 +87,7 @@ describe('Tests for Breadcrumbs', () => {
         .each(($el, index) => {
           switch (index) {
             case 0:
-              cy.wrap($el).should('have.text', 'repository');
+              cy.wrap($el).should('have.text', 'Repository');
               cy.wrap($el)
                 .children('a')
                 .should('have.attr', 'href', '/repository');

diff --git a/web/cypress/e2e/repositories-list.cy.ts b/web/cypress/e2e/repositories-list.cy.ts
@@ -61,7 +61,7 @@ describe('Repositories List Page', () => {
     cy.visit('/repository');
     cy.wait('@getRepositories');
     cy.contains('Create Repository').click();
-    cy.contains('Create repository').should('exist');
+    cy.contains('Create Repository').should('exist');
     //cy.contains('Select namespace').click();
     //cy.get('li:contains("user1")').click();
     cy.get('input[id="repository-name-input"]').type('new-repo');
@@ -81,7 +81,7 @@ describe('Repositories List Page', () => {
   it('create private repository', () => {
     cy.visit('/repository');
     cy.contains('Create Repository').click();
-    cy.contains('Create repository').should('exist');
+    cy.contains('Create Repository').should('exist');
     //cy.contains('Select namespace').click();
     //cy.get('li:contains("user1")').click();
     cy.get('input[id="repository-name-input"]').type('new-repo');
@@ -102,7 +102,7 @@ describe('Repositories List Page', () => {
   it('create repository under organization', () => {
     cy.visit('/organization/testorg');
     cy.contains('Create Repository').click();
-    cy.contains('Create repository').should('exist');
+    cy.contains('Create Repository').should('exist');
     cy.get('button:contains("testorg")').should('exist');
     cy.get('input[id="repository-name-input"]').type('new-repo');
     cy.get('input[id="repository-description-input"]').type(
@@ -157,7 +157,7 @@ describe('Repositories List Page', () => {
     cy.get('button[id="toolbar-dropdown-checkbox"]').click();
     cy.contains('Select page (2)').click();
     cy.contains('Actions').click();
-    cy.contains('Make Public').click();
+    cy.contains('Make public').click();
     cy.contains('Make repositories public');
     cy.contains(
       'Update 2 repositories visibility to be public so they are visible to all user, and may be pulled by all users.',
@@ -172,7 +172,7 @@ describe('Repositories List Page', () => {
     cy.get('button[id="toolbar-dropdown-checkbox"]').click();
     cy.contains('Select page (20)').click();
     cy.contains('Actions').click();
-    cy.contains('Make Private').click();
+    cy.contains('Make private').click();
     cy.contains('Make repositories private');
     cy.contains(
       'Update 20 repositories visibility to be private so they are only visible to certain users, and only may be pulled by certain users.',

diff --git a/web/cypress/e2e/repository-delete.cy.ts b/web/cypress/e2e/repository-delete.cy.ts
@@ -14,14 +14,14 @@ describe('Repository Details Page - Delete', () => {
       }),
     ).as('getConfig');
     cy.visit('/repository/testorg/testrepo?tab=settings');
-    cy.contains('Delete repository').click();
+    cy.contains('Delete Repository').click();
   });
 
   it('Deletes repository', () => {
     cy.contains(
       'Deleting a repository cannot be undone. Here be dragons!',
     ).should('exist');
-    cy.contains('Delete Repository').click();
+    cy.get('button[test-id="delete-repository-btn"]').click();
     cy.contains('Delete Repository?').should('exist');
     cy.contains(
       'You are requesting to delete the repository testorg/testrepo. This action is non-reversable.',

diff --git a/web/cypress/e2e/repository-details.cy.ts b/web/cypress/e2e/repository-details.cy.ts
@@ -138,7 +138,7 @@ describe('Repository Details Page', () => {
       .first()
       .within(() => cy.get('input').click());
     cy.contains('Actions').click();
-    cy.contains('Permanently Delete').click();
+    cy.contains('Permanently delete').click();
     cy.contains('Permanently delete the following tag(s)?').should('exist');
     cy.contains(
       'Tags deleted cannot be restored within the time machine window and will be immediately eligible for garbage collection.',
@@ -182,7 +182,7 @@ describe('Repository Details Page', () => {
     latestRow.first().within(() => {
       cy.get('#tag-actions-kebab').click();
     });
-    cy.contains('Permanently Delete').click();
+    cy.contains('Permanently delete').click();
     cy.contains('Permanently delete the following tag(s)?').should('exist');
     cy.contains(
       'Tags deleted cannot be restored within the time machine window and will be immediately eligible for garbage collection.',
@@ -673,7 +673,7 @@ describe('Repository Details Page', () => {
   });
 });
 
-describe('Tag History Tab', () => {
+describe('Tag history Tab', () => {
   const tagHistoryRows = [
     {
       change:
@@ -718,7 +718,7 @@ describe('Tag History Tab', () => {
 
   it('renders history list', () => {
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.get('#tag-history-table > tr').each(($e, index, $list) => {
       cy.wrap($e).within(() => {
         const expectedValues = tagHistoryRows[index];
@@ -742,7 +742,7 @@ describe('Tag History Tab', () => {
 
   it('search by name', () => {
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.get('input[placeholder="Search by tag name..."').type('manifestlist');
     cy.get('#tag-history-table > tr').each(($e, index, $list) => {
       cy.wrap($e).within(() => {
@@ -768,7 +768,7 @@ describe('Tag History Tab', () => {
       },
     );
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.contains('latest will expire').should('not.exist');
     cy.get('#show-future-checkbox').click();
     cy.contains('latest will expire').should('exist');
@@ -788,7 +788,7 @@ describe('Tag History Tab', () => {
       },
     );
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.get('#show-future-checkbox').click();
     cy.get('#start-time-picker').within(() => {
       cy.get('input[aria-label="Date picker"]').type('2023-07-26');
@@ -816,7 +816,7 @@ describe('Tag History Tab', () => {
 
   it('revert tag', () => {
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.contains('Restore to sha2567e9b6e7ba2842c').click();
     cy.contains('Restore Tag').should('exist');
     cy.contains('This will change the image to which the tag points.').should(
@@ -859,7 +859,7 @@ describe('Tag History Tab', () => {
       },
     );
     cy.visit('/repository/user1/hello-world');
-    cy.contains('Tag History').click();
+    cy.contains('Tag history').click();
     cy.contains('Delete testdelete sha25612345e7ba2842c ').click(10, 10);
     cy.contains('Permanently Delete Tag').should('exist');
     cy.contains(
@@ -884,6 +884,6 @@ describe('Tag History Tab', () => {
       'exist',
     );
     cy.contains('Revert').should('not.exist');
-    cy.contains('Permanently Delete').should('not.exist');
+    cy.contains('Permanently delete').should('not.exist');
   });
 });
diff --git a/web/cypress/e2e/repository-notifications.cy.ts b/web/cypress/e2e/repository-notifications.cy.ts
@@ -177,7 +177,7 @@ describe('Repository Settings - Notifications', () => {
   // TODO: Need notifications in the header
   // to be implemented first
   // it('Creates quay notification',()=>{
-  //     cy.contains('Create Notification').click();
+  //     cy.contains('Create notification').click();
   //     cy.get('#create-notification-form').within(()=>{
   //         cy.contains('Select event').click();
   //         cy.contains('Push to Repository').click();
@@ -198,7 +198,7 @@ describe('Repository Settings - Notifications', () => {
   // });
 
   it('Creates Flowdock notification', () => {
-    cy.contains('Create Notification').click();
+    cy.contains('Create notification').click();
     cy.get('#create-notification-form').within(() => {
       cy.contains('Select event').click();
       cy.contains('Push to Repository').click();
@@ -221,7 +221,7 @@ describe('Repository Settings - Notifications', () => {
   });
 
   it('Creates Hipchat notification', () => {
-    cy.contains('Create Notification').click();
+    cy.contains('Create notification').click();
     cy.get('#create-notification-form').within(() => {
       cy.contains('Select event').click();
       cy.contains('Push to Repository').click();
@@ -245,7 +245,7 @@ describe('Repository Settings - Notifications', () => {
   });
 
   it('Creates Slack notification', () => {
-    cy.contains('Create Notification').click();
+    cy.contains('Create notification').click();
     cy.get('#create-notification-form').within(() => {
       cy.contains('Select event').click();
       cy.contains('Push to Repository').click();
@@ -270,7 +270,7 @@ describe('Repository Settings - Notifications', () => {
   });
 
   it('Creates Webhook notification', () => {
-    cy.contains('Create Notification').click();
+    cy.contains('Create notification').click();
     cy.get('#create-notification-form').within(() => {
       cy.contains('Select event').click();
       cy.contains('Push to Repository').click();
@@ -333,7 +333,7 @@ describe('Repository Settings - Notifications', () => {
       '/api/v1/repository/testorg/testrepo/notification/',
       {},
     ).as('createNotification');
-    cy.contains('Create Notification').click();
+    cy.contains('Create notification').click();
     cy.get('#create-notification-form').within(() => {
       cy.contains('Select event').click();
       cy.contains('Push to Repository').click();

diff --git a/web/cypress/e2e/repository-permissions.cy.ts b/web/cypress/e2e/repository-permissions.cy.ts
@@ -125,7 +125,7 @@ describe('Repository Settings - Permissions', () => {
   });
 
   it('Adds user/robot/team permission', () => {
-    cy.contains('Add Permissions').click();
+    cy.contains('Add permissions').click();
     cy.get('#add-permission-form').within(() => {
       cy.get('input').type('user');
       cy.get('button:contains("user2")').click();
@@ -139,7 +139,7 @@ describe('Repository Settings - Permissions', () => {
       cy.get(`[data-label="type"]`).should('have.text', ' User ');
       cy.get(`[data-label="role"]`).should('have.text', 'read');
     });
-    cy.contains('Add Permissions').click();
+    cy.contains('Add permissions').click();
     cy.get('#add-permission-form').within(() => {
       cy.get('input').type('test');
       cy.contains('testorg+testrobot2').click();
@@ -156,7 +156,7 @@ describe('Repository Settings - Permissions', () => {
       cy.get(`[data-label="type"]`).should('have.text', ' Robot ');
       cy.get(`[data-label="role"]`).should('have.text', 'read');
     });
-    cy.contains('Add Permissions').click();
+    cy.contains('Add permissions').click();
     cy.get('#add-permission-form').within(() => {
       cy.get('input').type('test');
       cy.contains('testteam2').click();

diff --git a/web/cypress/e2e/repository-visibility.cy.ts b/web/cypress/e2e/repository-visibility.cy.ts
@@ -33,11 +33,11 @@ describe('Repository Settings - Visibility', () => {
     cy.contains(
       'This Repository is currently private. Only users on the permissions list may view and interact with it.',
     ).should('exist');
-    cy.contains('Make Public').click();
+    cy.contains('Make public').click();
     cy.contains(
       'This Repository is currently public and is visible to all users, and may be pulled by all users.',
     ).should('exist');
-    cy.contains('Make Private').should('exist');
+    cy.contains('Make private').should('exist');
   });
 
   it('Sets private', () => {
@@ -53,11 +53,11 @@ describe('Repository Settings - Visibility', () => {
     cy.contains(
       'This Repository is currently public and is visible to all users, and may be pulled by all users.',
     ).should('exist');
-    cy.contains('Make Private').click();
+    cy.contains('Make private').click();
     cy.contains(
       'This Repository is currently private. Only users on the permissions list may view and interact with it.',
     ).should('exist');
-    cy.contains('Make Public').should('exist');
+    cy.contains('Make public').should('exist');
   });
 
   it('Upgrade plan as user', () => {

diff --git a/web/src/components/breadcrumb/Breadcrumb.tsx b/web/src/components/breadcrumb/Breadcrumb.tsx
@@ -13,6 +13,7 @@ import {
   parseOrgNameFromUrl,
   parseRepoNameFromUrl,
   parseTagNameFromUrl,
+  titleCase,
 } from 'src/libs/utils';
 
 export function QuayBreadcrumb() {
@@ -38,7 +39,9 @@ export function QuayBreadcrumb() {
     // existingBreadcrumbs is a list of breadcrumbs on the page
     // first breadcrumb is either organization or repository
     if (existingBreadcrumbs.length == 0) {
-      nextBreadcrumb['title'] = nextBreadcrumb['pathname'].split('/').at(-1);
+      nextBreadcrumb['title'] = titleCase(
+        nextBreadcrumb['pathname'].split('/').at(-1),
+      );
     }
     // second breadcrumb is organization name
     else if (existingBreadcrumbs.length == 1) {

diff --git a/web/src/components/modals/robotAccountWizard/AddToRepository.tsx b/web/src/components/modals/robotAccountWizard/AddToRepository.tsx
@@ -24,7 +24,7 @@ import {ToolbarPagination} from 'src/components/toolbar/ToolbarPagination';
 import {Table, Tbody, Td, Th, Thead, Tr} from '@patternfly/react-table';
 import {DropdownWithDescription} from 'src/components/toolbar/DropdownWithDescription';
 import {IRepository} from 'src/resources/RepositoryResource';
-import {formatDate} from 'src/libs/utils';
+import {formatDate, titleCase} from 'src/libs/utils';
 import _ from 'lodash';
 import {SearchInput} from 'src/components/toolbar/SearchInput';
 
@@ -98,8 +98,7 @@ export default function AddToRepository(props: AddToRepositoryProps) {
     const temp = {};
     props.robotPermissions?.map(function (repoPerm) {
       const repo = repoPerm.repository.name;
-      const permission =
-        repoPerm.role.charAt(0).toUpperCase() + repoPerm.role.slice(1);
+      const permission = titleCase(repoPerm.role);
       const newItems = {
         ...temp,
         [repo]: permission,

diff --git a/web/src/libs/utils.ts b/web/src/libs/utils.ts
@@ -145,3 +145,7 @@ export const getAccountTypeForMember = (member: ITeamMember): string => {
     return '(Invited)';
   }
 };
+
+export const titleCase = (str: string): string => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
diff --git a/...tes/OrganizationsList/Organization/Tabs/DefaultPermissions/DefaultPermissionsDropDown.tsx b/...tes/OrganizationsList/Organization/Tabs/DefaultPermissions/DefaultPermissionsDropDown.tsx
@@ -13,6 +13,7 @@ import {
 import {repoPermissions} from './DefaultPermissionsList';
 import {useAlerts} from 'src/hooks/UseAlerts';
 import {AlertVariant} from 'src/atoms/AlertState';
+import {titleCase} from 'src/libs/utils';
 
 export default function DefaultPermissionsDropDown(
   props: DefaultPermissionsDropdownProps,
@@ -55,8 +56,7 @@ export default function DefaultPermissionsDropDown(
           isExpanded={isOpen}
           data-testid={`${props.defaultPermission.createdBy}-permission-dropdown-toggle`}
         >
-          {props.defaultPermission.permission.charAt(0).toUpperCase() +
-            props.defaultPermission.permission.slice(1)}
+          {titleCase(props.defaultPermission.permission)}
         </MenuToggle>
       )}
       isOpen={isOpen}

diff --git a/web/src/routes/OrganizationsList/Organization/Tabs/Settings/AutoPruning.tsx b/web/src/routes/OrganizationsList/Organization/Tabs/Settings/AutoPruning.tsx
@@ -206,7 +206,7 @@ export default function AutoPruning(props: AutoPruning) {
   return (
     <>
       <Title headingLevel="h2" style={{paddingBottom: '.5em'}}>
-        Auto Pruning Policies
+        Auto-Pruning Policies
       </Title>
       <p style={{paddingBottom: '1em'}}>
         Auto-pruning policies automatically delete tags across all repositories

diff --git a/web/src/routes/OrganizationsList/Organization/Tabs/Settings/CLIConfiguration.tsx b/web/src/routes/OrganizationsList/Organization/Tabs/Settings/CLIConfiguration.tsx
@@ -12,7 +12,7 @@ export const CliConfiguration = () => {
         direction={{default: 'column'}}
       >
         <FlexItem>
-          <Title headingLevel="h3">Docker CLI Password</Title>
+          <Title headingLevel="h3">Docker CLI password</Title>
         </FlexItem>
         <FlexItem>
           {`The Docker CLI stores passwords entered on the command line in

diff --git a/web/src/routes/OrganizationsList/Organization/Tabs/Settings/GeneralSettings.tsx b/web/src/routes/OrganizationsList/Organization/Tabs/Settings/GeneralSettings.tsx
@@ -236,7 +236,7 @@ export const GeneralSettings = (props: GeneralSettingsProps) => {
           <GridItem span={6}>
             <FormGroup
               isInline
-              label="Full Name"
+              label="Full name"
               fieldId="org-settings-fullname"
             >
               <TextInput
@@ -278,7 +278,7 @@ export const GeneralSettings = (props: GeneralSettingsProps) => {
         </Grid>
       )}
 
-      <FormGroup isInline label="Time Machine" fieldId="form-time-machine">
+      <FormGroup isInline label="Time machine" fieldId="form-time-machine">
         <FormSelect
           placeholder="Time Machine"
           aria-label="Time Machine select"