fix filter options in deleted sandboxes (codesandbox#2013)

Author: jyash97

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.js

@@ -24,54 +24,60 @@ const FilterOptions = ({ possibleTemplates, hideFilters, store, signals }) => {
 
   const Overlay = () => (
     <OverlayContainer>
-      {orderBy(
-        Object.keys(templates)
-          .filter(x => x !== 'default')
-          .map(name => templates[name])
-          .filter(
-            x =>
-              possibleTemplates.length === 0 ||
-              possibleTemplates.indexOf(x.name) > -1
-          ),
-        'niceName'
-      ).map(template => {
-        const selected = store.dashboard.isTemplateSelected(template.name);
+      {possibleTemplates.length > 0 ? (
+        <React.Fragment>
+          {orderBy(
+            Object.keys(templates)
+              .filter(x => x !== 'default')
+              .map(name => templates[name])
+              .filter(
+                x =>
+                  possibleTemplates.length === 0 ||
+                  possibleTemplates.indexOf(x.name) > -1
+              ),
+            'niceName'
+          ).map(template => {
+            const selected = store.dashboard.isTemplateSelected(template.name);
+
+            return (
+              <Option
+                toggleTemplate={toggleTemplate}
+                selected={selected}
+                key={template.name}
+                color={template.color}
+                name={template.name}
+                niceName={template.niceName}
+              />
+            );
+          })}
 
-        return (
           <Option
-            toggleTemplate={toggleTemplate}
-            selected={selected}
-            key={template.name}
-            color={template.color}
-            name={template.name}
-            niceName={template.niceName}
+            toggleTemplate={() => {
+              if (!allSelected) {
+                signals.dashboard.blacklistedTemplatesCleared();
+              } else {
+                signals.dashboard.blacklistedTemplatesChanged({
+                  templates: possibleTemplates || [],
+                });
+              }
+            }}
+            selected={allSelected}
+            color="#374140"
+            name="all"
+            style={{ marginTop: '1rem' }}
+            niceName="Select All"
           />
-        );
-      })}
-
-      <Option
-        toggleTemplate={() => {
-          if (!allSelected) {
-            signals.dashboard.blacklistedTemplatesCleared();
-          } else {
-            signals.dashboard.blacklistedTemplatesChanged({
-              templates: possibleTemplates || [],
-            });
-          }
-        }}
-        selected={allSelected}
-        color="#374140"
-        name="all"
-        style={{ marginTop: '1rem' }}
-        niceName="Select All"
-      />
+        </React.Fragment>
+      ) : (
+        'No templates found'
+      )}
     </OverlayContainer>
   );
 
   const { blacklistedTemplates } = store.dashboard.filters;
   const templateCount = possibleTemplates.length - blacklistedTemplates.length;
   const templateMessage =
-    templateCount === possibleTemplates.length
+    templateCount === possibleTemplates.length && templateCount > 0
       ? 'all templates'
       : `${Math.max(0, templateCount)} ${
           templateCount === 1 ? 'template' : 'templates'