feat(xo-web/import/disk): UI improvement for ISO files (#6874)

See https://xcp-ng.org/forum/topic/7243

CHANGELOG.unreleased.md

@@ -7,6 +7,8 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- [Import/Disk] Enhance clarity for importing ISO files [Forum#7243](https://xcp-ng.org/forum/topic/7243/can-t-import-iso-through-ova-not-a-supported-filetype?_=1685710667937) (PR [#6874](https://github.com/vatesfr/xen-orchestra/pull/6874))
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
@@ -27,4 +29,6 @@
 
 <!--packages-start-->
 
+- xo-web minor
+
 <!--packages-end-->

packages/xo-web/src/common/intl/locales/it.js

@@ -3836,8 +3836,8 @@ export default {
   // Original text: 'Disk import success'
   diskImportSuccess: 'Importazione del disco riuscita',
 
-  // Original text: 'Drop VMDK or VHD files here to import disks.'
+  // Original text: 'Drop {types} files here to import disks.'
-  dropDisksFiles: 'Rilascia qui i file ISO, VMDK o VHD per importare i dischi.',
+  dropDisksFiles: 'Rilascia qui i file {types} per importare i dischi.',
 
   // Original text: 'To SR'
   importToSr: 'A SR',

packages/xo-web/src/common/intl/messages.js

@@ -1685,8 +1685,9 @@ const messages = {
   // ---- Disk import ---
   diskImportFailed: 'Disk import failed',
   diskImportSuccess: 'Disk import success',
-  dropDisksFiles: 'Drop ISO, VMDK or VHD files here to import disks.',
+  dropDisksFiles: 'Drop {types} files here to import disks.',
   importToSr: 'To SR',
+  isoImportRequirement: 'To import ISO files, an ISO repository is required',
 
   // ---- Tasks ---
   poolTasks: 'Pool tasks',

packages/xo-web/src/xo-app/disk-import/index.js

@@ -100,12 +100,25 @@ const DiskImport = decorate([
       onChangeSr: (_, sr) => ({ sr }),
       reset: getInitialState,
     },
+    computed: {
+      isSrIso: ({ sr }) => sr.content_type === 'iso',
+    },
   }),
   injectIntl,
   injectState,
-  ({ effects, state: { disks, loadingDisks, mapDescriptions, mapNames, sr } }) => (
+  ({ effects, state: { disks, loadingDisks, mapDescriptions, mapNames, sr, isSrIso } }) => (
     <Container>
       <form id='import-form'>
+        <div className='mb-1'>
+          <a
+            className='text-info'
+            href='https://xcp-ng.org/blog/2022/05/05/how-to-create-a-local-iso-repository-in-xcp-ng/'
+            rel='noreferrer'
+            target='_blank'
+          >
+            <Icon icon='info' /> {_('isoImportRequirement')}
+          </a>
+        </div>
         <Row>
           <LabelCol>{_('importToSr')}</LabelCol>
           <InputCol>
@@ -116,8 +129,8 @@ const DiskImport = decorate([
           <div>
             <Dropzone
               onDrop={effects.handleDrop}
-              message={_('dropDisksFiles')}
+              message={_('dropDisksFiles', { types: isSrIso ? 'ISO' : ['VHD', 'VMDK'] })}
-              accept={sr.content_type === 'iso' ? '.iso' : ['.vhd', '.vmdk']}
+              accept={isSrIso ? '.iso' : ['.vhd', '.vmdk']}
             />
             {loadingDisks && <Icon icon='loading' />}
             {disks.length > 0 && (