feat: introduce asterisk for all the required fields

packages/web/src/components/ChooseAppAndEventSubstep/index.jsx

@@ -128,6 +128,7 @@ function ChooseAppAndEventSubstep(props) {
               <TextField
                 {...params}
                 label={formatMessage('flowEditor.chooseApp')}
+                required
               />
             )}
             value={getOption(appOptions, step.appKey) || null}
@@ -154,6 +155,7 @@ function ChooseAppAndEventSubstep(props) {
                   <TextField
                     {...params}
                     label={formatMessage('flowEditor.chooseEvent')}
+                    required
                     InputProps={{
                       ...params.InputProps,
                       endAdornment: (

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -30,7 +30,7 @@ const optionGenerator = (connection) => ({
 });
 
 const getOption = (options, connectionId) =>
-  options.find((connection) => connection.value === connectionId) || null;
+  options.find((connection) => connection.value === connectionId) || undefined;
 
 function ChooseConnectionSubstep(props) {
   const {
@@ -205,6 +205,7 @@ function ChooseConnectionSubstep(props) {
                 label={formatMessage(
                   'chooseConnectionSubstep.chooseConnection',
                 )}
+                required
               />
             )}
             value={getOption(connectionOptions, connection?.id)}

packages/web/src/components/ControlledCustomAutocomplete/index.jsx

@@ -183,7 +183,7 @@ function ControlledCustomAutocomplete(props) {
                 variant="outlined"
                 sx={{ bgcolor: 'white', display: 'inline-block', px: 0.75 }}
               >
-                {label}
+                {`${label}${required ? ' *' : ''}`}
               </InputLabel>
             </InputLabelWrapper>
 

packages/web/src/components/InputCreator/index.jsx

@@ -63,7 +63,7 @@ export default function InputCreator(props) {
             disablePortal
             disableClearable={required}
             options={preparedOptions}
-            renderInput={(params) => <MuiTextField {...params} label={label} />}
+            renderInput={(params) => <MuiTextField {...params} label={label} required={required}/>}
             defaultValue={value}
             description={description}
             loading={loading}
@@ -83,13 +83,13 @@ export default function InputCreator(props) {
             disablePortal
             disableClearable={required}
             options={preparedOptions}
-            renderInput={(params) => <MuiTextField {...params} label={label} />}
             defaultValue={value}
             description={description}
             loading={loading}
             disabled={disabled}
             showOptionValue={showOptionValue}
             shouldUnregister={shouldUnregister}
+            required={required}
           />
         )}
 

packages/web/src/components/PowerInput/index.jsx

@@ -98,7 +98,7 @@ const PowerInput = (props) => {
                     variant="outlined"
                     sx={{ bgcolor: 'white', display: 'inline-block', px: 0.75 }}
                   >
-                    {label}
+                    {`${label}${required ? ' *' : ''}`}
                   </InputLabel>
                 </InputLabelWrapper>