Merge branch 'master' into fix/network-profile

molgenis · Oct 11, 2024 · b579a6f · b579a6f
2 parents 3d79d41 + 9185e3c
commit b579a6f
Show file tree

Hide file tree

Showing 44 changed files with 1,243 additions and 271 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -246,11 +246,10 @@ jobs:
     - post_steps
   e2e-test:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.47.0-jammy
+      - image: mcr.microsoft.com/playwright:v1.48.0-jammy
     steps:
       - checkout
       - run: npm i -D @playwright/test
-      - run: npx playwright install chrome
       - run:
           name: Install dependencies
           command: yarn install
@@ -274,14 +273,16 @@ jobs:
       - run:
           name: Test nuxt ssr catalogue tests
           command: |
+            yarn playwright install chrome
             echo "PR number: ${CIRCLE_PULL_REQUEST##*/}"
             export E2E_BASE_URL=https://preview-emx2-pr-${CIRCLE_PULL_REQUEST##*/}.dev.molgenis.org/
             echo $E2E_BASE_URL
             yarn e2e
           working_directory: apps/nuxt3-ssr          
       - run:
           name: Run non ssr e2e tests
-          command: | 
+          command: |
+            npx playwright install chrome
             echo "PR number: ${CIRCLE_PULL_REQUEST##*/}"
             export E2E_BASE_URL=https://preview-emx2-pr-${CIRCLE_PULL_REQUEST##*/}.dev.molgenis.org/
             echo $E2E_BASE_URL

diff --git a/apps/central/src/components/Groups.vue b/apps/central/src/components/Groups.vue
@@ -20,20 +20,6 @@
       />
 
       <label>{{ count }} databases found</label>
-      <ButtonOutline
-        v-if="showChangeColumnButton && !showChangeColumn"
-        @click="showChangeColumn = true"
-        class="float-right"
-      >
-        Show changelog
-      </ButtonOutline>
-      <ButtonOutline
-        v-if="showChangeColumnButton && showChangeColumn"
-        @click="showChangeColumn = false"
-        class="float-right"
-      >
-        Hide changelog
-      </ButtonOutline>
 
       <table class="table table-hover table-bordered bg-white">
         <thead>
@@ -90,14 +76,8 @@
             </td>
             <td v-if="showChangeColumn">
               <LastUpdateField
-                v-if="changelogSchemas.includes(schema.id)"
-                :schema="schema.id"
-                @input="
-                  (i) => {
-                    schema.update = new Date(i);
-                    handleLastUpdateChange();
-                  }
-                "
+                v-if="schema.update"
+                :lastUpdate="schema.update"
               />
             </td>
           </tr>
@@ -167,8 +147,7 @@ export default {
       search: null,
       sortColumn: "name",
       sortOrder: null,
-      changelogSchemas: [],
-      showChangeColumn: false,
+      lastUpdates: [],
     };
   },
   computed: {
@@ -186,8 +165,8 @@ export default {
           this.session.roles.includes("Manager"))
       );
     },
-    showChangeColumnButton() {
-      return this.hasManagerPermission;
+    showChangeColumn() {
+      return this.session.email == "admin";
     },
   },
   created() {
@@ -219,34 +198,31 @@ export default {
     },
     getSchemaList() {
       this.loading = true;
-      request("graphql", "{_schemas{id,label,description}}")
+      const schemaFragment = "_schemas{id,label,description}";
+      const lastUpdateFragment =
+        "_lastUpdate{schemaName, tableName, stamp, userId, operation}";
+      request(
+        "graphql",
+        `{${schemaFragment} ${this.showChangeColumn ? lastUpdateFragment : ""}}`
+      )
         .then((data) => {
           this.schemas = data._schemas;
-          this.loading = false;
-          if (this.hasManagerPermission && this.showChangeColumn) {
-            this.fetchChangelogStatus();
-          }
-        })
-        .catch(
-          (error) =>
-            (this.graphqlError = "internal server graphqlError" + error)
-        );
-    },
-    fetchChangelogStatus() {
-      this.schemas.forEach((schema) => {
-        request(
-          `/${schema.id}/settings/graphql`,
-          `{_settings (keys: ["isChangelogEnabled"]){ key, value }}`
-        )
-          .then((data) => {
-            if (data._settings[0].value.toLowerCase() === "true") {
-              this.changelogSchemas.push(schema.id);
+          const lastUpdates = data._lastUpdate ?? [];
+          lastUpdates.forEach((lastUpdate) => {
+            const schemaLastUpdate = this.schemas.find(
+              (schema) => schema.id === lastUpdate.schemaName
+            );
+            if (schemaLastUpdate) {
+              schemaLastUpdate.update = lastUpdate;
             }
-          })
-          .catch((error) => {
-            console.log(error);
           });
-      });
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.error("internal server error", error);
+          this.graphqlError = "internal server error" + error;
+          this.loading = false;
+        });
     },
     filterSchema(unfiltered) {
       let filtered = unfiltered;
@@ -268,7 +244,7 @@ export default {
       if (this.sortColumn === "lastUpdate") {
         sorted = unsortedCopy.sort((a, b) => {
           if (a.update && b.update) {
-            return a.update.getTime() - b.update.getTime();
+            return new Date(a.update.stamp) - new Date(b.update.stamp);
           } else if (a.update && !b.update) {
             return 1;
           } else if (!a.update && b.update) {

diff --git a/apps/central/src/components/LastUpdateField.vue b/apps/central/src/components/LastUpdateField.vue
@@ -1,56 +1,23 @@
 <template>
-  <span v-if="loading"><Spinner></Spinner></span>
-  <span v-else-if="update">
-    <a :href="`/${this.schema}/settings/#/changelog`">
-      {{ formatStamp(update.stamp) }} ({{ update.tableName }})
+  <span>
+    <a :href="`/${lastUpdate.schema}/settings/#/changelog`">
+      {{ timeStamp }} ({{ lastUpdate.tableName }})
     </a>
   </span>
-  <span v-else
-    ><em>{{ statusMessage }}</em></span
-  >
 </template>
 
-<script>
-import { request } from "graphql-request";
-import { Spinner } from "molgenis-components";
-export default {
-  name: "LastUpdateField",
-  components: { Spinner },
-  props: {
-    schema: {
-      String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      update: null,
-      loading: true,
-      statusMessage: "",
-    };
-  },
-  methods: {
-    formatStamp(stamp) {
-      const date = new Date(stamp);
-      return date.toLocaleDateString();
-    },
-  },
-  async created() {
-    const resp = await request(
-      `/${this.schema}/settings/graphql`,
-      "{_changes(limit: 1) {operation, stamp, userId, tableName}}"
-    ).catch((error) => {
-      this.statusMessage = "failed to fetch updated";
-      console.log(error);
-    });
+<script setup lang="ts">
+import { computed } from "vue";
 
-    this.update = resp ? resp["_changes"][0] : null;
+const props = defineProps<{
+  lastUpdate: {
+    stamp: number;
+    tableName: string;
+    schema: string;
+  };
+}>();
 
-    if (this.update && this.update.stamp) {
-      // emit timestamp for use in row sort
-      this.$emit("input", this.update.stamp);
-    }
-    this.loading = false;
-  },
-};
+const timeStamp = computed(() => {
+  return new Date(props.lastUpdate.stamp).toLocaleDateString();
+});
 </script>
diff --git a/...s/components/content/ContentBlockData.vue → ...r/components/content/ContentBlockData.vue b/...s/components/content/ContentBlockData.vue → ...r/components/content/ContentBlockData.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ICollectionEvents } from "~/interfaces/catalogue";
+
 const { collectionEvents } = defineProps<{
   title: string;
   description?: string;
-  collectionEvents?: IResourceCollectionEvent[];
+  collectionEvents?: ICollectionEvents[];
 }>();
 
 const dataCategories = collectionEvents

diff --git a/apps/nuxt3-ssr/components/header/Catalogue.vue b/apps/nuxt3-ssr/components/header/Catalogue.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { UIResource, UIResourceType } from "~/interfaces/types";
+
 const route = useRoute();
 const config = useRuntimeConfig();
 
 const props = defineProps<{
-  catalogue: any;
+  catalogue?: UIResource;
   variableCount: number;
+  resourceTypes: UIResourceType[];
 }>();
 
 const cohortOnly = computed(() => {
@@ -23,18 +26,16 @@ if (route.params.resourceType) {
   });
 }
 
-if (props.catalogue.resources_groupBy?.length) {
-  props.catalogue.resources_groupBy.forEach(
-    (sub: { type: { name: string }; count: string }) => {
-      const resourceTypeMetadata = getResourceMetadataForType(sub.type.name);
-      menu.push({
-        label: resourceTypeMetadata.plural,
-        link:
-          `/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/` +
-          resourceTypeMetadata.path,
-      });
-    }
-  );
+if (props.resourceTypes.length > 0) {
+  props.resourceTypes.forEach((resourceType) => {
+    const resourceTypeMetadata = getResourceMetadataForType(
+      resourceType.type.name
+    );
+    menu.push({
+      label: resourceTypeMetadata.plural,
+      link: `/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/${resourceTypeMetadata.path}`,
+    });
+  });
 }
 
 if (!cohortOnly.value && props.variableCount > 0)
@@ -73,7 +74,9 @@ if (!cohortOnly.value) {
       <div class="items-center justify-between hidden xl:flex h-25">
         <Logo
           :link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
-          :image="catalogueRouteParam === 'all' ? null : catalogue?.logo?.url"
+          :image="
+            catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
+          "
         />
         <MainNavigation :navigation="menu" :invert="true" />
         <!--  <div class="w-[450px]">
@@ -91,7 +94,7 @@ if (!cohortOnly.value) {
             <LogoMobile
               :link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
               :image="
-                catalogueRouteParam === 'all' ? null : catalogue?.logo?.url
+                catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
               "
             />
           </div>

diff --git a/apps/nuxt3-ssr/components/layouts/DetailPage.vue b/apps/nuxt3-ssr/components/layouts/DetailPage.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
 
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
@@ -15,8 +13,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
 
   <HeaderGlobal v-else />

diff --git a/apps/nuxt3-ssr/components/layouts/LandingPage.vue b/apps/nuxt3-ssr/components/layouts/LandingPage.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
-
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
   return bannerData.data;
@@ -15,8 +12,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
   <HeaderGlobal v-else />
   <Container>

diff --git a/apps/nuxt3-ssr/components/layouts/SearchPage.vue b/apps/nuxt3-ssr/components/layouts/SearchPage.vue
@@ -1,9 +1,6 @@
 <script setup>
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
-
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
   return bannerData.data;
@@ -15,8 +12,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
 
   <HeaderGlobal v-else />

diff --git a/apps/nuxt3-ssr/composables/fetchMetadata.ts b/apps/nuxt3-ssr/composables/fetchMetadata.ts
@@ -1,7 +1,7 @@
 import { StorageSerializers, useSessionStorage } from "@vueuse/core";
 
 import metadataGql from "~~/gql/metadata";
-import { type ISchemaMetaData } from "metadata-utils";
+import type { ISchemaMetaData } from "../../metadata-utils/src/types";
 
 const query = moduleToString(metadataGql);