refactor(coral): Update copy (#328)

- update copy for browse topics - update copy in main nav - update copy in header Signed-off-by: Mirjam Aulbach <[email protected]>
Aiven-Open · Dec 15, 2022 · 9e41546 · 9e41546
1 parent c8c8751
commit 9e41546
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 39 deletions.
diff --git a/coral/src/app/features/browse-topics/BrowseTopics.test.tsx b/coral/src/app/features/browse-topics/BrowseTopics.test.tsx
@@ -56,6 +56,8 @@ const getUrlWithParams = ({
   return `/${route}?${new URLSearchParams(params)}`;
 };
 
+const filterByEnvironmentLabel = "Filter by environment";
+const filterByTeamLabel = "Filter by team";
 describe("BrowseTopics.tsx", () => {
   beforeAll(() => {
     server.listen();
@@ -182,7 +184,7 @@ describe("BrowseTopics.tsx", () => {
     it("renders a select element to filter topics by Kafka environment", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterByEnvironmentLabel,
       });
 
       expect(select).toBeEnabled();
@@ -191,7 +193,7 @@ describe("BrowseTopics.tsx", () => {
     it("renders a select element to filter topics by team", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterByTeamLabel,
       });
 
       expect(select).toBeEnabled();
@@ -355,7 +357,7 @@ describe("BrowseTopics.tsx", () => {
     it("shows a select element for environments with `ALL` preselected", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterByEnvironmentLabel,
       });
 
       expect(select).toHaveValue("ALL");
@@ -364,7 +366,7 @@ describe("BrowseTopics.tsx", () => {
     it("shows an information that the list is updated after user selected an environment", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterByEnvironmentLabel,
       });
       const option = within(select).getByRole("option", {
         name: "DEV",
@@ -380,7 +382,7 @@ describe("BrowseTopics.tsx", () => {
     it("changes active selected option when user selects `DEV`", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterByEnvironmentLabel,
       });
       const option = within(select).getByRole("option", {
         name: "DEV",
@@ -407,7 +409,7 @@ describe("BrowseTopics.tsx", () => {
       expect(getAllTopics()).toHaveLength(10);
 
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterByEnvironmentLabel,
       });
       const option = within(select).getByRole("option", {
         name: "DEV",
@@ -444,7 +446,7 @@ describe("BrowseTopics.tsx", () => {
     it("shows a select element for team with `All teams` preselected", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterByTeamLabel,
       });
 
       expect(select).toHaveValue("f5ed03b4-c0da-4b18-a534-c7e9a13d1342");
@@ -453,7 +455,7 @@ describe("BrowseTopics.tsx", () => {
     it("changes active selected option when user selects `TEST_TEAM_02`", async () => {
       await waitForElementToBeRemoved(screen.getByText("Loading..."));
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterByTeamLabel,
       });
       const option = within(select).getByRole("option", {
         name: "TEST_TEAM_02",
@@ -480,7 +482,7 @@ describe("BrowseTopics.tsx", () => {
       expect(getAllTopics()).toHaveLength(10);
 
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterByTeamLabel,
       });
       const option = within(select).getByRole("option", {
         name: "TEST_TEAM_02",

diff --git a/...l/src/app/features/browse-topics/components/select-environment/SelectEnvironment.test.tsx b/...l/src/app/features/browse-topics/components/select-environment/SelectEnvironment.test.tsx
@@ -12,6 +12,7 @@ import { customRender } from "src/services/test-utils/render-with-wrappers";
 import { waitForElementToBeRemoved } from "@testing-library/react/pure";
 import userEvent from "@testing-library/user-event";
 
+const filterLabel = "Filter by environment";
 describe("SelectEnvironment.tsx", () => {
   beforeAll(() => {
     server.listen();
@@ -45,7 +46,7 @@ describe("SelectEnvironment.tsx", () => {
 
     it("shows a select element for Kafka environments", () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterLabel,
       });
 
       expect(select).toBeEnabled();
@@ -142,7 +143,7 @@ describe("SelectEnvironment.tsx", () => {
 
     it("updates state for api call when user selects a new environment", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterLabel,
       });
       const option = screen.getByRole("option", {
         name: mockedEnvironmentDev.name,
@@ -155,7 +156,7 @@ describe("SelectEnvironment.tsx", () => {
 
     it("sets the environment the user choose as active option", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterLabel,
       });
       const option = screen.getByRole("option", {
         name: mockedEnvironmentDev.name,
@@ -197,7 +198,7 @@ describe("SelectEnvironment.tsx", () => {
 
     it(`sets "${mockedEnvironmentTst.name}" as search param when user selected it`, async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterLabel,
       });
 
       const option = screen.getByRole("option", {
@@ -215,7 +216,7 @@ describe("SelectEnvironment.tsx", () => {
 
     it("removes search param when user chooses All environment", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: filterLabel,
       });
 
       const option = screen.getByRole("option", { name: "All environments" });

diff --git a/coral/src/app/features/browse-topics/components/select-environment/SelectEnvironment.tsx b/coral/src/app/features/browse-topics/components/select-environment/SelectEnvironment.tsx
@@ -50,7 +50,7 @@ function SelectEnv(props: SelectEnvProps) {
   } else {
     return (
       <NativeSelect
-        labelText="Filter By Environment"
+        labelText="Filter by environment"
         value={environment}
         onChange={(event) => onChangeEnv(event.target.value)}
       >

diff --git a/coral/src/app/features/browse-topics/components/select-team/SelectTeam.test.tsx b/coral/src/app/features/browse-topics/components/select-team/SelectTeam.test.tsx
@@ -7,6 +7,7 @@ import { customRender } from "src/services/test-utils/render-with-wrappers";
 import { ALL_TEAMS_VALUE } from "src/domain/team/team-types";
 import { waitForElementToBeRemoved } from "@testing-library/react/pure";
 
+const filterLabel = "Filter by team";
 describe("SelectTeam.tsx", () => {
   beforeAll(() => {
     server.listen();
@@ -37,7 +38,7 @@ describe("SelectTeam.tsx", () => {
 
     it("shows a select element for Team", () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterLabel,
       });
 
       expect(select).toBeEnabled();
@@ -134,7 +135,7 @@ describe("SelectTeam.tsx", () => {
 
     it("updates state for api call when user selects a new team", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterLabel,
       });
       const option = screen.getByRole("option", { name: optionToSelect });
 
@@ -145,7 +146,7 @@ describe("SelectTeam.tsx", () => {
 
     it("sets the team the user choose as active option", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterLabel,
       });
       const option = screen.getByRole("option", { name: optionToSelect });
 
@@ -186,7 +187,7 @@ describe("SelectTeam.tsx", () => {
 
     it("sets `TEST_TEAM_01` as search param when user selected it", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: filterLabel,
       });
 
       const option = screen.getByRole("option", { name: optionToSelect });

diff --git a/coral/src/app/features/browse-topics/components/select-team/SelectTeam.tsx b/coral/src/app/features/browse-topics/components/select-team/SelectTeam.tsx
@@ -48,7 +48,7 @@ function SelectTeam(props: SelectTeamProps) {
   } else {
     return (
       <NativeSelect
-        labelText="Filter By Team"
+        labelText="Filter by team"
         value={team}
         onChange={(event) => onChangeEnv(event.target.value)}
       >

diff --git a/coral/src/app/layout/main-navigation/MainNavigation.test.tsx b/coral/src/app/layout/main-navigation/MainNavigation.test.tsx
@@ -20,15 +20,15 @@ jest.mock("@aivenio/aquarium", () => {
 
 const navLinks = [
   {
-    name: "Overviews",
+    name: "Dashboard",
     linkTo: "/index",
   },
   { name: "Audit Log", linkTo: "/activityLog" },
   { name: "Settings", linkTo: "/serverConfig" },
 ];
 
 const submenuItems = [
-  { name: "Kafka Connector", links: ["All Connectors", "Connectors Requests"] },
+  { name: "Kafka Connectors", links: ["All Connectors", "Connector Requests"] },
   { name: "Users and Teams", links: ["Users", "Teams", "User Requests"] },
 ];
 
@@ -47,12 +47,12 @@ const submenuItemTopics = [
 // is no longer open per default
 // keyboard a11y is tested in submenu component
 const navOrderFirstLevel = [
-  { name: "Overviews", isSubmenu: false },
+  { name: "Dashboard", isSubmenu: false },
   { name: "Topics", isSubmenu: true },
   { name: "All Topics", isSubmenu: false },
   { name: "Approval Requests", isSubmenu: false },
   { name: "My Team's Requests", isSubmenu: false },
-  { name: "Kafka Connector", isSubmenu: true },
+  { name: "Kafka Connectors", isSubmenu: true },
   { name: "Users and Teams", isSubmenu: true },
   { name: "Audit Log", isSubmenu: false },
   { name: "Settings", isSubmenu: false },

diff --git a/coral/src/app/layout/main-navigation/MainNavigation.tsx b/coral/src/app/layout/main-navigation/MainNavigation.tsx
@@ -23,7 +23,7 @@ function MainNavigation() {
           <MainNavigationLink
             icon={database}
             href={`/index`}
-            linkText={"Overviews"}
+            linkText={"Dashboard"}
           />
         </li>
         <li>
@@ -52,15 +52,15 @@ function MainNavigation() {
         <li>
           <MainNavigationSubmenuList
             icon={layoutGroupBy}
-            text={"Kafka Connector"}
+            text={"Kafka Connectors"}
           >
             <MainNavigationLink
               href={`/kafkaConnectors`}
               linkText={"All Connectors"}
             />
             <MainNavigationLink
-              href={`/kafkaConnectors`}
-              linkText={"Connectors Requests"}
+              href={`/execConnectors`}
+              linkText={"Connector Requests"}
             />
           </MainNavigationSubmenuList>
         </li>

diff --git a/coral/src/app/pages/topics/index.test.tsx b/coral/src/app/pages/topics/index.test.tsx
@@ -72,34 +72,34 @@ describe("Topics", () => {
 
     it("shows a headline", async () => {
       const headline = screen.getByRole("heading", {
-        name: "Browse all topics",
+        name: "All topics",
       });
 
       expect(headline).toBeVisible();
     });
 
-    it("renders 'Request A New Topic' button in heading", async () => {
+    it("renders 'Request new topic' button in heading", async () => {
       const button = screen.getByRole("button", {
-        name: "Request A New Topic",
+        name: "Request new topic",
       });
 
       expect(button).toBeVisible();
       expect(button).toBeEnabled();
     });
 
-    it("navigates to '/requestTopics' when user clicks the button 'Request A New Topic'", async () => {
+    it("navigates to '/requestTopics' when user clicks the button 'Request new topic'", async () => {
       const button = screen.getByRole("button", {
-        name: "Request A New Topic",
+        name: "Request new topic",
       });
 
       await userEvent.click(button);
 
       await waitFor(() => expect(window.location.href).toBe("/requestTopics"));
     });
 
-    it("navigates to '/requestTopics' when user presses Enter while 'Request A New Topic' button is focused", async () => {
+    it("navigates to '/requestTopics' when user presses Enter while 'Request new topic' button is focused", async () => {
       const button = screen.getByRole("button", {
-        name: "Request A New Topic",
+        name: "Request new topic",
       });
 
       await tabNavigateTo({ targetElement: button });
@@ -111,15 +111,15 @@ describe("Topics", () => {
 
     it("renders a select element to filter topics by Kafka environment", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Environment",
+        name: "Filter by environment",
       });
 
       expect(select).toBeEnabled();
     });
 
     it("renders a select element to filter topics by team", async () => {
       const select = screen.getByRole("combobox", {
-        name: "Filter By Team",
+        name: "Filter by team",
       });
 
       expect(select).toBeEnabled();

diff --git a/coral/src/app/pages/topics/index.tsx b/coral/src/app/pages/topics/index.tsx
@@ -11,9 +11,9 @@ const Topics = () => {
       <Layout>
         <PreviewBanner linkTarget={"/browseTopics"} />
         <PageHeader
-          title={"Browse all topics"}
+          title={"All topics"}
           primaryAction={{
-            text: "Request A New Topic",
+            text: "Request new topic",
             // @TODO Replace by useNavigate once the request page is implemented in coral
             onClick: () => (window.location.href = "/requestTopics"),
             icon: add,