fix: cancel while waiting for provisioners (#464)

DefGuard · Dec 6, 2023 · d5fcd30 · d5fcd30
1 parent 6dfa4b3
commit d5fcd30
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/web/src/pages/users/shared/modals/KeyProvisioningModal/KeyProvisioningModal.tsx b/web/src/pages/users/shared/modals/KeyProvisioningModal/KeyProvisioningModal.tsx
@@ -13,7 +13,10 @@ import SvgIconCancel from '../../../../../shared/components/svg/IconCancel';
 import IconHamburgerClose from '../../../../../shared/components/svg/IconHamburgerClose';
 import { deviceBreakpoints } from '../../../../../shared/constants';
 import { Button } from '../../../../../shared/defguard-ui/components/Layout/Button/Button';
-import { ButtonStyleVariant } from '../../../../../shared/defguard-ui/components/Layout/Button/types';
+import {
+  ButtonSize,
+  ButtonStyleVariant,
+} from '../../../../../shared/defguard-ui/components/Layout/Button/types';
 import { LoaderSpinner } from '../../../../../shared/defguard-ui/components/Layout/LoaderSpinner/LoaderSpinner';
 import { MessageBox } from '../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox';
 import { MessageBoxType } from '../../../../../shared/defguard-ui/components/Layout/MessageBox/types';
@@ -175,8 +178,17 @@ export const KeyProvisioningModal = () => {
           </section>
           {isLoading || !workers || (workers && !workers.length) ? (
             <div className="loader">
-              <LoaderSpinner size={80} />
+              <LoaderSpinner size={180} />
               <p>{LL.modals.provisionKeys.noData.workers()}</p>
+              <div className="controls">
+                <Button
+                  styleVariant={ButtonStyleVariant.STANDARD}
+                  className="cancel"
+                  size={ButtonSize.LARGE}
+                  text={LL.common.controls.cancel()}
+                  onClick={() => setModalState({ visible: false })}
+                />
+              </div>
             </div>
           ) : (
             <WorkerSelectionForm

diff --git a/web/src/pages/users/shared/modals/KeyProvisioningModal/style.scss b/web/src/pages/users/shared/modals/KeyProvisioningModal/style.scss
@@ -95,10 +95,31 @@
         justify-content: center;
         margin-top: auto;
         margin-bottom: auto;
+        row-gap: 24px;
 
-        & > .no-data {
+        & > p {
           width: 100%;
           text-align: center;
+          color: var(--text-body-tertiary);
+        }
+
+        & > .controls {
+          width: 100%;
+          display: flex;
+          flex-flow: nowrap;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          padding: 0 20px;
+
+          .btn {
+            @include media-breakpoint-down(md) {
+              width: 100%;
+            }
+            @include media-breakpoint-up(lg) {
+              min-width: 240px;
+            }
+          }
         }
       }
     }