From d5fcd30f40deb2eb271d3cd0af6cd5b27d15862c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?=
 <102536422+filipslezaklab@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:06:57 +0100
Subject: [PATCH] fix: cancel while waiting for provisioners (#464)

---
 .../KeyProvisioningModal.tsx                  | 16 +++++++++++--
 .../modals/KeyProvisioningModal/style.scss    | 23 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/users/shared/modals/KeyProvisioningModal/KeyProvisioningModal.tsx b/web/src/pages/users/shared/modals/KeyProvisioningModal/KeyProvisioningModal.tsx
index 10ec4fa6d..7571dafbf 100644
--- 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
index 5aadeeeca..8332359cc 100644
--- 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;
+            }
+          }
         }
       }
     }