F #6091: Reordering the schedule actions creation mode (#2596)

(cherry picked from commit c5b7928)

src/fireedge/src/client/components/Buttons/ScheduleAction.js

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, useMemo, ReactElement } from 'react'
+import { ClockOutline, Edit, Trash } from 'iconoir-react'
 import PropTypes from 'prop-types'
-import { Trash, Edit, ClockOutline } from 'iconoir-react'
+import { ReactElement, memo, useMemo } from 'react'
 
 import ButtonToTriggerForm from 'client/components/Forms/ButtonToTriggerForm'
 import {
@@ -26,14 +26,14 @@ import {
 } from 'client/components/Forms/Vm'
 
 import { Tr, Translate } from 'client/components/HOC'
-import { sentenceCase } from 'client/utils'
 import {
+  SERVER_CONFIG,
+  ScheduleAction,
   T,
   VM_ACTIONS,
   VM_ACTIONS_IN_CHARTER,
-  SERVER_CONFIG,
-  ScheduleAction,
 } from 'client/constants'
+import { sentenceCase } from 'client/utils'
 
 /**
  * Returns a button to trigger form to create a scheduled action.
@@ -207,8 +207,8 @@ CharterButton.propTypes = ButtonPropTypes
 CharterButton.displayName = 'CharterButton'
 
 export {
+  CharterButton,
   CreateSchedButton,
   DeleteSchedButton,
   UpdateSchedButton,
-  CharterButton,
 }

src/fireedge/src/client/components/Cards/ScheduleActionCard.js

@@ -13,31 +13,44 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo } from 'react'
-import PropTypes from 'prop-types'
+import { Paper, Stack, Typography, styled, useTheme } from '@mui/material'
 import { WarningTriangleOutline as WarningIcon } from 'iconoir-react'
-import { useTheme, Typography, Paper, Stack } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo } from 'react'
 
-import Timer from 'client/components/Timer'
 import { StatusChip } from 'client/components/Status'
 import { rowStyles } from 'client/components/Tables/styles'
+import Timer from 'client/components/Timer'
 
+import { T, TEMPLATE_SCHEDULE_TYPE_STRING } from 'client/constants'
+import { timeFromMilliseconds } from 'client/models/Helper'
 import {
-  isRelative,
   getPeriodicityByTimeInSeconds,
   getRepeatInformation,
+  getTypeScheduleAction,
+  isRelative,
 } from 'client/models/Scheduler'
-import { timeFromMilliseconds } from 'client/models/Helper'
 import { sentenceCase } from 'client/utils'
-import { T } from 'client/constants'
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  marginLeft: `${theme.spacing(1)} !important`,
+}))
+
+const StyledTypographyTypeSchedule = styled(Typography)(() => ({
+  fontStyle: 'italic',
+}))
 
 const ScheduleActionCard = memo(({ schedule, actions }) => {
   const classes = rowStyles()
   const { palette } = useTheme()
 
-  const { ID, ACTION, TIME, MESSAGE, DONE, WARNING } = schedule
+  const { ID, ACTION, TIME, MESSAGE, DONE, WARNING, NAME } = schedule
+
+  const typeScheduleText =
+    `${TEMPLATE_SCHEDULE_TYPE_STRING?.[getTypeScheduleAction(schedule)]}:` || ''
 
-  const titleAction = `#${ID} ${sentenceCase(ACTION)}`
+  const titleName = NAME ? `(${NAME})` : ''
+  const titleAction = `#${ID} ${sentenceCase(ACTION)} ${titleName}`
   const timeIsRelative = isRelative(TIME)
 
   const time = timeIsRelative ? getPeriodicityByTimeInSeconds(TIME) : TIME
@@ -69,24 +82,29 @@ const ScheduleActionCard = memo(({ schedule, actions }) => {
           flexWrap="wrap"
           direction="row"
         >
-          {repeat && <Typography variant="caption">{repeat}</Typography>}
-          {end && <Typography variant="caption">{end}</Typography>}
+          <StyledTypographyTypeSchedule variant="caption">
+            {typeScheduleText}
+          </StyledTypographyTypeSchedule>
+          {repeat && (
+            <StyledTypography variant="caption">{repeat}</StyledTypography>
+          )}
+          {end && <StyledTypography variant="caption">{end}</StyledTypography>}
           {DONE && (
-            <Typography variant="caption" title={formatDoneTime}>
+            <StyledTypography variant="caption" title={formatDoneTime}>
               <Timer initial={DONE} translateWord={T.DoneAgo} />
-            </Typography>
+            </StyledTypography>
           )}
           {!noMore && (
             <>
-              <Typography variant="caption">
+              <StyledTypography variant="caption">
                 {timeIsRelative ? (
                   <span>{Object.values(time).join(' ')}</span>
                 ) : (
                   <span title={formatTime}>
-                    <Timer initial={TIME} translateWord={T.FirstTime} />
+                    <Timer initial={TIME} />
                   </span>
                 )}
-              </Typography>
+              </StyledTypography>
               {WARNING && <WarningIcon color={palette.warning.main} />}
             </>
           )}

src/fireedge/src/client/components/FormControl/TimeController.js

@@ -13,17 +13,17 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo } from 'react'
 import PropTypes from 'prop-types'
+import { memo } from 'react'
 
-import { useController } from 'react-hook-form'
-import { TextField } from '@mui/material'
 import DateTimePicker from '@mui/lab/DateTimePicker'
+import { TextField } from '@mui/material'
+import { useController } from 'react-hook-form'
 
 import { ErrorHelper, Tooltip } from 'client/components/FormControl'
 import { Translate } from 'client/components/HOC'
-import { generateKey } from 'client/utils'
 import { T } from 'client/constants'
+import { generateKey } from 'client/utils'
 
 const TimeController = memo(
   ({

src/fireedge/src/client/components/Forms/FormWithSchema.js

@@ -13,24 +13,24 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import PropTypes from 'prop-types'
 import {
-  ReactElement,
   Fragment,
+  ReactElement,
   createElement,
+  isValidElement,
   memo,
-  useMemo,
   useCallback,
-  isValidElement,
+  useMemo,
 } from 'react'
-import PropTypes from 'prop-types'
 
+import { Accordion, AccordionSummary, FormControl, Grid } from '@mui/material'
 import { useFormContext, useWatch } from 'react-hook-form'
-import { FormControl, Accordion, AccordionSummary, Grid } from '@mui/material'
 
 import * as FC from 'client/components/FormControl'
 import Legend from 'client/components/Forms/Legend'
-import { Field } from 'client/utils'
 import { INPUT_TYPES } from 'client/constants'
+import { Field } from 'client/utils'
 
 const NOT_DEPEND_ATTRIBUTES = [
   'watcher',

src/fireedge/src/client/components/Forms/Vm/CreateCharterForm/schema.js

@@ -15,16 +15,16 @@
  * ------------------------------------------------------------------------- */
 import { array, object, ObjectSchema } from 'yup'
 
-import {
-  transformChartersToSchedActions,
-  getFixedLeases,
-  getEditableLeases,
-} from 'client/models/Scheduler'
-import { Field, getObjectSchemaFromFields } from 'client/utils'
 import {
   PUNCTUAL_FIELDS,
   RELATIVE_FIELDS,
 } from 'client/components/Forms/Vm/CreateSchedActionForm/fields'
+import {
+  getEditableLeases,
+  getFixedLeases,
+  transformChartersToSchedActions,
+} from 'client/models/Scheduler'
+import { Field, getObjectSchemaFromFields } from 'client/utils'
 
 const punctualFields = [
   PUNCTUAL_FIELDS.ACTION_FIELD_FOR_CHARTERS,