Solved Layout Shift issue and minor fixes

openshift · Apr 25, 2023 · 962b38b · 962b38b
1 parent fadbdb9
commit 962b38b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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}