Merge pull request #10766 from openshift-cherrypick-robot/cherry-pick…

…-10688-to-release-4.9 [release-4.9] Bug 2036859: Shift invalid devfile alert down
openshift · Jan 24, 2022 · e94d5df · e94d5df
2 parents 5a1c48f + e89a6e3
commit e94d5df
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/frontend/packages/dev-console/src/components/import/devfile/DevfileStrategySection.scss b/frontend/packages/dev-console/src/components/import/devfile/DevfileStrategySection.scss
@@ -0,0 +1,7 @@
+.odc-devfile-strategy-section {
+  &__error-alert {
+    // Extra margin to offset strategy selector button overlap
+    // at .odc-import-strategy-section__strategy-selector
+    margin: 3.2em 0;
+  }
+}
diff --git a/frontend/packages/dev-console/src/components/import/devfile/DevfileStrategySection.tsx b/frontend/packages/dev-console/src/components/import/devfile/DevfileStrategySection.tsx
@@ -8,6 +8,7 @@ import { safeYAMLToJS } from '@console/shared/src/utils/yaml';
 import FormSection from '../section/FormSection';
 import { useDevfileServer, useDevfileSource, useSelectedDevfileSample } from './devfileHooks';
 import DevfileInfo from './DevfileInfo';
+import './DevfileStrategySection.scss';
 
 const DevfileStrategySection: React.FC = () => {
   const { t } = useTranslation();
@@ -93,9 +94,16 @@ const DevfileStrategySection: React.FC = () => {
   return (
     <>
       {devfileParseError && (
-        <Alert isInline variant="danger" title={t('devconsole~Import is not possible.')}>
-          {devfileParseError}
-        </Alert>
+        <FormSection>
+          <Alert
+            isInline
+            className="odc-devfile-strategy-section__error-alert"
+            variant="danger"
+            title={t('devconsole~Import is not possible.')}
+          >
+            {devfileParseError}
+          </Alert>
+        </FormSection>
       )}
       {showEditImportStrategy && importType !== 'devfile' && (
         <FormSection>