DEVPROD-4757 Add additional confirmation to default to repo button (#100

)
evergreen-ci · May 2, 2024 · 3d3d4db · 3d3d4db
1 parent 95f9f94
commit 3d3d4db
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 4 deletions.
diff --git a/apps/spruce/cypress/integration/projectSettings/access.ts b/apps/spruce/cypress/integration/projectSettings/access.ts
@@ -43,6 +43,7 @@ describe("Access page", () => {
 
   it("Clicking on 'Default to Repo on Page' selects the 'Default to repo (unrestricted)' radio box and produces a success banner", () => {
     cy.dataCy("default-to-repo-button").click();
+    cy.getInputByLabel('Type "confirm" to confirm your action').type("confirm");
     cy.dataCy("default-to-repo-modal").contains("Confirm").click();
     cy.validateToast("success", "Successfully defaulted page to repo");
     cy.getInputByLabel("Default to repo (unrestricted)").should("be.checked");

diff --git a/apps/spruce/cypress/integration/projectSettings/defaulting_to_repo.ts b/apps/spruce/cypress/integration/projectSettings/defaulting_to_repo.ts
@@ -220,7 +220,10 @@ describe("Project Settings when defaulting to repo", () => {
       cy.dataCy("navitem-github-commitqueue").click();
       cy.dataCy("default-to-repo-button").click();
       cy.dataCy("default-to-repo-modal").should("be.visible");
-      cy.dataCy("default-to-repo-modal").contains("button", "Confirm").click();
+      cy.getInputByLabel('Type "confirm" to confirm your action').type(
+        "confirm",
+      );
+      cy.dataCy("default-to-repo-modal").contains("Confirm").click();
       cy.validateToast("success", "Successfully defaulted page to repo");
       cy.dataCy("accordion-toggle").scrollIntoView();
       cy.dataCy("accordion-toggle")

diff --git a/apps/spruce/cypress/integration/projectSettings/repo_settings.ts b/apps/spruce/cypress/integration/projectSettings/repo_settings.ts
@@ -194,7 +194,10 @@ describe("Repo Settings", () => {
       cy.visit(getAccessRoute(projectUseRepoEnabled));
       cy.dataCy("default-to-repo-button").click();
       cy.dataCy("default-to-repo-modal").should("be.visible");
-      cy.dataCy("default-to-repo-modal").contains("button", "Confirm").click();
+      cy.getInputByLabel('Type "confirm" to confirm your action').type(
+        "confirm",
+      );
+      cy.dataCy("default-to-repo-modal").contains("Confirm").click();
       cy.validateToast("success", "Successfully defaulted page to repo");
       cy.dataCy("navitem-patch-aliases").click();
       cy.dataCy("expandable-card-title").contains("my alias name");

diff --git a/apps/spruce/src/constants/externalResources.ts b/apps/spruce/src/constants/externalResources.ts
@@ -9,7 +9,11 @@ export const wikiBaseUrl =
 
 export const wikiUrl = `${wikiBaseUrl}/Home`;
 
-export const projectDistroSettingsDocumentationUrl = `${wikiBaseUrl}/Project-Configuration/Project-and-Distro-Settings`;
+const projectSettingsDocumentationUrl = `${wikiBaseUrl}/Project-Configuration`;
+
+export const projectDistroSettingsDocumentationUrl = `${projectSettingsDocumentationUrl}/Project-and-Distro-Settings`;
+
+export const projectSettingsRepoSettingsDocumentationUrl = `${projectSettingsDocumentationUrl}/Repo-Level-Settings`;
 
 export const versionControlDocumentationUrl = `${projectDistroSettingsDocumentationUrl}#version-control`;
 

diff --git a/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx b/apps/spruce/src/pages/projectSettings/DefaultSectionToRepoModal.tsx
@@ -1,6 +1,9 @@
 import { useMutation } from "@apollo/client";
+import { Body } from "@leafygreen-ui/typography";
 import { useProjectSettingsAnalytics } from "analytics";
 import { ConfirmationModal } from "components/ConfirmationModal";
+import { StyledLink } from "components/styles";
+import { projectSettingsRepoSettingsDocumentationUrl } from "constants/externalResources";
 import { useToastContext } from "context/toast";
 import {
   DefaultSectionToRepoMutation,
@@ -55,9 +58,20 @@ export const DefaultSectionToRepoModal = ({
         handleClose();
       }}
       open={open}
+      variant="danger"
+      requiredInputText="confirm"
       title="Are you sure you want to default all settings in this section to the repo settings?"
     >
-      Settings will continue to be modifiable at the project level.
+      <>
+        <Body weight="medium">
+          This operation is not reversible and will overwrite any existing
+          project settings! Read more{" "}
+          <StyledLink href={projectSettingsRepoSettingsDocumentationUrl}>
+            here.
+          </StyledLink>
+        </Body>
+        Settings will continue to be modifiable at the project level.
+      </>
     </ConfirmationModal>
   );
 };
diff --git a/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx b/apps/spruce/src/pages/projectSettings/HeaderButtons.tsx
@@ -143,6 +143,7 @@ export const HeaderButtons: React.FC<Props> = ({ id, projectType, tab }) => {
           <Button
             onClick={() => setDefaultModalOpen(true)}
             data-cy="default-to-repo-button"
+            title="Clicking this button will open a confirmation modal with more information."
           >
             Default to Repo on Page
           </Button>