F #6786: Fix issue creating Security Group (#3404)

Co-authored-by: Tino Vázquez <cvazquez@opennebula.io>

src/fireedge/src/modules/components/Cards/SecurityGroupCard.js

@@ -13,22 +13,33 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, ReactElement, useMemo } from 'react'
-import { useTheme, Typography } from '@mui/material'
 import PropTypes from 'prop-types'
+import { memo, ReactElement, useMemo } from 'react'
 
-import { User, Group, PcCheck, PcNoEntry, PcWarning } from 'iconoir-react'
+import { Typography, useTheme } from '@mui/material'
+import { Group, PcCheck, PcNoEntry, PcWarning, User } from 'iconoir-react'
 
+import { css } from '@emotion/css'
+import { Tr } from '@modules/components/HOC'
 import MultipleTags from '@modules/components/MultipleTags'
 import { rowStyles } from '@modules/components/Tables/styles'
 import { SecurityGroup, T } from '@ConstantsModule'
-import { getColorFromString, getUniqueLabels } from '@ModelsModule'
 import { useAuth } from '@FeaturesModule'
-import { Tr } from '@modules/components/HOC'
+import { getColorFromString, getUniqueLabels } from '@ModelsModule'
+import clsx from 'clsx'
 
 const getTotalOfResources = (resources) =>
   [resources?.ID ?? []].flat().length || 0
 
+const useStyles = () => ({
+  internalContainer: css({
+    display: 'flex',
+  }),
+  actions: css({
+    marginLeft: 'auto',
+  }),
+})
+
 const SecurityGroupCard = memo(
   /**
    * @param {object} props - Props
@@ -42,6 +53,8 @@ const SecurityGroupCard = memo(
   ({ securityGroup, rootProps, actions, onClickLabel, onDeleteLabel }) => {
     const theme = useTheme()
     const classes = useMemo(() => rowStyles(theme), [theme])
+
+    const internalClasses = useStyles()
     const { labels: userLabels } = useAuth()
 
     const {
@@ -84,38 +97,45 @@ const SecurityGroupCard = memo(
 
     return (
       <div {...rootProps} data-cy={`secgroup-${ID}`}>
-        <div className={classes.main}>
-          <div className={classes.title}>
-            <Typography noWrap component="span">
-              {NAME}
-            </Typography>
+        <div className={clsx(classes.main, internalClasses.internalContainer)}>
+          <div>
+            <div className={classes.title}>
+              <Typography noWrap component="span">
+                {NAME}
+              </Typography>
 
-            <MultipleTags tags={labels} />
-          </div>
-          <div className={classes.caption}>
-            <span>{`#${ID}`}</span>
-            <span title={`${Tr(T.Owner)}: ${UNAME}`}>
-              <User />
-              <span data-cy="uname">{` ${UNAME}`}</span>
-            </span>
-            <span title={`${Tr(T.Group)}: ${GNAME}`}>
-              <Group />
-              <span data-cy="gname">{` ${GNAME}`}</span>
-            </span>
-            <span title={`${Tr(T.TotalUpdatedVms)}: ${totalUpdatedVms}`}>
-              <PcCheck />
-              <span>{` ${totalUpdatedVms}`}</span>
-            </span>
-            <span title={`${Tr(T.TotalOutdatedVms)}: ${totalOutdatedVms}`}>
-              <PcNoEntry />
-              <span>{` ${totalOutdatedVms}`}</span>
-            </span>
-            <span title={`${Tr(T.TotalErrorVms)}: ${totalErrorVms}`}>
-              <PcWarning />
-              <span>{` ${totalErrorVms}`}</span>
-            </span>
+              <MultipleTags tags={labels} />
+            </div>
+            <div className={classes.caption}>
+              <span>{`#${ID}`}</span>
+              <span title={`${Tr(T.Owner)}: ${UNAME}`}>
+                <User />
+                <span data-cy="uname">{` ${UNAME}`}</span>
+              </span>
+              <span title={`${Tr(T.Group)}: ${GNAME}`}>
+                <Group />
+                <span data-cy="gname">{` ${GNAME}`}</span>
+              </span>
+              <span title={`${Tr(T.TotalUpdatedVms)}: ${totalUpdatedVms}`}>
+                <PcCheck />
+                <span>{` ${totalUpdatedVms}`}</span>
+              </span>
+              <span title={`${Tr(T.TotalOutdatedVms)}: ${totalOutdatedVms}`}>
+                <PcNoEntry />
+                <span>{` ${totalOutdatedVms}`}</span>
+              </span>
+              <span title={`${Tr(T.TotalErrorVms)}: ${totalErrorVms}`}>
+                <PcWarning />
+                <span>{` ${totalErrorVms}`}</span>
+              </span>
+            </div>
           </div>
-          {actions && <div className={classes.actions}>{actions}</div>}
+
+          {actions && (
+            <div className={clsx(classes.actions, internalClasses.actions)}>
+              {actions}
+            </div>
+          )}
         </div>
       </div>
     )

src/fireedge/src/modules/components/Forms/SecurityGroups/ChangeForm/index.js

@@ -0,0 +1,37 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2024, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import { createForm, bindSecGroupTemplate } from '@UtilsModule'
+import { SCHEMA, FIELDS } from './schema'
+import { jsonToXml } from '@ModelsModule'
+
+const ChangeSecurityGroup = createForm(SCHEMA, FIELDS, {
+  transformInitialValue: (secGroupId, schema) => {
+    const secGroup = Array.isArray(secGroupId) ? secGroupId : [secGroupId]
+
+    return {
+      ...schema.cast({ secGroup }, { stripUnknown: true }),
+    }
+  },
+  transformBeforeSubmit: (formData, vnet) => {
+    const { secgroups } = formData
+
+    const newTemplate = bindSecGroupTemplate(vnet, secgroups)
+
+    return jsonToXml(newTemplate)
+  },
+})
+
+export default ChangeSecurityGroup

src/fireedge/src/modules/components/Forms/SecurityGroups/ChangeForm/schema.js

@@ -0,0 +1,42 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2024, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import { string, object, ObjectSchema, array } from 'yup'
+
+import { SecurityGroupsTable } from '@modules/components/Tables'
+import { T, INPUT_TYPES } from '@ConstantsModule'
+import { Field, getValidationFromFields } from '@UtilsModule'
+
+/** @type {Field} Security group field */
+const SECGROUP = {
+  name: 'secgroups',
+  label: T.SelectNewSecGroup,
+  type: INPUT_TYPES.TABLE,
+  Table: () => SecurityGroupsTable.Table,
+  singleSelect: false,
+  validation: array(string().trim())
+    .required()
+    .default(() => undefined),
+  fieldProps: {
+    preserveState: true,
+  },
+  grid: { md: 12 },
+}
+
+/** @type {Field[]} List of fields */
+export const FIELDS = [SECGROUP]
+
+/** @type {ObjectSchema} Schema */
+export const SCHEMA = object(getValidationFromFields(FIELDS))

src/fireedge/src/modules/components/Forms/SecurityGroups/index.js

@@ -38,4 +38,11 @@ const CreateForm = (configProps) =>
 const CommitForm = (configProps) =>
   AsyncLoadForm({ formPath: 'SecurityGroups/CommitForm' }, configProps)
 
-export { CloneForm, CreateForm, CommitForm }
+/**
+ * @param {ConfigurationProps} configProps - Configuration
+ * @returns {ReactElement|CreateFormCallback} Asynchronous loaded form
+ */
+const ChangeForm = (configProps) =>
+  AsyncLoadForm({ formPath: 'SecurityGroups/ChangeForm' }, configProps)
+
+export { CloneForm, CreateForm, CommitForm, ChangeForm }

src/fireedge/src/modules/components/Forms/Service/PerformAction/schema.js

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { ObjectSchema, string } from 'yup'
-import { getObjectSchemaFromFields, arrayToOptions, Field } from '@UtilsModule'
 import {
+  ARGS_TYPES,
   INPUT_TYPES,
   T,
-  VM_ACTIONS_WITH_SCHEDULE,
   VM_ACTIONS,
-  ARGS_TYPES,
+  VM_ACTIONS_WITH_SCHEDULE,
 } from '@ConstantsModule'
+import { Field, arrayToOptions, getObjectSchemaFromFields } from '@UtilsModule'
+import { ObjectSchema, string } from 'yup'
 
 import { getRequiredArgsByAction } from '@ModelsModule'
 

src/fireedge/src/modules/components/Tables/SecurityGroups/table.js

@@ -36,6 +36,7 @@ const SecurityGroupsTable = (props) => {
     rootProps = {},
     searchProps = {},
     useQuery = SecurityGroupAPI.useGetSecGroupsQuery,
+    rowComponent,
     ...rest
   } = props ?? {}
   rootProps['data-cy'] ??= DEFAULT_DATA_CY
@@ -85,7 +86,7 @@ const SecurityGroupsTable = (props) => {
     },
   ]
 
-  const { component, header } = WrapperRow(SecurityGroupsRow)
+  const { component, header } = WrapperRow(rowComponent ?? SecurityGroupsRow)
 
   return (
     <EnhancedTable

src/fireedge/src/modules/components/Tables/styles.js

@@ -16,7 +16,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { css } from '@emotion/css'
 
-export const rowStyles = ({ palette, typography, breakpoints, shadows }) => ({
+export const rowStyles = ({ palette, typography, breakpoints } = {}) => ({
   root: css({
     padding: '0.8em',
     color: palette.text.primary,