refactor(coral): Update text for blocked actions (#1667)

* Extend tests for deletion blocking topic and connector
* Update text for blocked edit of topic and connector.
* Update text for blocked claim request.
* Update text for blocked schema request.
* Update text for blocked promotion.

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>

Author: programmiri

coral/src/app/features/components/ClaimBanner.test.tsx

@@ -79,7 +79,7 @@ describe("ClaimBanner", () => {
 
       it("shows information that the topic has a pending request", () => {
         const description = screen.getByText(
-          `${testProps.entityName} has pending requests. Your team cannot claim ownership at this time.`
+          `Your team cannot claim ownership at this time. ${testProps.entityName} has pending requests.`
         );
 
         expect(description).toBeVisible();
@@ -101,7 +101,7 @@ describe("ClaimBanner", () => {
 
       it("shows information that the connector has a pending request", () => {
         const description = screen.getByText(
-          `${testProps.entityName} has pending requests. Your team cannot claim ownership at this time.`
+          `Your team cannot claim ownership at this time. ${testProps.entityName} has pending requests.`
         );
 
         expect(description).toBeVisible();
@@ -127,7 +127,7 @@ describe("ClaimBanner", () => {
 
       it("shows information that the topic has an open claim request", () => {
         const description = screen.getByText(
-          `A claim request for ${testProps.entityName} is already in progress.`
+          `Your team cannot claim ownership at this time. A claim request for ${testProps.entityName} is already in progress.`
         );
 
         expect(description).toBeVisible();
@@ -162,7 +162,7 @@ describe("ClaimBanner", () => {
 
       it("shows information that the connector has an open claim request", () => {
         const description = screen.getByText(
-          `A claim request for ${testProps.entityName} is already in progress.`
+          `Your team cannot claim ownership at this time. A claim request for ${testProps.entityName} is already in progress.`
         );
 
         expect(description).toBeVisible();

coral/src/app/features/components/ClaimBanner.tsx

@@ -31,7 +31,7 @@ const ClaimBanner = ({
       <Banner image={illustration} layout="vertical" title={""}>
         <Box.Flex minHeight={"full"}>
           <Box.Flex component={"p"} alignSelf={"center"}>
-            {`${entityName} has pending requests. Your team cannot claim ownership at this time.`}
+            {`Your team cannot claim ownership at this time. ${entityName} has pending requests.`}
           </Box.Flex>
         </Box.Flex>
       </Banner>
@@ -42,7 +42,8 @@ const ClaimBanner = ({
     return (
       <Banner image={illustration} layout="vertical" title={""}>
         <Box component={"p"} marginBottom={"l1"}>
-          A claim request for {entityName} is already in progress.
+          Your team cannot claim ownership at this time. A claim request for{" "}
+          {entityName} is already in progress.
         </Box>
         <InternalLinkButton
           to={`/requests/${entityType}s?search=${entityName}&requestType=CLAIM&status=CREATED&page=1`}

coral/src/app/features/components/EntityDetailsHeader.test.tsx

@@ -435,7 +435,7 @@ describe("EntityDetailsHeader", () => {
         expect(link).toHaveAttribute("aria-disabled", "true");
         expect(link).not.toHaveAttribute("href");
         expect(link).toHaveAccessibleName(
-          "Edit topic. The topic has a pending request."
+          "Edit topic. You cannot edit the topic at this time. my-nice-topic has a pending request."
         );
       });
     });
@@ -459,7 +459,7 @@ describe("EntityDetailsHeader", () => {
         expect(link).toHaveAttribute("aria-disabled", "true");
         expect(link).not.toHaveAttribute("href");
         expect(link).toHaveAccessibleName(
-          "Edit connector. The connector has a pending request."
+          "Edit connector. You cannot edit the connector at this time. my-nice-connector has a pending request."
         );
       });
     });

coral/src/app/features/components/EntityDetailsHeader.tsx

@@ -111,7 +111,7 @@ function EntityDetailsHeader(props: TopicOverviewHeaderProps) {
 
       {showEditButton && hasPendingRequest && (
         <DisabledButtonTooltip
-          tooltip={`The ${entity.type} has a pending request.`}
+          tooltip={`You cannot edit the ${entity.type} at this time. ${entity.name} has a pending request.`}
           role={"link"}
         >
           {`Edit ${entity.type}`}

coral/src/app/features/connectors/details/settings/ConnectorSettings.test.tsx

@@ -350,6 +350,14 @@ describe("ConnectorSettings", () => {
 
       afterAll(cleanup);
 
+      it("shows information connector can not be deleted at the moment", () => {
+        const information = screen.getByText(
+          "You can not create a delete request for this connector:"
+        );
+
+        expect(information).toBeVisible();
+      });
+
       it("shows information that connector has a pending request and open ACL requests", () => {
         const reasonsList = screen.getByRole("list");
         const listItem = within(reasonsList).getAllByRole("listitem");

coral/src/app/features/topics/details/components/PromotionBanner.test.tsx

@@ -145,7 +145,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `${testTopicName} has a pending request.`
+        `You cannot promote the schema at this time. ${testTopicName} has a pending request.`
       );
 
       expect(information).toBeVisible();
@@ -183,7 +183,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `${testTopicName} has a pending request.`
+        `You cannot promote the topic at this time. ${testTopicName} has a pending request.`
       );
 
       expect(information).toBeVisible();
@@ -221,7 +221,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `A claim request for ${testTopicName} is in progress.`
+        `You cannot promote the schema at this time. A claim request for ${testTopicName} is in progress.`
       );
 
       expect(information).toBeVisible();
@@ -259,7 +259,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `A claim request for ${testTopicName} is in progress.`
+        `You cannot promote the topic at this time. A claim request for ${testTopicName} is in progress.`
       );
 
       expect(information).toBeVisible();
@@ -297,7 +297,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `An promotion request for ${testTopicName} is already in progress.`
+        `You cannot promote the schema at this time. An promotion request for ${testTopicName} is already in progress.`
       );
 
       expect(information).toBeVisible();
@@ -335,7 +335,7 @@ describe("PromotionBanner", () => {
 
     it("shows information about the open request", () => {
       const information = screen.getByText(
-        `An promotion request for ${testTopicName} is already in progress.`
+        `You cannot promote the topic at this time. An promotion request for ${testTopicName} is already in progress.`
       );
 
       expect(information).toBeVisible();

coral/src/app/features/topics/details/components/PromotionBanner.tsx

@@ -4,22 +4,24 @@ import { InternalLinkButton } from "src/app/components/InternalLinkButton";
 import illustration from "src/app/images/topic-details-banner-Illustration.svg";
 import { PromotionStatus } from "src/domain/promotion";
 
+type RequestTypeLocal = "CLAIM" | "ALL" | "PROMOTE";
+type EntityTypeLocal = "schema" | "topic";
+
 interface PromotionBannerProps {
   // `entityName` is only optional on
   // KlawApiModel<"PromotionStatus">
   // so we can't rely on it to be part of
   // the promotionDetails
   entityName: string;
   promotionDetails: PromotionStatus;
-  type: "schema" | "topic";
+  type: EntityTypeLocal;
   promoteElement: ReactElement;
   hasOpenClaimRequest: boolean;
   hasOpenRequest: boolean;
   hasError: boolean;
   errorMessage: string;
 }
 
-type RequestTypeLocal = "CLAIM" | "ALL" | "PROMOTE";
 function getRequestType({
   hasOpenClaimRequest,
   hasOpenPromotionRequest,
@@ -41,7 +43,7 @@ function createLink({
   entityName,
   requestType,
 }: {
-  type: "schema" | "topic";
+  type: EntityTypeLocal;
   entityName: string;
   requestType: RequestTypeLocal;
 }): string {
@@ -51,19 +53,23 @@ function createLink({
 }
 
 function createText({
+  type,
   entityName,
   requestType,
 }: {
+  type: "schema" | "topic";
   entityName: string;
   requestType: RequestTypeLocal;
 }): string {
+  const defaultText = `You cannot promote the ${type} at this time.`;
+
   if (requestType === "PROMOTE") {
-    return `An promotion request for ${entityName} is already in progress.`;
+    return `${defaultText} An promotion request for ${entityName} is already in progress.`;
   }
   if (requestType === "CLAIM") {
-    return `A claim request for ${entityName} is in progress.`;
+    return `${defaultText} A claim request for ${entityName} is in progress.`;
   }
-  return `${entityName} has a pending request.`;
+  return `${defaultText} ${entityName} has a pending request.`;
 }
 
 const PromotionBanner = ({
@@ -104,7 +110,7 @@ const PromotionBanner = ({
       hasOpenPromotionRequest,
     });
     const link = createLink({ type, entityName, requestType });
-    const text = createText({ entityName, requestType });
+    const text = createText({ type, entityName, requestType });
 
     return (
       <Banner image={illustration} layout="vertical" title={""}>

coral/src/app/features/topics/details/schema/TopicDetailsSchema.test.tsx

@@ -306,7 +306,7 @@ describe("TopicDetailsSchema", () => {
 
       it("shows information that there is a pending request", () => {
         const info = screen.getByText(
-          `A schema request for ${testTopicName} is already in progress.`
+          `You cannot request a schema at this time. A schema request for ${testTopicName} is already in progress.`
         );
 
         expect(info).toBeVisible();
@@ -503,7 +503,7 @@ describe("TopicDetailsSchema", () => {
 
       it("shows information that there is a pending request", () => {
         const info = screen.getByText(
-          `A schema request for ${testTopicName} is already in progress.`
+          `You cannot request a schema at this time. A schema request for ${testTopicName} is already in progress.`
         );
 
         expect(info).toBeVisible();

coral/src/app/features/topics/details/schema/components/NoSchemaBanner.test.tsx

@@ -165,7 +165,7 @@ describe("NoSchemaBanner", () => {
 
       it("shows information about pending request", () => {
         const text = screen.getByText(
-          `A schema request for ${testTopicName} is already in progress.`
+          `You cannot request a schema at this time. A schema request for ${testTopicName} is already in progress.`
         );
 
         expect(text).toBeVisible();

coral/src/app/features/topics/details/schema/components/OpenSchemaRequestAlert.test.tsx

@@ -12,7 +12,7 @@ describe("OpenSchemaRequestAlert", () => {
 
   it("shows information about pending request", () => {
     const text = screen.getByText(
-      `A schema request for ${testTopicName} is already in progress.`
+      `You cannot request a schema at this time. A schema request for ${testTopicName} is already in progress.`
     );
 
     expect(text).toBeVisible();