from url flow added

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js

@@ -5,6 +5,7 @@ import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
 import FromComputerForm from './FromComputerForm';
+import FromUrlForm from './FromUrlForm';
 
 const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
   const { formatMessage } = useIntl();
@@ -44,7 +45,9 @@ const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
             next={next}
           />
         </TabPanel>
-        <TabPanel>TO DO</TabPanel>
+        <TabPanel>
+          <FromUrlForm onClose={onClose} setLocalImage={setLocalImage} goTo={goTo} next={next} />
+        </TabPanel>
       </TabPanels>
     </TabGroup>
   );

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { urlToFile } from '../../utils/urlToFile';
+import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
+import { SIZE, DIMENSION } from '../../utils/constants';
+
+const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
+  const { formatMessage } = useIntl();
+  const [logoUrl, setLogoUrl] = useState('');
+  const [error, setError] = useState(undefined);
+
+  const handleChange = e => {
+    setLogoUrl(e.target.value);
+  };
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    try {
+      const file = await urlToFile(logoUrl);
+      const asset = await parseFileMetadatas(file);
+
+      setLocalImage(asset);
+      goTo(next);
+    } catch (err) {
+      if (err.displayMessage) {
+        setError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
+      } else {
+        throw err;
+      }
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+          <TextInput
+            label={formatMessage({
+              id: 'Settings.application.customization.modal.upload.from-url.input-label',
+              defaultMessage: 'URL',
+            })}
+            error={error}
+            onChange={handleChange}
+            value={logoUrl}
+            name="logo-url"
+          />
+        </Box>
+        <ModalFooter
+          startActions={
+            <Button onClick={onClose} variant="tertiary">
+              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
+            </Button>
+          }
+          endActions={
+            <Button type="submit">
+              {formatMessage({
+                id: 'Settings.application.customization.modal.upload.next',
+                defaultMessage: 'Next',
+              })}
+            </Button>
+          }
+        />
+      </form>
+    </>
+  );
+};
+
+FromUrlForm.defaultProps = {
+  next: null,
+};
+
+FromUrlForm.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default FromUrlForm;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export const urlToFile = async url => {
+  try {
+    const res = await axios.get(url, { responseType: 'blob', timeout: 60000 });
+    const loadedFile = new File([res.data], res.config.url, {
+      type: res.headers['content-type'],
+    });
+
+    return loadedFile;
+  } catch (err) {
+    err.displayMessage = {
+      id: 'Settings.application.customization.modal.upload.error-network',
+      defaultMessage: 'Network error',
+    };
+
+    throw err;
+  }
+};

packages/core/admin/admin/src/translations/en.json

@@ -111,9 +111,12 @@
   "Settings.application.customization.modal.upload.file-validation": "Max dimension: {dimension}*{dimension}, Max size: {size}KB",
   "Settings.application.customization.modal.upload.error-format": "Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).",
   "Settings.application.customization.modal.upload.error-size": "The file uploaded is too large (max dimension: {dimension}*{dimension}, max file size: {size}KB)",
+  "Settings.application.customization.modal.upload.error-network": "Network error",
   "Settings.application.customization.modal.upload.cta.browse": "Browse files",
   "Settings.application.customization.modal.upload.drag-drop": "Drag and Drop here or",
   "Settings.application.customization.modal.upload.from-url": "From url",
+  "Settings.application.customization.modal.upload.from-url.input-label": "URL",
+  "Settings.application.customization.modal.upload.next": "Next",
   "Settings.application.customization.modal.pending": "Pending logo",
   "Settings.application.customization.modal.pending.choose-another": "Choose another logo",
   "Settings.application.customization.modal.pending.title": "Logo ready to upload",