add "type project name to confirm"

uselagoon · Jun 30, 2024 · 34a5c78 · 34a5c78
1 parent 67d9718
commit 34a5c78
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
@@ -13,7 +13,14 @@ import { IconDashboard } from '../CustomIcons/OrganizationIcons';
 import { DeleteButton } from '../Groups/Styles';
 import NewProject from '../NewProject';
 import PaginatedTable from '../PaginatedTable/PaginatedTable';
-import { Footer, RemoveModalHeader, RemoveModalParagraph, TableActions, Tag } from '../SharedStyles';
+import {
+  Footer,
+  RemoveModalConfirmInput,
+  RemoveModalHeader,
+  RemoveModalParagraph,
+  TableActions,
+  Tag,
+} from '../SharedStyles';
 import { ProjectDashboard, StyledOrgProjects } from './Styles';
 
 const DELETE_PROJECT = gql`
@@ -29,6 +36,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
   const [modalState, setModalState] = useState({
     open: false,
     current: null,
+    confirmValue: '',
   });
 
   const Columns = [
@@ -106,9 +114,19 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
               >
                 <RemoveModalHeader>Are you sure?</RemoveModalHeader>
                 <RemoveModalParagraph>
-                  This action will delete project <span>{project.name}</span> from Lagoon and the organization.
+                  This action will delete project <span className="highlight">{project.name}</span> from Lagoon and the
+                  organization.
                 </RemoveModalParagraph>
 
+                <RemoveModalParagraph>Type the name of the project to confirm.</RemoveModalParagraph>
+
+                <RemoveModalConfirmInput
+                  type="text"
+                  onChange={e => {
+                    setModalState({ ...modalState, confirmValue: e.target.value });
+                  }}
+                />
+
                 <Footer>
                   <Mutation mutation={DELETE_PROJECT} onError={e => console.error(e)}>
                     {(deleteProject, { called, error, data }) => {
@@ -124,7 +142,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
                         <Button
                           testId="deleteConfirm"
                           variant="primary"
-                          disabled={called}
+                          disabled={modalState.confirmValue !== modalState.current || called}
                           loading={called}
                           action={() => {
                             deleteProject({

diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx
@@ -450,8 +450,16 @@ export const RemoveModalParagraph = styled.p`
   line-height: 24px;
   span {
     font-weight: bold;
+    &.highlight {
+      color: #4b84ff;
+    }
   }
 `;
+export const RemoveModalConfirmInput = styled.input`
+  padding: 0.25rem;
+  width: 100%;
+  margin-bottom: 0.5rem;
+`;
 
 export const AddButtonContent = styled.span`
   display: inline-flex;