changes requested by reviews

backend/src/schema/types/type/User.gql

@@ -162,10 +162,10 @@ type Query {
 
   blockedUsers: [User]
   isLoggedIn: Boolean!
-    currentUser: User
-    findUsers(query: String!,limit: Int = 10, filter: _UserFilter): [User]!
+  currentUser: User
+  findUsers(query: String!,limit: Int = 10, filter: _UserFilter): [User]!
     @cypher(
-	statement: """
+      statement: """
       CALL db.index.fulltext.queryNodes('user_fulltext_search', $query)
       YIELD node as post, score
       MATCH (user)
@@ -192,8 +192,7 @@ type Mutation {
   termsAndConditionsAgreedAt: String
   allowEmbedIframes: Boolean
   showShoutsPublicly: Boolean
-
-	locale: String
+  locale: String
   ): User
 
   DeleteUser(id: ID!, resource: [Deletable]): User

cypress/integration/common/search.js

@@ -1,6 +1,6 @@
 import { When, Then } from "cypress-cucumber-preprocessor/steps";
 When("I search for {string}", value => {
-  cy.get("#search-resources")
+  cy.get("[data-test=search-field]")
     .focus()
     .type(value);
 });
@@ -16,7 +16,7 @@ Then("the search has no results", () => {
     expect($li).to.have.length(1);
   });
   cy.get(".ds-select-dropdown").should("contain", 'Nothing found');
-  cy.get("#search-resources")
+  cy.get("[data-test=search-field]")
     .focus()
     .type("{esc}");
 });
@@ -35,21 +35,21 @@ Then("I should see the following users in the select dropdown:", table => {
 });
 
 When("I type {string} and press Enter", value => {
-  cy.get("#search-resources")
+  cy.get("[data-test=search-field]")
     .focus()
     .type(value)
     .type("{enter}", { force: true });
 });
 
 When("I type {string} and press escape", value => {
-  cy.get("#search-resources")
+  cy.get("[data-test=search-field]")
     .focus()
     .type(value)
     .type("{esc}");
 });
 
 Then("the search field should clear", () => {
-  cy.get("#search-resources").should("have.text", "");
+  cy.get("[data-test=search-field]").should("have.text", "");
 });
 
 When("I select a post entry", () => {
@@ -94,4 +94,4 @@ Then("I select a user entry", () => {
 
 Then("I should be on the user's profile", () => {
   cy.location("pathname").should("eq", "/profile/user-for-search/search-for-me")
-})
+})

webapp/components/features/SearchField/SearchField.spec.js

@@ -1,15 +1,15 @@
 import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
-import SearchResources from './SearchResources.vue'
+import SearchField from './SearchField.vue'
 import SearchableInput from '~/components/generic/SearchableInput/SearchableInput'
-import { results as searchResults } from './SearchResources.story'
+import { results as searchResults } from './SearchField.story'
 const localVue = global.localVue
 
 localVue.filter('truncate', () => 'truncated string')
 localVue.filter('dateTime', () => Date.now)
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 
-describe('SearchResources.vue', () => {
+describe('SearchField.vue', () => {
   let mocks, wrapper, getters
   beforeEach(() => {
     mocks = {
@@ -26,7 +26,7 @@ describe('SearchResources.vue', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(SearchResources, { mocks, localVue, store })
+    return mount(SearchField, { mocks, localVue, store })
   }
 
   describe('mount', () => {

webapp/components/features/SearchField/SearchField.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import SearchResources from './SearchResources.vue'
+import SearchField from './SearchField.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -100,19 +100,18 @@ export const results = [
   },
 ]
 
-storiesOf('Search Input', module)
+storiesOf('Search Field', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('test', () => ({
-    components: { SearchResources },
+    components: { SearchField },
     store: helpers.store,
     data: () => ({
       results: results,
     }),
     template: `
-      <search-input
-        :results="results"
-        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      <search-field
+        :searchResults="results"
       />
     `,
   }))

webapp/components/features/SearchField/SearchField.vue

@@ -1,7 +1,6 @@
 <template>
   <searchable-input
-    data-test="search-resources"
-    id="search-resources"
+    data-test="search-field"
     :loading="pending"
     :options="searchResults"
     @query="query"
@@ -14,6 +13,7 @@ import { findResourcesQuery } from '~/graphql/Search.js'
 import SearchableInput from '~/components/generic/SearchableInput/SearchableInput.vue'
 
 export default {
+  name: 'SearchField',
   components: {
     SearchableInput,
   },

webapp/components/generic/SearchHeading/SearchHeading.vue

@@ -13,3 +13,14 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+.search-heading {
+  display: flex;
+  flex-wrap: wrap;
+  font-weight: bold;
+  cursor: default;
+  background-color: white;
+  margin: -8px;
+  padding: 8px;
+}
+</style>

webapp/components/generic/SearchPost/SearchPost.spec.js

@@ -28,10 +28,11 @@ describe('SearchPost.vue', () => {
     return shallowMount(SearchPost, { mocks, localVue, propsData })
   }
 
-  describe('mount', () => {
+  describe('shallowMount', () => {
     it('renders post title', () => {
       expect(wrapper.find('.search-option-label').text()).toMatch('Post Title')
     })
+
     it('renders post commentsCount', () => {
       expect(
         wrapper
@@ -41,6 +42,7 @@ describe('SearchPost.vue', () => {
           .exists(),
       ).toBe(true)
     })
+
     it('renders post shoutedCount', () => {
       expect(
         wrapper
@@ -50,9 +52,11 @@ describe('SearchPost.vue', () => {
           .exists(),
       ).toBe(true)
     })
+
     it('renders post author', () => {
       expect(wrapper.find('.search-post-author').text()).toContain('Post Author')
     })
+
     it('renders post createdAt', () => {
       expect(wrapper.find('.search-post-author').text()).toContain('23.08.2019')
     })

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -2,7 +2,7 @@ import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import SearchableInput from './SearchableInput'
-import { results } from '~/components/features/SearchResources/SearchResources.story'
+import { results } from '~/components/features/SearchField/SearchField.story'
 
 const localVue = global.localVue
 

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -39,13 +39,13 @@
             </span>
             <span
               v-if="option.__typename === 'User'"
-              :class="{ 'extra-space': isFirstOfType(option), 'flex-span': true }"
+              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
             >
               <hc-user :user="option" :showPopover="false" />
             </span>
             <span
               v-if="option.__typename === 'Post'"
-              :class="{ 'extra-space': isFirstOfType(option), 'flex-span': true }"
+              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
             >
               <search-post :option="option" />
             </span>
@@ -62,6 +62,7 @@ import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
 import HcUser from '~/components/User/User.vue'
 
 export default {
+  name: 'SearchableInput',
   components: {
     SearchHeading,
     SearchPost,
@@ -169,25 +170,16 @@ export default {
   },
 }
 </script>
-<style lang="scss" `>
+<style lang="scss">
 .searchable-input {
   display: flex;
   align-self: center;
   width: 100%;
   position: relative;
   $padding-left: $space-x-small;
-  .search-heading {
-    display: flex;
-    flex-wrap: wrap;
-    font-weight: bold;
-    cursor: default;
-    background-color: white;
-    margin: -8px;
-    padding: 8px;
-  }
-  .extra-space {
-    margin-top: 8px;
-    padding-top: 4px;
+  .option-with-heading {
+    margin-top: $space-x-small;
+    padding-top: $space-xx-small;
   }
   .flex-span {
     display: flex;

webapp/layouts/default.vue

@@ -19,10 +19,10 @@
             <ds-flex-item
               :width="{ base: '85%', sm: '85%', md: '50%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              id="nav-search-box"
+              v-if="isLoggedIn"
             >
-              <div id="nav-search-box" v-if="isLoggedIn">
-                <search-resources />
-              </div>
+              <search-field />
             </ds-flex-item>
             <ds-flex-item
               v-if="isLoggedIn"
@@ -84,7 +84,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import SearchResources from '~/components/features/SearchResources/SearchResources.vue'
+import SearchField from '~/components/features/SearchField/SearchField.vue'
 import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import seo from '~/mixins/seo'
@@ -96,7 +96,7 @@ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 export default {
   components: {
     LocaleSwitch,
-    SearchResources,
+    SearchField,
     Modal,
     NotificationMenu,
     AvatarMenu,

webapp/locales/de.json

@@ -518,8 +518,7 @@
         "failed": "Nichts gefunden",
         "heading": {
           "Post": "Beiträge",
-          "User": "Benutzer",
-	  "Tag": "Hashtags"
+          "User": "Benutzer"
         }
     },
     "components": {

webapp/locales/en.json

@@ -202,8 +202,7 @@
     "failed": "Nothing found",
     "heading": {
       "Post": "Posts",
-      "User": "Users",
-      "Tag": "Hashtags"
+      "User": "Users"
     }
   },
   "settings": {