[#2001] Extract c-authorship-file component from views/c-authorship

[sopa301]

Part of #2001

Proposed commit message

Many of the frontend files are difficult to navigate through due to the
large file sizes. As we add more features to the frontend, it is
getting harder to maintain. This is also very unfriendly towards new
contributors. 

Let us break down frontend files in a logical manner, starting with
extracting c-authorship-file from views/c-authorship.

This would provide a starting point towards further refactoring of the
frontend.

Other information

There was a bug in dynamicMixinTooltip.ts where if a component tried to access the methods that involve looking for specific elements while those elements are not in a v-for loop, the result returned by this.$ref[elementName] would not be an array, causing the code to crash. Credits to @jonasongg for discovering this bug and providing the solution.

Also, there seems to be some scss code labelled as segment in the c-authorship-file which should be in c-segment instead. Perhaps it should be shifted there, maybe in another PR.

[ckcherry23]

Hi @sopa301, we appreciate your efforts in trying this out! While this approach does break down the huge file into smaller parts, it creates multiple files that are highly interrelated instead of multiple loosely coupled components with good separation of concerns.

I think it is better if we do our modularization by continuing to follow the Single-File Component pattern of Vue. Let us try to extract the various smaller components within the c-authorship.vue to create smaller SFCs instead. For example, we could extract a c-file.vue for each file displayed and a c-authorship-picker.vue for the various dropdowns and checkboxes on top.

[sopa301]

Thanks for the feedback! I'll look into extracting out a c-file first.

[jonasongg]

Other than the brackets thing, LGTM!

[jonasongg]

Minor nit, but there brackets here are doubled

[sopa301]

Thanks for catching that! I fixed it.

[ckcherry23]

LGTM!

I was wondering if we could move some code of processFiles() into child components so that the individual file processing that is not required by the parent c-authorship.vue component can be moved into c-authorship-file.vue. If possible (and helpful - more code explainability, chances of better performance), we can look into this in a future PR.

[ckcherry23]

@sopa301 Can you also update the PR title to refer to the c-authorship-file component?

[ckcherry23]

@vvidday Do give us your thoughts on this

I was wondering if we could move some code of processFiles() into child components so that the individual file processing that is not required by the parent c-authorship.vue component can be moved into c-authorship-file.vue. If possible (and helpful - more code explainability, chances of better performance), we can look into this in a future PR.

[vvidday]

Great work on this PR @sopa301! This is a great step towards our goal of breaking down the giant components. Just have some very minor questions.

Regarding the CSS changes, I agree that can be done in a separate PR.

[vvidday]

@vvidday Do give us your thoughts on this

I was wondering if we could move some code of processFiles() into child components so that the individual file processing that is not required by the parent c-authorship.vue component can be moved into c-authorship-file.vue. If possible (and helpful - more code explainability, chances of better performance), we can look into this in a future PR.

Hmm the only thing I'm concerned regarding this is that currently the authorship component is updating the entire AuthorshipFile[] array into the store (this.$store.commit('updateTabAuthorshipFiles', res);) after processing. If the processing is done in the child components instead, we would have to be very careful about how we are updating the store and whether any changes to the store update logic would affect any other areas.

[vvidday]

LGTM!

[github-actions]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-2096-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-2096-pr-reposense-reposense.surge.sh