F #3951: Fix images aspect ratio (#867)

src/fireedge/src/client/components/Cards/SelectCard/styles.js

@@ -19,29 +19,28 @@ export default makeStyles(theme => ({
     })
   }),
   actionArea: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: ({ minHeight = 140 }) => minHeight,
     '&:disabled': {
       filter: 'brightness(0.5)'
     }
   },
   mediaActionArea: {
-    display: 'flex',
-    height: ({ mediaHeight = 140 }) => mediaHeight,
     '&:hover': {
       backgroundColor: theme.palette.secondary.contrastText,
       '& $media': { filter: 'none' }
     }
   },
   media: {
+    width: '100%',
+    paddingTop: '38.85%',
+    overflow: 'hidden',
+    position: 'relative',
     '& img': {
       width: '100%',
-      objectFit: 'cover',
-      maxHeight: ({ mediaHeight = 140 }) => mediaHeight
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
     },
-    flexGrow: 1,
     transition: theme.transitions.create('filter', { duration: '0.2s' }),
     filter: ({ isSelected, disableFilterImage }) => {
       return disableFilterImage
@@ -52,8 +51,8 @@ export default makeStyles(theme => ({
     }
   },
   headerRoot: {
-    alignItems: 'end',
-    alignSelf: 'stretch'
+    // align header icon to top
+    alignItems: 'end'
   },
   headerContent: { overflow: 'auto' },
   headerAvatar: {

src/fireedge/src/client/components/List/ListCards/index.js

@@ -120,7 +120,7 @@ ListCards.propTypes = {
 ListCards.defaultProps = {
   list: [],
   keyProp: 'id',
-  breakpoints: { xs: 12, sm: 4, md: 3, lg: 2 },
+  breakpoints: { xs: 12, sm: 6, md: 4, lg: 2 },
   handleCreate: undefined,
   ButtonCreateComponent: undefined,
   CardComponent: null,

src/fireedge/src/client/containers/ApplicationsInstances/index.js

@@ -48,7 +48,6 @@ function ApplicationsInstances () {
             cardsProps={({ value }) => ({
               handleShow: () => setShowDialog(value)
             })}
-            breakpoints={{ xs: 12, sm: 6, md: 4 }}
           />
         )}
         {showDialog !== false && (

src/fireedge/src/client/containers/ApplicationsTemplates/index.js

@@ -51,7 +51,6 @@ function ApplicationsTemplates () {
               handleDeploy: () => setShowDialog(value),
               handleRemove: undefined
             })}
-            breakpoints={{ xs: 12, sm: 6, md: 4 }}
           />
         )}
         {showDialog !== false && (

src/fireedge/src/client/containers/Providers/index.js

@@ -79,7 +79,6 @@ function Providers () {
                 }
               ]
             })}
-            breakpoints={{ xs: 12, sm: 6, md: 4 }}
           />
         )}
       </Box>

src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Provider/index.js

@@ -59,7 +59,6 @@ const Provider = () => ({
             handleClick: () => handleClick(value, isSelected)
           }
         }}
-        breakpoints={{ xs: 12, sm: 6, md: 4 }}
       />
     )
   }, [])

src/fireedge/src/client/containers/Provisions/Form/Create/index.js

@@ -40,9 +40,11 @@ function ProvisionCreateForm () {
   const onSubmit = formData => {
     const { template, provider, configuration, inputs } = formData
     const { name, description } = configuration
-    const provisionTemplateSelected = template?.[0] ?? {}
     const providerName = provider?.[0]?.NAME
 
+    // clone object from redux store
+    const provisionTemplateSelected = JSON.parse(JSON.stringify(template?.[0] ?? {}))
+
     // update provider name if changed during form
     if (provisionTemplateSelected.defaults?.provision?.provider_name) {
       set(provisionTemplateSelected, 'defaults.provision.provider_name', providerName)

src/fireedge/src/client/containers/Provisions/index.js

@@ -85,7 +85,6 @@ function Provisions () {
                 }
               ]
             })}
-            breakpoints={{ xs: 12, sm: 6, md: 4 }}
           />
         )}
       </Box>