From 294d1668d447c671a7b1d5f5cdace0803a8ae6ea Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Fri, 16 Dec 2022 03:20:22 +0200
Subject: [PATCH] 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
---
 .../FormControl/FormControl.tsx               |  2 +-
 .../HomeView/EnvironmentList/UpdateBadge.tsx  |  2 +-
 .../CreateView/CreateView.tsx                 |  7 +++
 .../update-schedules/ItemView/ItemView.tsx    |  7 +++
 .../update-schedules/ListView/ListView.tsx    |  3 ++
 .../common/EdgeGroupsField.tsx                | 44 ++++++++++++-------
 .../update-schedules/common/NameField.tsx     |  8 +++-
 7 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/app/react/components/form-components/FormControl/FormControl.tsx b/app/react/components/form-components/FormControl/FormControl.tsx
index 80889fe8c..c7cba6bdf 100644
--- a/app/react/components/form-components/FormControl/FormControl.tsx
+++ b/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:
diff --git a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
index 284b03acd..b1d15aa76 100644
--- a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
+++ b/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'
diff --git a/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx b/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
index 239b5407c..8363c1104 100644
--- a/app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
+++ b/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}
diff --git a/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx b/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
index 3de58dbd4..cd340918b 100644
--- a/app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
+++ b/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
diff --git a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
index 820cc8f33..aea460106 100644
--- a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
+++ b/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}
diff --git a/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx b/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
index 86e9de5af..bda15ed3e 100644
--- a/app/react/portainer/environments/update-schedules/common/EdgeGroupsField.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/app/react/portainer/environments/update-schedules/common/NameField.tsx b/app/react/portainer/environments/update-schedules/common/NameField.tsx
index 8cdb061be..5c15a1601 100644
--- a/app/react/portainer/environments/update-schedules/common/NameField.tsx
+++ b/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>
   );