Added a create collection to add to collection

client/modules/App/components/Overlay.tsx

@@ -15,13 +15,15 @@ type OverlayProps = {
   title?: string;
   ariaLabel?: string;
   isFixedHeight?: boolean;
+  isCompactHeight?: boolean;
 };
 
 export const Overlay = ({
   actions,
   ariaLabel = 'modal',
   children,
   closeOverlay,
+  isCompactHeight = false,
   isFixedHeight = false,
   title = 'Modal'
 }: OverlayProps) => {
@@ -43,8 +45,7 @@ export const Overlay = ({
     if (!node) return;
     // Only close if it is the last (and therefore the topmost overlay)
     const overlays = document.getElementsByClassName('overlay');
-    if (node.parentElement?.parentElement !== overlays[overlays.length - 1])
-      return;
+    if (node.closest('.overlay') !== overlays[overlays.length - 1]) return;
 
     if (!closeOverlay) {
       browserHistory.push(previousPath);
@@ -57,7 +58,9 @@ export const Overlay = ({
 
   return (
     <div
-      className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''}`}
+      className={`overlay ${isFixedHeight ? 'overlay--is-fixed-height' : ''} ${
+        isCompactHeight ? 'overlay--is-compact-height' : ''
+      }`}
     >
       <div className="overlay__content">
         <section
@@ -72,7 +75,10 @@ export const Overlay = ({
               {isDesktop && actions}
               <button
                 className="overlay__close-button"
-                onClick={close}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  close();
+                }}
                 aria-label={t('Overlay.AriaLabel', { title })}
               >
                 <ExitIcon focusable="false" aria-hidden="true" />

client/modules/IDE/actions/collections.js

@@ -34,7 +34,7 @@ export function getCollections(username) {
   };
 }
 
-export function createCollection(collection) {
+export function createCollection(collection, redirect = true) {
   return (dispatch) => {
     dispatch(startLoader());
     const url = '/collections';
@@ -52,8 +52,9 @@ export function createCollection(collection) {
 
         const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
         const location = { pathname, state: { skipSavingPath: true } };
-
-        browserHistory.push(location);
+        if (redirect) {
+          browserHistory.push(location);
+        }
       })
       .catch((error) => {
         dispatch({

client/modules/IDE/components/AddToCollectionList.jsx

@@ -13,6 +13,9 @@ import {
 import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
+import { Overlay } from '../../App/components/Overlay';
+import CollectionCreate from '../../User/components/CollectionCreate';
+import { Button } from '../../../common/Button';
 
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
@@ -40,10 +43,11 @@ const AddToCollectionList = ({ projectId }) => {
   const loading = useSelector((state) => state.loading);
   const [hasLoadedData, setHasLoadedData] = useState(false);
   const showLoader = loading && !hasLoadedData;
+  const [createCollectionVisible, setCreateCollectionVisible] = useState(false);
 
   useEffect(() => {
     dispatch(getCollections(username)).then(() => setHasLoadedData(true));
-  }, [dispatch, username]);
+  }, [dispatch, username, createCollectionVisible]);
 
   const handleCollectionAdd = (collection) => {
     dispatch(addToCollection(collection.id, projectId));
@@ -80,6 +84,19 @@ const AddToCollectionList = ({ projectId }) => {
         <Helmet>
           <title>{t('AddToCollectionList.Title')}</title>
         </Helmet>
+        <Button onClick={() => setCreateCollectionVisible(true)}>
+          {t('DashboardView.CreateCollection')}
+        </Button>
+
+        {createCollectionVisible && (
+          <Overlay
+            title={t('DashboardView.CreateCollectionOverlay')}
+            closeOverlay={() => setCreateCollectionVisible(false)}
+            isCompactHeight
+          >
+            <CollectionCreate />
+          </Overlay>
+        )}
         {getContent()}
       </QuickAddWrapper>
     </CollectionAddSketchWrapper>

client/modules/User/components/CollectionCreate.jsx

@@ -24,7 +24,8 @@ const CollectionCreate = () => {
   const handleCreateCollection = (event) => {
     event.preventDefault();
 
-    dispatch(createCollection({ name, description }));
+    // second argument is redirect flag, set to false to avoid redirect
+    dispatch(createCollection({ name, description }, false));
   };
 
   const invalid = name === '' || name == null;