Add service request to recipe dashboard

1 files changed, 34 insertions, 23 deletions

diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 02ea04e35..b6ade5da4 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
+import { FRANZ_SERVICE_REQUEST } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -35,6 +36,10 @@ const messages = defineMessages({
     id: 'settings.recipes.servicesSuccessfulAddedInfo',
     defaultMessage: '!!!Service successfully added',
   },
+  missingService: {
+    id: 'settings.recipes.missingService',
+    defaultMessage: '!!!Missing a service?',
+  },
 });
 
 @observer
@@ -96,33 +101,39 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {!searchNeedle && (
-            <div className="recipes__navigation">
-              <Link
-                to="/settings/recipes"
-                className="badge"
-                activeClassName="badge--primary"
-              >
-                {intl.formatMessage(messages.mostPopularRecipes)}
-              </Link>
+          {/* {!searchNeedle && ( */}
+          <div className="recipes__navigation">
+            <Link
+              to="/settings/recipes"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.mostPopularRecipes)}
+            </Link>
+            <Link
+              to="/settings/recipes/all"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.allRecipes)}
+            </Link>
+            {devRecipesCount > 0 && (
               <Link
-                to="/settings/recipes/all"
+                to="/settings/recipes/dev"
                 className="badge"
-                activeClassName="badge--primary"
+                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+                onClick={() => resetSearch()}
               >
-                {intl.formatMessage(messages.allRecipes)}
+                {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
               </Link>
-              {devRecipesCount > 0 && (
-                <Link
-                  to="/settings/recipes/dev"
-                  className="badge"
-                  activeClassName="badge--primary"
-                >
-                  {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
-                </Link>
-              )}
-            </div>
-          )}
+            )}
+            <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
+              {intl.formatMessage(messages.missingService)} <i className="mdi mdi-open-in-new" />
+            </a>
+          </div>
+          {/* )} */}
           {isLoading ? (
             <Loader />
           ) : (