fix font form (codesandbox#3526)

Author: siddharthkp

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/ExternalResources/index.tsx

@@ -44,72 +44,76 @@ export const ExternalResources: FunctionComponent = () => {
   return (
     <Collapsible title="External resources">
       <Stack direction="vertical" gap={6}>
-        <List>
-          {otherResources.map(resource => (
-            <ListAction
-              key={resource}
-              justify="space-between"
-              css={{
-                button: { opacity: 0 },
-                ':hover, :focus-within': { button: { opacity: 1 } },
-              }}
-            >
-              <Link href={resource} target="_blank">
-                {getName(resource)}
-              </Link>
-              <Button
-                variant="link"
-                css={css({ width: 'auto' })}
-                onClick={() => externalResourceRemoved(resource)}
+        {otherResources.length || fonts.length ? (
+          <List>
+            {otherResources.map(resource => (
+              <ListAction
+                key={resource}
+                justify="space-between"
+                css={{
+                  button: { opacity: 0 },
+                  ':hover, :focus-within': { button: { opacity: 1 } },
+                }}
               >
-                <CrossIcon />
-              </Button>
-            </ListAction>
-          ))}
-
-          {fonts.map(resource => (
-            <ListAction
-              key={resource}
-              justify="space-between"
-              css={{
-                button: { opacity: 0 },
-                ':hover, :focus-within': { button: { opacity: 1 } },
-              }}
-            >
-              <Link href={resource} target="_blank">
-                {getFontFamily(resource).name}
-              </Link>
-              <Button
-                variant="link"
-                css={css({ width: 'auto' })}
-                onClick={() => externalResourceRemoved(resource)}
+                <Link href={resource} target="_blank">
+                  {getName(resource)}
+                </Link>
+                <Button
+                  variant="link"
+                  css={css({ width: 'auto' })}
+                  onClick={() => externalResourceRemoved(resource)}
+                >
+                  <CrossIcon />
+                </Button>
+              </ListAction>
+            ))}
+
+            {fonts.map(resource => (
+              <ListAction
+                key={resource}
+                justify="space-between"
+                css={{
+                  button: { opacity: 0 },
+                  ':hover, :focus-within': { button: { opacity: 1 } },
+                }}
               >
-                <CrossIcon />
-              </Button>
-            </ListAction>
-          ))}
-        </List>
+                <Link href={resource} target="_blank">
+                  {getFontFamily(resource).name}
+                </Link>
+                <Button
+                  variant="link"
+                  css={css({ width: 'auto' })}
+                  onClick={() => externalResourceRemoved(resource)}
+                >
+                  <CrossIcon />
+                </Button>
+              </ListAction>
+            ))}
+          </List>
+        ) : null}
 
         <form
-          key={otherResources.length}
           onSubmit={event => {
             event.preventDefault();
             const url = event.target[0].value.trim();
             externalResourceAdded(url);
           }}
         >
           <FormField label="External URL" direction="vertical">
-            <Input type="text" placeholder="https://cdn.com/bootstrap.css" />
+            <Input
+              type="text"
+              placeholder="https://cdn.com/bootstrap.css"
+              key={otherResources.length}
+            />
           </FormField>
           <SidebarRow marginX={2}>
-            <Button variant="secondary" type="submit">
+            <Button type="submit" variant="secondary">
               Add resource
             </Button>
           </SidebarRow>
         </form>
 
         <form
-          key={fonts.length}
           onSubmit={event => {
             event.preventDefault();
             const fontName = event.target[0].value.trim().replace(/ /g, '+');
@@ -118,14 +122,16 @@ export const ExternalResources: FunctionComponent = () => {
           }}
         >
           <FormField label="Google Fonts" direction="vertical">
-            <Select placeholder="Select a font family">
+            <Select placeholder="Select a font family" key={fonts.length}>
               {listOfFonts.sort().map(name => (
                 <option key={name}>{name}</option>
               ))}
             </Select>
           </FormField>
           <SidebarRow marginX={2}>
-            <Button variant="secondary">Add font</Button>
+            <Button type="submit" variant="secondary">
+              Add font
+            </Button>
           </SidebarRow>
         </form>
       </Stack>