Fix Editing file on web ui

Question

Fix Editing file on web ui

FranciscoJavierPizarro opened this issue a year ago · 33 comments

FranciscoJavierPizarro commented a year ago

The bug
Using the web interface of Shuffle, in the admin page, more specific in the files section.
When you edit a file that is already defined, and you save it, the contents of this same file duplicate

For example if you have

A
B
C

And you delete C, the new saved file looks like

A
B
C
A
B

To Reproduce
Steps to reproduce the behavior:

Open Shuffle website and go to the admin page
Import a file
Edit the file contents on that same interface
Save the file
Check the file contents in that same interface or by using a shuffle tools with get file option

Expected behavior
To edit the file as expected without duplicating the contents

Answer 1 · 2023-07-28T11:00:35.000Z

Ah, so it is appending to the file rather than editing..? I think we fixed something like that a while back, and I confirmed it doesn't happen on the latest version.

What version are you on? Check docker-compose :)

Answer 2 · 2023-07-28T11:55:29.000Z

Ups sorry if its my bad, i am using the latest, but it had been deployed with the same docker base image since 7 weeks ago, i will test as soon as possible with a test VM with a fresh installation to close this issue if thats the case, thank you

Answer 3 · 2023-07-28T13:41:59.000Z

Update i had tried the same with a fresh out of the box deployment and it stills happens.

The exact bug is the following, when you modify the file and save it via web UI, it saves the previous content on top, appending to the end the new content

So for example we have this file

A
B

then we edit it on the web so it looks like this

A
B
C

then after saving that when we open again the same file to edit it again we get that the content is this

A
B
A
B
C

The exact deployment is using the docker compose with a fresh clone of the github repo over new VMs.

The only special feature about this deployment apart of being on premmise, is the use of a opensearch cluster instead of a single instance of opensearch.

Answer 4 · 2023-07-28T13:52:32.000Z

Update i had tried the same with a fresh out of the box deployment and it stills happens.

The exact bug is the following, when you modify the file and save it via web UI, it saves the previous content on top, appending to the end the new content

So for example we have this file
A
B
then we edit it on the web so it looks like this
A
B
C
then after saving that when we open again the same file to edit it again we get that the content is this
A
B
A
B
C
The exact deployment is using the docker compose with a fresh clone of the github repo over new VMs.

The only special feature about this deployment apart of being on premmise, is the use of a opensearch cluster instead of a single instance of opensearch.

Cheers. Looks like it's a problem in latest, but not our nightly builds :)

Answer 5 · 2023-11-02T18:18:08.000Z

can you help me in locating this?

Answer 6 · 2023-11-02T22:48:43.000Z

can you help me in locating this?

Hey!

This is in the "Files" UI in the Admin area.

Here's the file: https://github.com/Shuffle/Shuffle/blob/main/frontend/src/components/Files.jsx

Answer 7 · 2023-11-03T08:43:19.000Z

Hi , i tried to reproduce but after uploading the file edit button is disabled

Answer 8 · 2023-11-03T12:12:38.000Z

I was able to reproduce this issue, will try to see what's causing it.

Answer 9 · 2023-11-03T14:37:05.000Z

This bug happens even when the submit button is just clicked without any changes to the file. For example, if the file is

A
B
C

At first, after clicking on the edit button and then the submit button the file changed to

A
B
CA
B
C

I found that the frontend sends the correct request to the backend and it's a problem with the backend. Looking at the API code for HandleEditFile, I found that the problem is with uploadFile function where it opens the file in append mode (os.O_APPEND). See https://github.com/Shuffle/shuffle-shared/blob/f35718eb25d90afef765a76b007bf23c16337839/files.go#L1176. If os.O_APPEND is removed the bug seems to be fixed. Something like the below patch can be done.

diff --git a/files.go b/files.go
index 8427940..728aecb 100755
--- a/files.go
+++ b/files.go
@@ -1173,7 +1173,7 @@ func uploadFile(ctx context.Context, file *File, encryptionKey string, contents
                } else if file.StorageArea == "s3" {
                        log.Printf("SHOULD UPLOAD TO S3!")
                } else {
-                       f, err := os.OpenFile(file.DownloadPath, os.O_CREATE|os.O_WRONLY|os.O_APPEND, os.ModePerm)
+                       f, err := os.OpenFile(file.DownloadPath, os.O_CREATE|os.O_RDWR|os.O_TRUNC, os.ModePerm)

                        if err != nil {
                                // Rolling back file

I'm not familiar with Golang so I'm not sure whether it's right, though local testing tells that it works as expected. I can make a PR if that looks right.

Actually, I've come to this issue because of an assignment for Octernship (a frontend role). My findings suggest that this is not actually a frontend issue and is a problem with the backend. I am uncertain about how to proceed with my assignment submission under these circumstances. Any guidance or assistance on this matter would be greatly appreciated.

Thank you!

Answer 10 · 2023-11-03T17:06:12.000Z

@naveen521kk i think you have it spot on. make a PR, I will assign this issue to you to avoid too many people trying to solve the same problem.

Answer 11 · 2023-11-03T17:09:37.000Z

@naveen521kk join our discord to get a faster response from me: https://discord.gg/wwptPnjqEt

keep me updated on this so that if you're not looking forward to solving this, i can assign it to someone else? :)

this is a small bug, shouldn't take you so long.

Answer 12 · 2023-11-03T20:02:21.000Z

hi! i just came to check on this issue through octernship. Seems like @naveen521kk already solved it though?.....are there other issues that we could work on?

Answer 13 · 2023-11-03T20:12:33.000Z

@yagyesh-bobde sort with good-first-issue's and beginner-friendly issues :)

Answer 14 · 2023-11-03T20:33:12.000Z

cool. I work on them _

Answer 15 · 2023-11-04T14:52:03.000Z

Then, How the Submissions will work for Octernships ?? Most of the students can replicate this answer in their assignments + This is not an frontend issue.

Answer 16 · 2023-11-04T18:15:02.000Z

For folks who are here for Github Octernship:

To clear things up, the Frontend assignment will be updated soon to a new one. There was miscommunication from our end on how you all are supposed to approach the assignment. We are working with Github to make sure everyone's got equal opportunity to work on it.

What happens now? What you should know?
• The frontend assignment will be updated.
• Disregard any communications made here or on Github issue previously.
• Read how to submit the assignment under Task Submission in the assignment very carefully before doing anything.
• Make sure you keep your work private and follow the instructions.

If you have any questions, LMK.

Answer 17 · 2023-11-04T18:39:13.000Z

For folks who are here for Github Octernship:

To clear things up, the Frontend assignment will be updated soon to a new one. There was miscommunication from our end on how you all are supposed to approach the assignment. We are working with Github to make sure everyone's got equal opportunity to work on it.

What happens now? What you should know? • The frontend assignment will be updated. • Disregard any communications made here or on Github issue previously. • Read how to submit the assignment under Task Submission in the assignment very carefully before doing anything. • Make sure you keep your work private and follow the instructions.

If you have any questions, LMK.

Thanks for Making everything clear. Appreciate it ❤️

Answer 18 · 2023-11-05T13:02:38.000Z

hello I am facing this issue with setting up local development @FranciscoJavierPizarro

Answer 19 · 2023-11-06T17:45:33.000Z

Please assign, so I'll make a PR

Answer 20 · 2023-11-07T04:37:42.000Z

Please assign, so I'll make a PR

@hollermay check this #1176 (comment).

Answer 21 · 2023-11-07T07:12:36.000Z

edit

Can you describe steps to reproduce it or upload video for the same?
@VinayakVispute

Answer 22 · 2023-11-07T13:08:22.000Z

Pls can I get assigned

Answer 23 · 2023-11-07T14:52:54.000Z

I want to work on this issue please assign me

Answer 24 · 2023-11-07T17:29:03.000Z

@GZMaster @techmannih #1176 (comment)

There is no assignment - just get it done in your local environment :)

Answer 25 · 2023-11-07T18:34:59.000Z

@frikky
Can i create new issue in your website as a frontend and raise a PR for this after assigned

Answer 26 · 2023-11-07T19:54:16.000Z

@frikky Can i create new issue in your website as a frontend and raise a PR for this after assigned

Of course you can create a new issue. We do however not want website suggestions as much as product improvements.

This issue is for Shuffle as an open source product, not a website.

Answer 27 · 2023-11-08T04:13:59.000Z

@frikky
Can I create a new issue in the frontend of this https://Shuffler.io as same as #1238

Answer 28 · 2023-11-08T04:48:11.000Z

Alright folks, if you didn't notice, the assignment has been updated! Go back to the assignment, check the updates, and let me know if you have any questions!

Please read the assignment and Task Submission carefully!

Plus, as I mentioned, disregard all the communications that have happened. And just follow the instructions on the assignment's Task Submission section. The assignment is on Github's octernship website (the one where you saw it for the first time).

I will be your sole point of contact. Direct all your questions to me! You can do that on Github Discussion or on Discord.

Answer 29 · 2023-11-08T05:16:37.000Z

The assignment isn't updating on my end

Answer 30 · 2023-11-08T05:43:15.000Z

The assignment isn't updating on my end

same issue

Answer 31 · 2023-11-08T06:18:55.000Z

@jaygohil-cyber plz provide assignment link

Answer 32 · 2023-11-08T06:25:17.000Z

Assignment

Build a Web Form Generator that connects to Shuffle workflows

Task instructions 📝

Users should be able to build standalone forms inside Shuffle that can be shared with others, and when an action is performed (form opened, form submitted, etc), it triggers a flow inside Shuffle workflow such as Form Submitted -> Fires a trigger inside Shuffle workflow -> Workflow sends an email to hello@shuffler.io.

Task Expectations 👩‍💻👨‍💻

Be able to create and build forms inside Shuffle with all standard input types.
The form needs to be accessible to outsiders with just a link.
Actions performed on the form need to connect to the workflow as triggers.
Don't worry about what workflow will be like. The goal is to make sure something is triggered when an action is performed on the form.
Feel free to test your form on this usecase: Form Submitted -> Fires a trigger inside Shuffle workflow.
If your standalone form can fire a trigger inside Workflow, we'll consider your assignment complete.

Assignment Link : https://github.com/GitHub-Octernships/Shuffle-Frontend-Developer-Software-Engineering

Answer 33 · 2023-11-08T06:26:43.000Z

Assignment

Build a Web Form Generator that connects to Shuffle workflows

Task instructions 📝

Users should be able to build standalone forms inside Shuffle that can be shared with others, and when an action is performed (form opened, form submitted, etc), it triggers a flow inside Shuffle workflow such as Form Submitted -> Fires a trigger inside Shuffle workflow -> Workflow sends an email to hello@shuffler.io.

Task Expectations 👩‍💻👨‍💻

Be able to create and build forms inside Shuffle with all standard input types. The form needs to be accessible to outsiders with just a link. Actions performed on the form need to connect to the workflow as triggers. Don't worry about what workflow will be like. The goal is to make sure something is triggered when an action is performed on the form. Feel free to test your form on this usecase: Form Submitted -> Fires a trigger inside Shuffle workflow. If your standalone form can fire a trigger inside Workflow, we'll consider your assignment complete.

Assignment Link : https://github.com/GitHub-Octernships/Shuffle-Frontend-Developer-Software-Engineering

Go to Github Octernship assignment from where you applied for this..