feat(client): update profile ui (#66889)

e2e/experience.spec.ts

@@ -17,16 +17,12 @@ test.describe('Add Experience Item', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/developmentuser');
 
-    await page.getByRole('button', { name: 'Edit my profile' }).click();
+    // The 'Add experience' icon button is on the profile page directly.
+    // Click it to open the experience modal.
+    await page.getByRole('button', { name: 'Add experience' }).click();
 
-    await expect(async () => {
-      const addExperienceItemButton = page.getByRole('button', {
-        name: 'Add experience'
-      });
-      await addExperienceItemButton.click();
-
-      await expect(addExperienceItemButton).toBeDisabled({ timeout: 1 });
-    }).toPass();
+    // Wait for the experience form to be visible inside the modal.
+    await expect(page.getByLabel('Company')).toBeVisible();
   });
 
   test('The company has validation', async ({ page }) => {
@@ -101,20 +97,15 @@ test.describe('Add Experience Item', () => {
     await page.locator('input[name="experience-location"]').fill('Remote');
     await page.getByLabel('Description').fill('Worked on various projects');
 
-    await page.getByRole('button', { name: 'Remove Experience' }).click();
-
-    await page.getByRole('button', { name: 'Close' }).click();
+    await page.getByRole('button', { name: 'Remove experience' }).click();
 
+    // Modal closes automatically after removal
     await expect(page.getByRole('alert').first()).toContainText(
       /We have updated your experience/
     );
   });
 
   test('It should be possible to add an experience item', async ({ page }) => {
-    await expect(
-      page.getByRole('button', { name: 'Add experience' })
-    ).toBeDisabled();
-
     await page.getByLabel('Company').fill('freeCodeCamp');
     await page.getByLabel('Job Title').fill('Software Engineer');
     await page.getByLabel('Start Date').fill('01/2020');
@@ -124,7 +115,8 @@ test.describe('Add Experience Item', () => {
     await page.getByLabel('Description').fill('Worked on various projects');
 
     await page.getByRole('button', { name: 'Save experience' }).click();
-    await page.getByRole('button', { name: 'Close' }).click();
+
+    // Modal closes automatically after a successful save
     await expect(page.getByRole('alert').first()).toContainText(
       /We have updated your experience/
     );