feat(edge/updates): sync code changes from EE [EE-3023] (#8186)

* feat(edge/updates): add info about each field

* feat(edge/update): add beta feature

* fix(edge/update): add info

app/react/components/form-components/FormControl/FormControl.tsx

@@ -83,7 +83,7 @@ function sizeClassChildren(size?: Size) {
     case 'medium':
       return 'col-sm-8 col-lg-9';
     case 'xsmall':
-      return 'col-sm-8';
+      return 'col-sm-10';
     case 'vertical':
       return '';
     default:

app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx

@@ -11,7 +11,7 @@ export function UpdateBadge() {
   return (
     <span
       className={clsx(
-        'badge inline-flex items-center px-3 py-2 font-normal border-solid border border-transparent',
+        'badge inline-flex items-center px-[2px] font-normal border-solid border border-transparent rounded-xl',
         'bg-blue-3 text-blue-8',
         'th-dark:bg-blue-8 th-dark:text-white',
         'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:border-white'

app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx

@@ -10,6 +10,7 @@ import { PageHeader } from '@@/PageHeader';
 import { Widget } from '@@/Widget';
 import { LoadingButton } from '@@/buttons';
 import { TextTip } from '@@/Tip/TextTip';
+import { Link } from '@@/Link';
 
 import { ScheduleType } from '../types';
 import { useCreateMutation } from '../queries/create';
@@ -57,6 +58,12 @@ function CreateView() {
           <Widget>
             <Widget.Title title="Update & Rollback Scheduler" icon={Settings} />
             <Widget.Body>
+              <TextTip color="blue">
+                Devices need to be allocated to an Edge group, visit the{' '}
+                <Link to="edge.groups">Edge Groups</Link> page to assign
+                environments and create groups.
+              </TextTip>
+
               <Formik
                 initialValues={initialValues}
                 onSubmit={handleSubmit}

app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx

@@ -11,6 +11,7 @@ import { Widget } from '@@/Widget';
 import { LoadingButton } from '@@/buttons';
 import { TextTip } from '@@/Tip/TextTip';
 import { InformationPanel } from '@@/InformationPanel';
+import { Link } from '@@/Link';
 
 import { useItem } from '../queries/useItem';
 import { validation } from '../common/validation';
@@ -83,6 +84,12 @@ function ItemView() {
           <Widget>
             <Widget.Title title="Update & Rollback Scheduler" icon={Settings} />
             <Widget.Body>
+              <TextTip color="blue">
+                Devices need to be allocated to an Edge group, visit the{' '}
+                <Link to="edge.groups">Edge Groups</Link> page to assign
+                environments and create groups.
+              </TextTip>
+
               <Formik
                 initialValues={
                   !isScheduleActive ? initialValues : initialValuesActive

app/react/portainer/environments/update-schedules/ListView/ListView.tsx

@@ -14,6 +14,7 @@ import { useSearchBarState } from '@@/datatables/SearchBar';
 import { useList } from '../queries/list';
 import { EdgeUpdateSchedule, StatusType } from '../types';
 import { useRemoveMutation } from '../queries/useRemoveMutation';
+import { BetaAlert } from '../common/BetaAlert';
 
 import { columns } from './columns';
 import { createStore } from './datatable-store';
@@ -41,6 +42,8 @@ export function ListView() {
         breadcrumbs="Update and rollback"
       />
 
+      <BetaAlert />
+
       <Datatable
         dataset={listQuery.data}
         columns={columns}

app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx

@@ -4,6 +4,7 @@ import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Select } from '@@/form-components/ReactSelect';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { FormValues } from './types';
 
@@ -29,21 +30,34 @@ export function EdgeGroupsField({
   );
 
   return (
-    <FormControl label="Groups" required inputId="groups-select" errors={error}>
-      <Select
-        name="groupIds"
-        onBlur={onBlur}
-        value={selectedGroups}
+    <>
+      <FormControl
+        label="Groups"
+        required
         inputId="groups-select"
-        placeholder="Select one or multiple group(s)"
-        onChange={(selectedGroups) => onChange(selectedGroups.map((g) => g.Id))}
-        isMulti
-        options={groupsQuery.data || []}
-        getOptionLabel={(group) => group.Name}
-        getOptionValue={(group) => group.Id.toString()}
-        closeMenuOnSelect={false}
-        isDisabled={disabled}
-      />
-    </FormControl>
+        errors={error}
+        tooltip="Updates are done based on groups, allowing you to choose multiple devices at the same time and the ability to roll out progressively across all environments by scheduling them for different days."
+      >
+        <Select
+          name="groupIds"
+          onBlur={onBlur}
+          value={selectedGroups}
+          inputId="groups-select"
+          placeholder="Select one or multiple group(s)"
+          onChange={(selectedGroups) =>
+            onChange(selectedGroups.map((g) => g.Id))
+          }
+          isMulti
+          options={groupsQuery.data || []}
+          getOptionLabel={(group) => group.Name}
+          getOptionValue={(group) => group.Id.toString()}
+          closeMenuOnSelect={false}
+          isDisabled={disabled}
+        />
+      </FormControl>
+      <TextTip color="blue">
+        Select groups of Edge environments to update
+      </TextTip>
+    </>
   );
 }

app/react/portainer/environments/update-schedules/common/NameField.tsx

@@ -12,7 +12,13 @@ export function NameField() {
   const [{ name }, { error }] = useField<FormValues['name']>('name');
 
   return (
-    <FormControl label="Name" required inputId="name-input" errors={error}>
+    <FormControl
+      label="Name"
+      required
+      inputId="name-input"
+      errors={error}
+      tooltip="A descriptive name helps identify the update or roll back schedule when you have more than one"
+    >
       <Field as={Input} name={name} id="name-input" />
     </FormControl>
   );