Merge branch 'master' into 6066-group-query-sort-by-createdAt

.github/workflows/test.yml

@@ -329,19 +329,16 @@ jobs:
       - name: backend | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp neo4j backend
       - name: cypress | Fullstack tests
+        id: e2e-tests
         run: |
           yarn install
           yarn run cypress:run --spec $(cypress/parallel-features.sh ${{ matrix.job }} ${{ env.jobs }} )
       ##########################################################################
-      # UPLOAD SCREENSHOTS & VIDEO #############################################
+      # UPLOAD SCREENSHOTS - IF TESTS FAIL #####################################
       ##########################################################################
-      - name: Upload Artifact
+      - name: Full stack tests | if any test failed, upload screenshots
+        if: ${{ failure() && steps.e2e-tests.conclusion == 'failure' }}
         uses: actions/upload-artifact@v3
         with:
           name: cypress-screenshots
           path: cypress/screenshots/
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-videos
-          path: cypress/videos/

README.md

@@ -197,7 +197,8 @@ Prepare database once before you start by running the following command in a sec
 
 ```bash
 # in main folder while docker-compose is up
-$ docker-compose exec backend yarn run db:migrate init
+$ docker compose exec backend yarn run db:migrate init
+$ docker compose exec backend yarn run db:migrate up
 ```
 
 Then clear and seed database by running the following command as well in the second terminal:

backend/README.md

@@ -81,8 +81,7 @@ More details about our GraphQL playground and how to use it with ocelot.social c
 
 ### Database Indexes and Constraints
 
-Database indexes and constraints need to be created when the database and the
+Database indexes and constraints need to be created and upgraded when the database and the backend are running:
-backend is running:
 
 {% tabs %}
 {% tab title="Docker" %}
@@ -98,6 +97,11 @@ $ docker compose exec backend yarn prod:migrate init
 $ docker compose exec backend /bin/sh -c "yarn prod:migrate init"
 ```
 
+```bash
+# in main folder with docker compose running
+$ docker exec backend yarn run db:migrate up
+```
+
 {% endtab %}
 {% tab title="Without Docker" %}
 
@@ -107,6 +111,11 @@ $ docker compose exec backend /bin/sh -c "yarn prod:migrate init"
 yarn run db:migrate init
 ```
 
+```bash
+# in backend/ with database running (In docker or local)
+yarn run db:migrate up
+```
+
 {% endtab %}
 {% endtabs %}
 
@@ -134,6 +143,8 @@ $ docker exec backend yarn run db:reset
 $ docker-compose down -v
 # if container is not running, run this command to set up your database indexes and constraints
 $ docker exec backend yarn run db:migrate init
+# And then upgrade the indexes and const
+$ docker exec backend yarn run db:migrate up
 ```
 
 {% endtab %}

cypress/cypress.json

@@ -4,6 +4,7 @@
   "ignoreTestFiles": "*.js",
   "chromeWebSecurity": false,
   "baseUrl": "http://localhost:3000",
+  "video":false,
   "retries": {
     "runMode": 2,
     "openMode": 0

deployment/DOCKER_MORE_CLOSELY.md

@@ -0,0 +1,33 @@
+# Docker
+
+## Apple M1 Platform
+
+***Attention:** For using Docker commands in Apple M1 environments!*
+
+```bash
+# set env variable for your shell
+$ export DOCKER_DEFAULT_PLATFORM=linux/amd64
+```
+
+For even more informations, see [Docker More Closely](#docker-more-closely)
+
+### Docker Compose Override File For Apple M1 Platform
+
+For Docker compose `up` or `build` commands, you can use our Apple M1 override file that specifies the M1 platform:
+
+```bash
+# in main folder
+
+# for production
+$ docker compose -f docker-compose.yml -f docker-compose.apple-m1.override.yml up
+
+# for production testing Docker images from DockerHub
+$ docker compose -f docker-compose.ocelotsocial-branded.yml -f docker-compose.apple-m1.override.yml up
+
+# only once: init admin user and create indexes and constraints in Neo4j database
+$ docker compose exec backend /bin/sh -c "yarn prod:migrate init"
+```
+
+## Docker More Closely In Main Code
+
+To get more informations about the Apple M1 platform and to analyze the Docker builds etc. you find our documentation in our main code, [here](https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/DOCKER_MORE_CLOSELY.md).

neo4j/README.md

@@ -44,7 +44,7 @@ for development, spin up a
 [hosted Neo4j Sandbox instance](https://neo4j.com/download/), run Neo4j in one
 of the [many cloud options](https://neo4j.com/developer/guide-cloud-deployment/),
 [spin up Neo4j in a Docker container](https://neo4j.com/developer/docker/),
-on Archlinux you can install [neo4j-community from AUR](https://aur.archlinux.org/packages/neo4j-community/)
+on Arch linux you can install [neo4j-community from AUR](https://aur.archlinux.org/packages/neo4j-community/)
 or on Debian-based systems install [Neo4j from the Debian Repository](http://debian.neo4j.org/).
 Just be sure to update the Neo4j connection string and credentials accordingly
 in `backend/.env`.

webapp/components/Category/index.vue

@@ -30,6 +30,7 @@ export default {
   }
 }
 .filterActive {
-  background-color: $color-success-active;
+  color: $color-primary-inverse;
+  background-color: $color-primary-active;
 }
 </style>

webapp/components/FilterMenu/HeaderButton.vue

@@ -0,0 +1,57 @@
+<template>
+  <span>
+    <base-button
+      class="my-filter-button my-filter-button-selected"
+      right
+      @click="clickButton"
+      filled
+    >
+      {{ title }}
+    </base-button>
+    <base-button
+      class="filter-remove"
+      @click="clickRemove"
+      icon="close"
+      :title="titleRemove"
+      size="small"
+      circle
+      filled
+    />
+  </span>
+</template>
+<script>
+export default {
+  name: 'HeaderButton',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    clickButton: {
+      type: Function,
+      required: true,
+    },
+    titleRemove: {
+      type: String,
+      required: true,
+    },
+    clickRemove: {
+      type: Function,
+      required: true,
+    },
+  },
+}
+</script>
+<style lang="scss">
+.my-filter-button-selected {
+  padding-right: 30px;
+  margin-top: 4px;
+}
+
+.base-button.filter-remove {
+  position: relative;
+  margin-left: -31px;
+  top: -5px;
+  margin-right: 8px;
+}
+</style>

webapp/components/MasonryGrid/MasonryGrid.vue

@@ -30,7 +30,7 @@ export default {
 /* dirty fix to override broken styleguide inline-styles */
 .ds-grid {
   grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
-  gap: 16px !important;
+  gap: 32px 16px !important;
   grid-auto-rows: 20px;
 }
 

webapp/components/PostTeaser/PostTeaser.vue

@@ -26,7 +26,7 @@
         v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
       >
         <div class="categories" v-if="categoriesActive">
-          <hc-category
+          <category
             v-for="category in post.categories"
             :key="category.id"
             v-tooltip="{
@@ -81,11 +81,11 @@
 </template>
 
 <script>
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import Category from '~/components/Category'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcRibbon from '~/components/Ribbon'
-import HcCategory from '~/components/Category'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import HcRibbon from '~/components/Ribbon'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
@@ -93,11 +93,11 @@ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostH
 export default {
   name: 'PostTeaser',
   components: {
-    UserTeaser,
+    Category,
-    HcCategory,
-    HcRibbon,
     ContentMenu,
     CounterIcon,
+    HcRibbon,
+    UserTeaser,
   },
   props: {
     post: {

webapp/components/features/ProfileList/FollowList.spec.js

@@ -74,7 +74,9 @@ describe('FollowList.vue', () => {
 
           expect(wrapper.vm.allConnectionsCount).toBe(user.followingCount)
           expect(wrapper.findAll('.user-teaser')).toHaveLength(user.following.length)
-          expect(wrapper.emitted('fetchAllConnections')).toEqual([['following']])
+          expect(wrapper.emitted('fetchAllConnections')).toEqual([
+            ['following', user.followingCount],
+          ])
         })
       })
 
@@ -85,7 +87,9 @@ describe('FollowList.vue', () => {
 
           expect(wrapper.vm.allConnectionsCount).toBe(user.followedByCount)
           expect(wrapper.findAll('.user-teaser')).toHaveLength(user.followedBy.length)
-          expect(wrapper.emitted('fetchAllConnections')).toEqual([['followedBy']])
+          expect(wrapper.emitted('fetchAllConnections')).toEqual([
+            ['followedBy', user.followedByCount],
+          ])
         })
       })
     })

webapp/components/features/ProfileList/FollowList.vue

@@ -6,7 +6,7 @@
     :allProfilesCount="allConnectionsCount"
     :profiles="connections"
     :loading="loading"
-    @fetchAllProfiles="$emit('fetchAllConnections', type)"
+    @fetchAllProfiles="$emit('fetchAllConnections', type, allConnectionsCount)"
   />
 </template>
 

webapp/maintenance/source/nuxt.config.maintenance.js

@@ -15,7 +15,7 @@ export default {
       },
       {
         name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
+        content: 'initial-scale=1',
       },
       {
         hid: 'description',

webapp/nuxt.config.js

@@ -62,7 +62,7 @@ export default {
       },
       {
         name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
+        content: 'initial-scale=1',
       },
       {
         hid: 'description',

webapp/pages/index.vue

@@ -43,47 +43,30 @@
                
               <base-icon class="my-filter-button" :name="filterButtonIcon"></base-icon>
             </base-button>
-            <span v-if="postsFilter['categories_some']">
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
-                {{ $t('contribution.filterMasonryGrid.myTopics') }}
-              </base-button>
-              <base-button
-                class="filter-remove"
-                @click="resetCategories"
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
-                filled
-              />
-            </span>
-            <span v-if="postsFilter['author']">
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
-                {{ $t('contribution.filterMasonryGrid.myFriends') }}
-              </base-button>
-              <base-button
-                class="filter-remove"
-                @click="resetByFollowed"
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
-                filled
-              />
-            </span>
 
-            <span v-if="postsFilter['postsInMyGroups']">
+            <header-button
-              <base-button class="my-filter-button" right @click="showFilter = !showFilter" filled>
+              v-if="postsFilter['categories_some']"
-                {{ $t('contribution.filterMasonryGrid.myGroups') }}
+              :title="$t('contribution.filterMasonryGrid.myTopics')"
-              </base-button>
+              :clickButton="openFilterMenu"
-              <base-button
+              :titleRemove="$t('filter-menu.deleteFilter')"
-                class="filter-remove"
+              :clickRemove="resetCategories"
-                @click="resetByGroups"
+            />
-                icon="close"
-                :title="$t('filter-menu.deleteFilter')"
-                style="margin-left: -8px"
-                filled
-              />
-            </span>
 
+            <header-button
+              v-if="postsFilter['author']"
+              :title="$t('contribution.filterMasonryGrid.myFriends')"
+              :clickButton="openFilterMenu"
+              :titleRemove="$t('filter-menu.deleteFilter')"
+              :clickRemove="resetByFollowed"
+            />
+
+            <header-button
+              v-if="postsFilter['postsInMyGroups']"
+              :title="$t('contribution.filterMasonryGrid.myGroups')"
+              :clickButton="openFilterMenu"
+              :titleRemove="$t('filter-menu.deleteFilter')"
+              :clickRemove="resetByGroups"
+            />
             <div id="my-filter" v-if="showFilter">
               <div @mouseleave="showFilter = false">
                 <filter-menu-component @showFilterMenu="showFilterMenu" />
@@ -142,6 +125,7 @@ import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import HeaderButton from '~/components/FilterMenu/HeaderButton'
 import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
@@ -159,6 +143,7 @@ export default {
     MasonryGrid,
     MasonryGridItem,
     FilterMenuComponent,
+    HeaderButton,
   },
   mixins: [postListActions],
   data() {
@@ -225,6 +210,9 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    openFilterMenu() {
+      this.showFilter = !this.showFilter
+    },
     showFilterMenu(e) {
       if (!e || (!e.target.closest('#my-filter') && !e.target.closest('.my-filter-button'))) {
         if (!this.showFilter) return
@@ -354,13 +342,18 @@ export default {
   align-items: center;
 }
 .filterButtonMenu {
+  width: 95%;
   position: fixed;
   z-index: 6;
   margin-top: -35px;
   padding: 20px 10px 5px 10px;
-  border-radius: 7px;
   background-color: #f5f4f6;
 }
+@media screen and (max-width: 656px) {
+  .filterButtonMenu {
+    margin-top: -50px;
+  }
+}
 #my-filter {
   background-color: white;
   box-shadow: rgb(189 189 189) 1px 9px 15px 1px;

webapp/pages/profile/_id/_slug.vue

@@ -384,9 +384,9 @@ export default {
       this.user.followedByCurrentUser = followedByCurrentUser
       this.user.followedBy = followedBy
     },
-    fetchAllConnections(type) {
+    fetchAllConnections(type, count) {
-      if (type === 'following') this.followingCount = Infinity
+      if (type === 'following') this.followingCount = count
-      if (type === 'followedBy') this.followedByCount = Infinity
+      if (type === 'followedBy') this.followedByCount = count
     },
   },
   apollo: {