From 962b38b6e5f21ae0d3d9351a081becf6f7e8e8e9 Mon Sep 17 00:00:00 2001
From: Lucifergene <akundu@redhat.com>
Date: Tue, 25 Apr 2023 23:57:42 +0530
Subject: [PATCH] Solved Layout Shift issue and minor fixes

---
 .../locales/en/knative-plugin.json            |  1 +
 .../test-function/TestFunctionModal.scss      | 16 ++++++++++
 .../test-function/TestFunctionModal.tsx       | 31 ++++++++++++-------
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/frontend/packages/knative-plugin/locales/en/knative-plugin.json b/frontend/packages/knative-plugin/locales/en/knative-plugin.json
index f0aac0ad549d..8acc547134e2 100644
--- a/frontend/packages/knative-plugin/locales/en/knative-plugin.json
+++ b/frontend/packages/knative-plugin/locales/en/knative-plugin.json
@@ -258,6 +258,7 @@
   "An error occurred": "An error occurred",
   "Test": "Test",
   "Back": "Back",
+  "Close": "Close",
   "Add Revision": "Add Revision",
   "Split": "Split",
   "Tag": "Tag",
diff --git a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.scss b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.scss
index 94ef5e27006b..d375fe3511c8 100644
--- a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.scss
+++ b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.scss
@@ -1,4 +1,20 @@
+//Prevent layout shift when Advanced section is opened
+.pf-c-modal-box__body {
+  scrollbar-gutter: stable;
+}
+.pf-c-modal-box > .pf-c-button {
+  top: 32px;
+}
+.pf-c-modal-box__header {
+  padding-top: 32px;
+}
+.pf-c-modal-box__footer {
+  padding-bottom: 32px;
+}
+
 .kn-test-sf-modal {
+  padding-left: 16px;
+
   &__body {
     padding-bottom: 27px;
   }
diff --git a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
index dec9b22e4910..9874203a400f 100644
--- a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
+++ b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
@@ -56,21 +56,27 @@ const TestFunctionModal: React.FC<Props> = (props) => {
           >
             {t('knative-plugin~Test')}
           </Button>
+          &nbsp; &nbsp;
+          <Button type="button" variant="secondary" data-test-id="cancel-action" onClick={cancel}>
+            {t('knative-plugin~Cancel')}
+          </Button>
         </form>
       ) : (
-        <Button
-          type="button"
-          variant="primary"
-          data-test-id="back-action"
-          onClick={() => setCurrentView(ModalPanel.Request)}
-        >
-          {t('knative-plugin~Back')}
-        </Button>
+        <>
+          <Button
+            type="button"
+            variant="primary"
+            data-test-id="back-action"
+            onClick={() => setCurrentView(ModalPanel.Request)}
+          >
+            {t('knative-plugin~Back')}
+          </Button>
+          &nbsp;
+          <Button type="button" variant="secondary" data-test-id="close-action" onClick={close}>
+            {t('knative-plugin~Close')}
+          </Button>
+        </>
       )}
-      &nbsp; &nbsp;
-      <Button type="button" variant="secondary" data-test-id="cancel-action" onClick={cancel}>
-        {t('knative-plugin~Cancel')}
-      </Button>
     </>
   );
 
@@ -79,6 +85,7 @@ const TestFunctionModal: React.FC<Props> = (props) => {
       variant={ModalVariant.small}
       isOpen
       header={header}
+      className="kn-test-sf-modal"
       onClose={close}
       position="top"
       footer={footer}