Fix issue with multiple assignments on same page

Also add cypress test for that case
Fixes MS-679 #complete

client/cypress.e2e.ts

@@ -3,7 +3,7 @@ import { readFileSync } from 'fs';
 import { resolve } from 'path';
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:8000',
+    baseUrl: 'http://127.0.0.1:8000',
     specPattern: 'cypress/e2e/e2e/**/*.{spec,cy}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {

client/cypress.frontend.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   chromeWebSecurity: false,
 
   e2e: {
-    baseUrl: 'http://localhost:8080',
+    baseUrl: 'http://127.0.0.1:8080',
     specPattern: 'cypress/e2e/frontend/**/*.{cy,spec}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {

client/cypress/e2e/frontend/modules/file-upload-multiple-assignments.cy.ts

@@ -0,0 +1,190 @@
+import { getMinimalMe } from '../../../support/helpers';
+
+interface ContentBlock {
+  contents: any[];
+  type: string;
+  title: string;
+  instrumentCategory?: any;
+}
+interface Chapter {
+  title: string;
+  contentBlocks: ContentBlock[];
+}
+interface Topic {
+  slug: string;
+  title: string;
+}
+
+interface Module {
+  title: string;
+  slug: string;
+  metaTitle?: string;
+  chapters: Chapter[];
+  topic: Topic;
+}
+
+interface ModuleDetailsType {
+  module: Module;
+}
+interface Submission {
+  text: string;
+  final: boolean;
+  document: string;
+  submissionFeedback?: any;
+}
+
+interface Assignment {
+  title: string;
+  assignment: string;
+  solution: string;
+  submission: Submission;
+}
+
+interface AssignmentQueryType {
+  assignment: Assignment;
+}
+
+describe('Multiple assignments with file upload', () => {
+  const MeQuery = getMinimalMe();
+  const ModuleDetailsQuery: ModuleDetailsType = {
+    module: {
+      title: 'Module',
+      slug: 'a-module',
+      chapters: [
+        {
+          title: 'Chapter',
+          contentBlocks: [
+            {
+              type: 'normal',
+              title: 'Content Block',
+              instrumentCategory: null,
+              contents: [
+                {
+                  type: 'text_block',
+                  value: { text: 'some text' },
+                },
+                {
+                  type: 'assignment',
+                  value: {
+                    title: 'assignment 1',
+                    assignment: 'Hallo Velo',
+                    id: window.btoa('AssignmentNode:1'),
+                  },
+                },
+                {
+                  type: 'assignment',
+                  value: {
+                    title: 'assignment 2',
+                    assignment: 'Hallo Velo',
+                    id: window.btoa('AssignmentNode:2'),
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      topic: {
+        slug: 'a-topic',
+        title: 'Topic',
+      },
+    },
+  };
+  const submission = {
+    text: 'So weit so gut',
+    final: false,
+    document: '',
+    submissionFeedback: null,
+  };
+  const assignment = {
+    title: 'assignment 1',
+    assignment: 'Hallo Velo',
+    solution: '',
+    id: window.btoa('AssignmentNode:2'),
+    submission,
+  };
+  const AssignmentQuery: AssignmentQueryType = {
+    assignment,
+  };
+  const operations = {
+    MeQuery,
+    ModuleDetailsQuery,
+    ModuleEditModeQuery: {},
+    UpdateLastModule: {},
+    AssignmentQuery,
+    UpdateAssignmentWithSuccess: {
+      success: true,
+      updatedAssignment: {
+        ...assignment,
+        submission: {
+          ...submission,
+          document: 'https://someurl.com/ucare/bla-bliblb.txt',
+        },
+      },
+    },
+  };
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('works', () => {
+    cy.mockGraphqlOps({ operations });
+    cy.intercept('https://upload.uploadcare.com/base/*', {
+      statusCode: 200,
+      body: {
+        file: 'abc-def-hikl-mnop',
+      },
+    });
+    const infoBody = {
+      size: 13,
+      total: 13,
+      done: 13,
+      uuid: '7c17f0d9-6715-42ce-9bcf-0c50c90775ae',
+      file_id: '7c17f0d9-6715-42ce-9bcf-0c50c90775ae',
+      original_filename: 'file.txt',
+      is_image: false,
+      is_stored: true,
+      image_info: null,
+      video_info: null,
+      content_info: { mime: { mime: 'text/plain', type: 'text', subtype: 'plain' } },
+      is_ready: true,
+      filename: 'file.txt',
+      mime_type: 'text/plain',
+      metadata: {},
+    };
+    cy.intercept(
+      {
+        method: '+(OPTION|GET)',
+        url: 'https://upload.uploadcare.com/info/*',
+      },
+      {
+        statusCode: 200,
+        body: infoBody,
+      }
+    );
+    cy.visit('/module/bla');
+    cy.wait('@graphqlRequest');
+    cy.wait('@graphqlRequest');
+    cy.wait('@graphqlRequest');
+    cy.wait('@graphqlRequest');
+    cy.getByDataCy('assignment-main-text').should('exist');
+    // cy.get('.uploadcare--widget__button_type_open').eq(1).click({ force: true });
+    cy.get('.simple-file-upload-icon').eq(1).click();
+    cy.get('input[type="file"]').selectFile(
+      {
+        contents: Cypress.Buffer.from('file contents'),
+        fileName: 'file.txt',
+        mimeType: 'text/plain',
+        lastModified: Date.now(),
+      },
+      {
+        force: true,
+      }
+    );
+    cy.get('.file-upload')
+      .eq(1)
+      .within(() => {
+        cy.get('.document-block__link').should('have.text', 'file.txt');
+      });
+  });
+});

client/src/components/ui/file-upload/SimpleFileUpload.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="simple-file-upload">
+  <div
+    class="simple-file-upload"
+    ref="upload"
+  >
     <component
       :is="button"
       @click="clickUploadCare"
@@ -9,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 export interface Props {
   value: string;
   withText: boolean;
@@ -34,12 +37,17 @@ const button = computed(() => {
   return SimpleFileUploadIcon;
 });
 
+const upload = ref<HTMLElement | null>(null);
+
 const clickUploadCare = () => {
   // workaround for styling the uploadcare widget
-  let btn: HTMLElement = document.querySelector('.uploadcare--widget__button') as HTMLElement;
+  const el = upload.value;
+  if (el) {
+    let btn: HTMLElement = el.querySelector('.uploadcare--widget__button') as HTMLElement;
     if (btn) {
       btn.click();
     }
+  }
 };
 </script>