feat(xo-web/XOA/update): add link to channel's changelog (#5494)

See xoa-support#3257

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## **5.54.0** (2020-12-29)
 
-![Channel: latest](https://badgen.net/badge/channel/latest/yellow)
+<img id="latest" src="https://badgen.net/badge/channel/latest/yellow" alt="Channel: latest" />
 
 ### Highlights
 
@@ -31,7 +31,7 @@
 
 ## **5.53.1** (2020-12-10)
 
-![Channel: stable](https://badgen.net/badge/channel/stable/green)
+<img id="stable" src="https://badgen.net/badge/channel/stable/green" alt="Channel: stable" />
 
 ### Bug fixes
 

CHANGELOG.unreleased.md

@@ -8,6 +8,7 @@
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 - [Web hooks] Possibility to wait a response from the server before continuing [#4948](https://github.com/vatesfr/xen-orchestra/issues/4948) (PR [#5420](https://github.com/vatesfr/xen-orchestra/pull/5420))
+- [XOA/update] Add a link to the channel's changelog (PR [#5494](https://github.com/vatesfr/xen-orchestra/pull/5494))
 
 ### Bug fixes
 
@@ -36,4 +37,5 @@
 
 - xo-server-backup-reports patch
 - xo-server minor
+- xo-web minor
 - xo-server-web-hooks minor

packages/xo-web/src/xo-app/xoa/update/index.js

@@ -182,6 +182,8 @@ const Updates = decorate([
         jobs !== undefined &&
         backupNgJobs !== undefined &&
         some(jobs.concat(backupNgJobs), job => job.runId !== undefined),
+      changelogUrl: ({ consolidatedChannel }) =>
+        `https://github.com/vatesfr/xen-orchestra/blob/master/CHANGELOG.md#${encodeURIComponent(consolidatedChannel)}`,
       channelsFormId: generateId,
       channels: COMMUNITY ? () => ({}) : () => xoaUpdater.getReleaseChannels(),
       channelsOptions: ({ channels }) =>
@@ -340,7 +342,7 @@ const Updates = decorate([
               <CardBlock>
                 <form id={state.channelsFormId} className='form'>
                   <fieldset disabled={COMMUNITY}>
-                    <div className='form-group'>
+                    <div className='form-group mb-1'>
                       <Select
                         disabled={COMMUNITY}
                         isLoading={state.channelsOptions === undefined}
@@ -351,23 +353,27 @@ const Updates = decorate([
                         simpleValue
                         value={state.isUnlistedChannel ? UNLISTED_CHANNEL_VALUE : state.consolidatedChannel}
                       />
-                      <br />
-                      {state.isUnlistedChannel && (
-                        <div className='form-group'>
-                          <DebounceInput
-                            autoFocus
-                            className='form-control'
-                            debounceTimeout={500}
-                            name='channel'
-                            onChange={effects.linkState}
-                            placeholder={formatMessage(messages.unlistedChannelName)}
-                            required
-                            type='text'
-                            value={state.consolidatedChannel}
-                          />
-                        </div>
-                      )}
-                    </div>{' '}
+                    </div>
+                    {state.isUnlistedChannel && (
+                      <div className='form-group mb-1'>
+                        <DebounceInput
+                          autoFocus
+                          className='form-control'
+                          debounceTimeout={500}
+                          name='channel'
+                          onChange={effects.linkState}
+                          placeholder={formatMessage(messages.unlistedChannelName)}
+                          required
+                          type='text'
+                          value={state.consolidatedChannel}
+                        />
+                      </div>
+                    )}
+                    <p>
+                      <a href={state.changelogUrl} rel='noopener noreferrer' target='_blank'>
+                        {_('changelog')}
+                      </a>
+                    </p>
                     <ActionButton
                       btnStyle='primary'
                       form={state.channelsFormId}