Add functionality to the Modify button on My Demos page

[Caffetaria]

Description

The Modify button on My Demos page does not work.

Expected Behavior

On clicking the Modify button of a demo, the user should be redirected to the appropriate page where the the user can make changes to the content and specifications of that demo.

Actual Behavior

On clicking the Modify button of a demo, the user is not redirected to any page.

Steps to Reproduce the Problem

1. Navigate to the My Demos page.
2. Click on the Modify button.
3. Nothing happens on clicking the button.

Thanks!

[Caffetaria]

At present, using the available code on the page, I connected the button click action to the modal (relevant code snippets below):

                                  <button
                                    className="ui button"
                                    style={{
                                      color: "#323643",
                                      backgroundColor: "White"
                                    }}
                                    onClick={() =>
                                      this.toggleModifyDialog(
                                      )
                                    }
                                  >
                                    Modify
                                  </button>

and

        <Dialog
          title="Modify Application"
          open={this.state.showModifyModal}
          onRequestClose={this.toggleModifyDialog}
          contentStyle={{ width: "30%" }}
        >

This results in the modal window showing properly like so:

The following question remains:

• What action should result when the user clicks on 'Metadata', 'Input' or 'Output'?

[techytushar]

The popup you are seeing was used in the previous version of Origami. In this version, instead of the popup, the modify button should redirect the user to a page similar to the create demos page, but the input fields should be prefilled with the demo information. The submit button should be changed to save or modify.

To prefill the demo information you'll have to get the demo info from the database. The demo info is stored in the api_demo table.

[Caffetaria]

Do we need to get the demo information from the database? Because this information is already available in the state object and other React variables. For example, on the "My Demos" page, if I do:

       Modify <br/>
       UserID = {localStorage.user_id} <br/>
       DemoID = {demo.id}

I'm able to see the information related to the demo.

[vpn1997]

@Caffetaria sure you can use them.But i dont think you will have all the demo information like demo description , optional conifg in the local storage.You will have to query the backend for that.

[Caffetaria]

If we go to nonGHUserProfile.js and do a console.log like so:

          getDeployed(this.props.user.id)
            .then(alldeployedRepos => {
              let tmp = JSON.parse(alldeployedRepos);
              let allDeployed = [];
              while (tmp.length) {
                console.log(tmp.splice(0,3)); //my code
                allDeployed.push(tmp.splice(0, 3));
              }

we can see what appears to be all of the information created on the create demo page.

[Caffetaria]

So my current plan is to create a screen that allows the user to modify the above mentioned object. Then I will call on the function named 'updateNonGHDemoModel' in 'nonghDemoModelAction.js'. The 'updateNonGHDemoModel' expects a parameter called "newModelData" ... I'm guessing that this is a Javascript object.

Please let me know if this is a good direction to try.

[techytushar]

You would want to call the custom_demo_controller function to update the info in the database as well. This function is stored in the api/views.py file and can be called by using a PUT request at URL api/demo/[user_id]/[demo_id].

[aarushisoni]

Hi my name is Aarushi Soni . I want to contribute to this issue . Is this issue still open ? I am first time contributor . Please guide me through this process.