feat(webapp):improve on scopes input fields and download flow (NangoH…

…Q#1794)

## Describe your changes
I added a timestamp in front of the zip file name to produce
`1646812165-nango-integrations.zip`, ensuring each download file has a
unique name. Additionally, I included functionality to disable the
download spinner by invoking `setIsDownloading(false) `whenever we
encounter an error. I also implemented functionality to add scopes
whenever the user clicks on `Add new scope`.

![scopes](https://github.com/NangoHQ/nango/assets/85742599/741d9153-a1c9-46a6-a3ea-2a590da147f9)

packages/webapp/src/components/ui/input/TagsInput.tsx

@@ -27,20 +27,9 @@ const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInpu
     }, [defaultValue]);
 
     const [enteredValue, setEnteredValue] = useState('');
-    const [isInputFocused, setIsInputFocused] = useState(false);
     const [error, setError] = useState('');
     const [selectedScopes, addToScopesSet, removeFromSelectedSet] = useSet<string>();
 
-    function handleInputFocus() {
-        setIsInputFocused(true);
-    }
-
-    function handleInputBlur() {
-        setTimeout(() => {
-            setIsInputFocused(false);
-        }, 100);
-    }
-
     const [scopes, setScopes] = useState(selectedScopes);
 
     useEffect(() => {
@@ -106,19 +95,17 @@ const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInpu
                     value={enteredValue}
                     onChange={(e) => setEnteredValue(e.currentTarget.value)}
                     onKeyDown={handleEnter}
-                    onFocus={handleInputFocus}
-                    onBlur={handleInputBlur}
-                    placeholder={`${scopes.length ? '' : 'Find the list of scopes in the documentation of the external API provider.'}`}
+                    placeholder={`${Boolean(scopes.length) ? '' : 'Find the list of scopes in the documentation of the external API provider.'}`}
                     className="border-border-gray bg-active-gray text-white focus:border-white focus:ring-white block w-full appearance-none rounded-md border px-3 py-0.5 text-sm placeholder-gray-400 shadow-sm focus:outline-none"
                 />
             </div>
             {error && <p className="text-red-600 text-sm mt-3">{error}</p>}
-            {enteredValue !== '' && isInputFocused && (
+            {enteredValue !== '' && (
                 <div
                     className="flex items-center border border-border-gray bg-active-gray text-white rounded-md px-3 py-0.5 mt-0.5 cursor-pointer"
                     onClick={handleAdd}
                 >
-                    <PlusSmallIcon onClick={handleAdd} className="h-5 w-5 cursor-pointer" />
+                    <PlusSmallIcon className="h-5 w-5" onClick={handleAdd} />
                     <span className="">Add new scope: "{enteredValue}"</span>
                 </div>
             )}

packages/webapp/src/pages/Integration/FlowPage.tsx

@@ -76,6 +76,7 @@ export default function FlowPage(props: FlowPageProps) {
 
         if (response.status !== 200) {
             const error = await response.json();
+            setIsDownloading(false);
             toast.error(error.error, {
                 position: toast.POSITION.BOTTOM_CENTER
             });
@@ -89,8 +90,9 @@ export default function FlowPage(props: FlowPageProps) {
         const blob = await response.blob();
         const url = window.URL.createObjectURL(blob);
         const link = document.createElement('a');
+        const timestamp = Math.floor(new Date().getTime() / 1000).toString();
         link.href = url;
-        link.download = 'nango-integrations.zip';
+        link.download = `nango-integrations-${timestamp}.zip`;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);