refactor(coral): Align info banner with links to old interface (#2010)

* Add preview banner to users and teams page. Signed-off-by: Mirjam Aulbach <[email protected]> * Add info banner with link to old interface in env page directly. Signed-off-by: Mirjam Aulbach <[email protected]> * Add info banner with link to old interface in topic details page directly. Signed-off-by: Mirjam Aulbach <[email protected]> * Add info banner with links to old interface in approvals index page instead of each tab component. Signed-off-by: Mirjam Aulbach <[email protected]> * Add info banner with links to old interface in requests index page instead of each tab component. Signed-off-by: Mirjam Aulbach <[email protected]> * Removed unused import Signed-off-by: Mirjam Aulbach <[email protected]> * Add info banner with links to old interface in connector details index page instead of each tab component. Signed-off-by: Mirjam Aulbach <[email protected]> * Update import path for within. Signed-off-by: Mirjam Aulbach <[email protected]> * Update query for flaky ? test Signed-off-by: Mirjam Aulbach <[email protected]> --------- Signed-off-by: Mirjam Aulbach <[email protected]>
Aiven-Open · Nov 22, 2023 · 492f95b · 492f95b
1 parent cd1218a
commit 492f95b
Show file tree

Hide file tree

Showing 36 changed files with 71 additions and 206 deletions.
diff --git a/coral/src/app/components/documentation/DocumentationEditor.test.tsx b/coral/src/app/components/documentation/DocumentationEditor.test.tsx
@@ -1,5 +1,4 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
+import { cleanup, render, screen, within } from "@testing-library/react";
 import { DocumentationEditor } from "src/app/components/documentation/DocumentationEditor";
 import { userEvent } from "@testing-library/user-event";
 import { tabThroughForward } from "src/services/test-utils/tabbing";

diff --git a/coral/src/app/components/documentation/DocumentationView.test.tsx b/coral/src/app/components/documentation/DocumentationView.test.tsx
@@ -1,5 +1,4 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
+import { cleanup, render, screen, within } from "@testing-library/react";
 import { DocumentationView } from "src/app/components/documentation/DocumentationView";
 
 const markdownInput = `# Hello world`;

diff --git a/coral/src/app/features/components/EntityDetailsHeader.test.tsx b/coral/src/app/features/components/EntityDetailsHeader.test.tsx
@@ -1,5 +1,4 @@
-import { cleanup, screen } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
+import { cleanup, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { EntityDetailsHeader } from "src/app/features/components/EntityDetailsHeader";
 import { EnvironmentInfo } from "src/domain/environment";

diff --git a/coral/src/app/features/connectors/details/ConnectorDetails.test.tsx b/coral/src/app/features/connectors/details/ConnectorDetails.test.tsx
@@ -3,8 +3,8 @@ import {
   screen,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
 import { ConnectorDetails } from "src/app/features/connectors/details/ConnectorDetails";
 import {
   ConnectorOverview,
@@ -306,11 +306,10 @@ describe("ConnectorDetails", () => {
 
       await waitForElementToBeRemoved(screen.getByPlaceholderText("Loading"));
 
-      const description = await waitFor(() =>
-        screen.getByText(
-          `This connector is currently owned by ${testConnectorOverview.connectorInfo.teamName}. Select "Claim connector" to request ownership.`
-        )
+      const description = await screen.findByText(
+        `This connector is currently owned by ${testConnectorOverview.connectorInfo.teamName}. Select "Claim connector" to request ownership.`
       );
+
       const button = await waitFor(() =>
         screen.getByRole("button", { name: "Claim connector" })
       );

diff --git a/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.test.tsx b/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.test.tsx
@@ -1,5 +1,4 @@
 import { cleanup, screen } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
 import { userEvent } from "@testing-library/user-event";
 import { ConnectorOverviewResourcesTabs } from "src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs";
 import { ConnectorOverviewTabEnum } from "src/app/router_utils";
@@ -254,17 +253,6 @@ describe("ConnectorOverviewResourceTabs", () => {
 
       expect(tab).toHaveAccessibleName("Overview");
     });
-
-    it("shows a preview banner to enables users to go back to original app", () => {
-      const banner = screen.getByRole("region", { name: "Preview disclaimer" });
-      const link = within(banner).getByRole("link", { name: "old interface" });
-
-      expect(banner).toBeVisible();
-      expect(link).toHaveAttribute(
-        "href",
-        `/connectorOverview?connectorName=${testConnectorName}`
-      );
-    });
   });
 
   describe("enables users to switch panels", () => {

diff --git a/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.tsx b/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.tsx
@@ -1,7 +1,6 @@
 import { Alert, Box, Icon, Tabs } from "@aivenio/aquarium";
 import loading from "@aivenio/aquarium/icons/loading";
 import { NavigateFunction, Outlet, useNavigate } from "react-router-dom";
-import PreviewBanner from "src/app/components/PreviewBanner";
 import {
   CONNECTOR_OVERVIEW_TAB_ID_INTO_PATH,
   ConnectorOverviewTabEnum,
@@ -128,14 +127,7 @@ function ConnectorOverviewResourcesTabs({
             aria-label={tab.title}
             key={tab.title}
           >
-            {currentTab === tab.connectorOverviewTabEnum && (
-              <div>
-                <PreviewBanner
-                  linkTarget={`/connectorOverview?connectorName=${connectorName}`}
-                />
-                {renderTabContent()}
-              </div>
-            )}
+            {currentTab === tab.connectorOverviewTabEnum && renderTabContent()}
           </Tabs.Tab>
         );
       })}

diff --git a/coral/src/app/features/connectors/details/overview/ConnectorOverview.test.tsx b/coral/src/app/features/connectors/details/overview/ConnectorOverview.test.tsx
@@ -1,8 +1,7 @@
-import { cleanup, screen } from "@testing-library/react";
+import { cleanup, screen, within } from "@testing-library/react";
 import { ConnectorOverview } from "src/app/features/connectors/details/overview/ConnectorOverview";
 import { ConnectorOverview as ConnectorOverviewType } from "src/domain/connector";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
-import { within } from "@testing-library/react/pure";
 
 const mockedUseConnectorDetails = jest.fn();
 jest.mock("src/app/features/connectors/details/ConnectorDetails", () => ({

diff --git a/coral/src/app/features/topics/details/TopicDetails.test.tsx b/coral/src/app/features/topics/details/TopicDetails.test.tsx
@@ -4,8 +4,8 @@ import {
   screen,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
 import { userEvent } from "@testing-library/user-event";
 import { TopicDetails } from "src/app/features/topics/details/TopicDetails";
 import { TopicOverview, TopicSchemaOverview } from "src/domain/topic";

diff --git a/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.test.tsx b/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.test.tsx
@@ -3,7 +3,6 @@ import { userEvent } from "@testing-library/user-event";
 import { TopicOverviewTabEnum } from "src/app/router_utils";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
 import { TopicOverviewResourcesTabs } from "src/app/features/topics/details/components/TopicDetailsResourceTabs";
-import { within } from "@testing-library/react/pure";
 import { TopicOverview } from "src/domain/topic";
 
 const mockedNavigate = jest.fn();
@@ -310,17 +309,6 @@ describe("TopicDetailsResourceTabs", () => {
 
       expect(tab).toHaveAccessibleName("Overview");
     });
-
-    it("shows a preview banner to enables users to go back to original app", () => {
-      const banner = screen.getByRole("region", { name: "Preview disclaimer" });
-      const link = within(banner).getByRole("link", { name: "old interface" });
-
-      expect(banner).toBeVisible();
-      expect(link).toHaveAttribute(
-        "href",
-        `/topicOverview?topicname=${testTopicName}`
-      );
-    });
   });
 
   describe("enables users to switch panels", () => {

diff --git a/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.tsx b/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.tsx
@@ -1,7 +1,6 @@
 import { Alert, Box, Icon, Tabs } from "@aivenio/aquarium";
 import loading from "@aivenio/aquarium/icons/loading";
 import { NavigateFunction, Outlet, useNavigate } from "react-router-dom";
-import PreviewBanner from "src/app/components/PreviewBanner";
 import {
   TOPIC_OVERVIEW_TAB_ID_INTO_PATH,
   TopicOverviewTabEnum,
@@ -152,14 +151,7 @@ function TopicOverviewResourcesTabs({
             aria-label={tab.title}
             key={tab.title}
           >
-            {currentTab === tab.topicOverviewTabEnum && (
-              <div>
-                <PreviewBanner
-                  linkTarget={`/topicOverview?topicname=${topicName}`}
-                />
-                {renderTabContent()}
-              </div>
-            )}
+            {currentTab === tab.topicOverviewTabEnum && renderTabContent()}
           </Tabs.Tab>
         );
       })}

diff --git a/coral/src/app/features/topics/details/overview/TopicOverview.test.tsx b/coral/src/app/features/topics/details/overview/TopicOverview.test.tsx
@@ -4,9 +4,8 @@ import {
   ClusterDetails as ClusterDetailsType,
   getClusterDetails,
 } from "src/domain/cluster";
-import { cleanup, RenderResult, screen } from "@testing-library/react";
+import { cleanup, RenderResult, screen, within } from "@testing-library/react";
 import { getDefinitionList } from "src/services/test-utils/custom-queries";
-import { within } from "@testing-library/react/pure";
 
 const mockedUseTopicDetails = jest.fn();
 jest.mock("src/app/features/topics/details/TopicDetails", () => ({

diff --git a/coral/src/app/features/topics/details/schema/TopicDetailsSchema.test.tsx b/coral/src/app/features/topics/details/schema/TopicDetailsSchema.test.tsx
@@ -1,6 +1,5 @@
 import { Context as AquariumContext } from "@aivenio/aquarium";
-import { cleanup, screen } from "@testing-library/react";
-import { within } from "@testing-library/react/pure";
+import { cleanup, screen, within } from "@testing-library/react";
 import { TopicDetailsSchema } from "src/app/features/topics/details/schema/TopicDetailsSchema";
 import { customRender } from "src/services/test-utils/render-with-wrappers";
 import { TopicSchemaOverview } from "src/domain/topic";

diff --git a/coral/src/app/pages/approvals/acls/index.tsx b/coral/src/app/pages/approvals/acls/index.tsx
@@ -1,13 +1,7 @@
-import PreviewBanner from "src/app/components/PreviewBanner";
 import AclApprovals from "src/app/features/approvals/acls/AclApprovals";
 
 const AclApprovalsPage = () => {
-  return (
-    <>
-      <PreviewBanner linkTarget={"/execAcls"} />
-      <AclApprovals />
-    </>
-  );
+  return <AclApprovals />;
 };
 
 export default AclApprovalsPage;
diff --git a/coral/src/app/pages/approvals/connectors/index.tsx b/coral/src/app/pages/approvals/connectors/index.tsx
@@ -1,13 +1,7 @@
-import PreviewBanner from "src/app/components/PreviewBanner";
 import ConnectorApprovals from "src/app/features/approvals/connectors/ConnectorApprovals";
 
 const ConnectorApprovalsPage = () => {
-  return (
-    <>
-      <PreviewBanner linkTarget={"/execConnectors"} />
-      <ConnectorApprovals />
-    </>
-  );
+  return <ConnectorApprovals />;
 };
 
 export default ConnectorApprovalsPage;
diff --git a/coral/src/app/pages/approvals/index.tsx b/coral/src/app/pages/approvals/index.tsx
@@ -5,7 +5,9 @@ import {
   APPROVALS_TAB_ID_INTO_PATH,
   ApprovalsTabEnum,
   isApprovalsTabEnum,
+  APPROVALS_TAB_PATH_LINK_MAP,
 } from "src/app/router_utils";
+import PreviewBanner from "src/app/components/PreviewBanner";
 
 const ApprovalsPage = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -14,8 +16,10 @@ const ApprovalsPage = () => {
   if (currentTab === undefined) {
     return <Navigate to={`/approvals/topics`} replace={true} />;
   }
+
   return (
     <>
+      <PreviewBanner linkTarget={APPROVALS_TAB_PATH_LINK_MAP[currentTab]} />
       <PageHeader title={"Approve requests"} />
       <ApprovalResourceTabs currentTab={currentTab} />
     </>

diff --git a/coral/src/app/pages/approvals/schemas/index.tsx b/coral/src/app/pages/approvals/schemas/index.tsx
@@ -1,13 +1,7 @@
-import PreviewBanner from "src/app/components/PreviewBanner";
 import SchemaApprovals from "src/app/features/approvals/schemas/SchemaApprovals";
 
 const SchemaApprovalsPage = () => {
-  return (
-    <>
-      <PreviewBanner linkTarget={"/execSchemas"} />
-      <SchemaApprovals />
-    </>
-  );
+  return <SchemaApprovals />;
 };
 
 export default SchemaApprovalsPage;
diff --git a/coral/src/app/pages/approvals/topics/index.tsx b/coral/src/app/pages/approvals/topics/index.tsx
@@ -1,13 +1,7 @@
-import PreviewBanner from "src/app/components/PreviewBanner";
 import TopicApprovals from "src/app/features/approvals/topics/TopicApprovals";
 
 const TopicApprovalsPage = () => {
-  return (
-    <>
-      <PreviewBanner linkTarget={"/execTopics"} />
-      <TopicApprovals />
-    </>
-  );
+  return <TopicApprovals />;
 };
 
 export default TopicApprovalsPage;
diff --git a/coral/src/app/pages/configuration/environments/index.tsx b/coral/src/app/pages/configuration/environments/index.tsx
@@ -6,6 +6,7 @@ import {
   EnvironmentsTabEnum,
   isEnvironmentsTabEnum,
 } from "src/app/router_utils";
+import PreviewBanner from "src/app/components/PreviewBanner";
 
 function findMatchingTab(
   matches: ReturnType<typeof useMatches>
@@ -30,6 +31,7 @@ const EnvironmentsPage = () => {
   }
   return (
     <>
+      <PreviewBanner linkTarget={"/envs"} />
       <PageHeader title={"Environments"} />
       <EnvironmentsTabs currentTab={currentTab} />
     </>

diff --git a/coral/src/app/pages/configuration/environments/kafka-connect/index.tsx b/coral/src/app/pages/configuration/environments/kafka-connect/index.tsx
@@ -1,11 +1,9 @@
 import { PageHeader } from "@aivenio/aquarium";
-import PreviewBanner from "src/app/components/PreviewBanner";
 import KafkaConnectEnvironments from "src/app/features/configuration/environments/KafkaConnect/KafkaConnectEnvironments";
 
 const KafkaConnectEnvironmentsPage = () => {
   return (
     <>
-      <PreviewBanner linkTarget={"/envs"} />
       <PageHeader title={"Kafka Connect Environments"} />
       <KafkaConnectEnvironments />
     </>

diff --git a/coral/src/app/pages/configuration/environments/kafka/index.tsx b/coral/src/app/pages/configuration/environments/kafka/index.tsx
@@ -1,11 +1,9 @@
 import { PageHeader } from "@aivenio/aquarium";
-import PreviewBanner from "src/app/components/PreviewBanner";
 import KafkaEnvironments from "src/app/features/configuration/environments/Kafka/KafkaEnvironments";
 
 const KafkaEnvironmentsPage = () => {
   return (
     <>
-      <PreviewBanner linkTarget={"/envs"} />
       <PageHeader title={"Kafka Environments"} />
       <KafkaEnvironments />
     </>

diff --git a/coral/src/app/pages/configuration/environments/schema-registry/index.tsx b/coral/src/app/pages/configuration/environments/schema-registry/index.tsx
@@ -1,11 +1,9 @@
 import { PageHeader } from "@aivenio/aquarium";
-import PreviewBanner from "src/app/components/PreviewBanner";
 import SchemaRegistryEnvironments from "src/app/features/configuration/environments/SchemaRegistry/SchemaRegistryEnvironments";
 
 const SchemaRegistryEnvironmentsPage = () => {
   return (
     <>
-      <PreviewBanner linkTarget={"/envs"} />
       <PageHeader title={"Schema Registry Environments"} />
       <SchemaRegistryEnvironments />
     </>

diff --git a/coral/src/app/pages/configuration/teams/index.tsx b/coral/src/app/pages/configuration/teams/index.tsx
@@ -1,9 +1,11 @@
 import { PageHeader } from "@aivenio/aquarium";
 import { Teams } from "src/app/features/configuration/teams/Teams";
+import PreviewBanner from "src/app/components/PreviewBanner";
 
 const TeamsPage = () => {
   return (
     <>
+      <PreviewBanner linkTarget={"/teams"} />
       <PageHeader title={"Teams"} />
       <Teams />
     </>

diff --git a/coral/src/app/pages/configuration/users/index.tsx b/coral/src/app/pages/configuration/users/index.tsx
@@ -1,9 +1,11 @@
 import { PageHeader } from "@aivenio/aquarium";
 import { Users } from "src/app/features/configuration/users/Users";
+import PreviewBanner from "src/app/components/PreviewBanner";
 
 const UsersPage = () => {
   return (
     <>
+      <PreviewBanner linkTarget={"/users"} />
       <PageHeader title={"Users"} />
       <Users />
     </>

diff --git a/coral/src/app/pages/connectors/details/index.tsx b/coral/src/app/pages/connectors/details/index.tsx
@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import { ConnectorDetails } from "src/app/features/connectors/details/ConnectorDetails";
+import PreviewBanner from "src/app/components/PreviewBanner";
 
 function ConnectorDetailsPage() {
   const { connectorName } = useParams();
@@ -10,7 +11,14 @@ function ConnectorDetailsPage() {
     return <></>;
   }
 
-  return <ConnectorDetails connectorName={connectorName} />;
+  return (
+    <>
+      <PreviewBanner
+        linkTarget={`/connectorOverview?connectorName=${connectorName}`}
+      />
+      <ConnectorDetails connectorName={connectorName} />
+    </>
+  );
 }
 
 export { ConnectorDetailsPage };
diff --git a/coral/src/app/pages/requests/acls/index.test.tsx b/coral/src/app/pages/requests/acls/index.test.tsx
@@ -1,5 +1,5 @@
 import { customRender } from "src/services/test-utils/render-with-wrappers";
-import { cleanup, screen, within } from "@testing-library/react";
+import { cleanup, screen } from "@testing-library/react";
 import { waitForElementToBeRemoved } from "@testing-library/react/pure";
 import { getAllEnvironmentsForTopicAndAcl } from "src/domain/environment";
 import AclRequestsPage from "src/app/pages/requests/acls/index";
@@ -34,25 +34,6 @@ describe("AclRequestsPage", () => {
 
   afterAll(cleanup);
 
-  it("shows a preview banner to inform users about the early version of the view", () => {
-    const previewBanner = screen.getByLabelText("Preview disclaimer");
-
-    expect(previewBanner).toBeVisible();
-    expect(previewBanner).toHaveTextContent(
-      "You are viewing a preview of the redesigned user interface. You are one of our early reviewers, and your feedback will help us improve the product. You can always go back to the old interface."
-    );
-  });
-
-  it("shows link back back to the original Klaw app for this view in the preview banner", () => {
-    const previewBanner = screen.getByLabelText("Preview disclaimer");
-    const link = within(previewBanner).getByRole("link", {
-      name: "old interface",
-    });
-
-    expect(link).toBeVisible();
-    expect(link).toHaveAttribute("href", "/myAclRequests");
-  });
-
   it("renders the Acl request view", () => {
     const emptyRequests = screen.getByText(
       "No ACL request matched your criteria."