Unsaved changes modal #252

parostatkiem-zz · 2018-11-27T15:08:03Z

This change definitely needs a backdrop support which should be provided with #352.
I left some comments with my suggestions about how Core's backdrop can be handled.

Changes proposed in this pull request:

Create new component called ConfirmationModal
Handle the modal showing and hiding in App.js and return a promise with the result
Trigger the modal in routing.js::handleRouteChange() if current page is dirty, then wait for result

Related issue(s)

Resolves #210

‼️ IMPORTANT ‼️

Don't forget to swap your Console repo to the branch from this PR:

…nsaved-changes-modal # Conflicts: # core/src/services/routing.js

…nsaved-changes-modal

…nsaved-changes-modal # Conflicts: # core/src/services/routing.js

…odal

pekura · 2018-12-13T15:47:05Z

It does not work properly in preserveView/goBack scenario: when you are on a page where there is a go back possibility with preserved view and you try to go back using linkManager().goBack() and the current page is dirty the content goes back to the preserved view, the URL stays the same, and the unsaved changes modal pops up. Independent of what you choose (Yes or No) the situation won't get better.

pekura · 2018-12-13T15:52:41Z

Don't we want to have a backdrop for the unsaved changes modal?

jesusreal · 2018-12-14T08:52:01Z

Don't we want to have a backdrop for the unsaved changes modal?

Good point. This was not requested as part of this ticket, if needed I would do it in a separate task.

jesusreal · 2018-12-14T12:29:03Z

It does not work properly in preserveView/goBack scenario: when you are on a page where there is a go back possibility with preserved view and you try to go back using linkManager().goBack() and the current page is dirty the content goes back to the preserved view, the URL stays the same, and the unsaved changes modal pops up. Independent of what you choose (Yes or No) the situation won't get better.

done

jesusreal · 2018-12-14T12:29:14Z

Don't we want to have a backdrop for the unsaved changes modal?

Good point. This was not requested as part of this ticket, if needed I would do it in a separate task.

done

…th other tasks in progress

…mponent

…hanges-modal # Conflicts: # core/src/App.html # core/src/Authorization.html # core/src/navigation/LeftNav.html # core/src/navigation/TopNav.html # core/src/services/routing.js # core/src/utilities/helpers/generic-helpers.js

kazydek · 2018-12-18T08:47:17Z

docs/luigi-client-api.md


 ### navigate

-Navigates to the given path in the hosting Luigi application. Contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is a standard navigation.
+Navigates to the given path in application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.


Suggested change

Navigates to the given path in application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.

Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.

kazydek · 2018-12-18T08:49:01Z

docs/luigi-client-api.md

 LuigiClient.linkManager.fromContext("currentTeam").withParams({foo: "bar"}).navigate("path")
 ```

 Returns **[linkManager](#linkmanager)** link manager instance.

 ### pathExists

-Checks if a path you can navigate to exists in the main application. You can use this helper method to perform actions such as conditional display of a DOM element like a button.
+Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally display a DOM element like a button.


Suggested change

Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally display a DOM element like a button.

Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.

kazydek · 2018-12-18T08:52:21Z

docs/luigi-client-api.md

+
+### setDirtyStatus
+
+Makes current page dirty or not


Suggested change

Makes current page dirty or not

Makes the current page dirty or not.

Could you explain in more details what is meant in this sentence? As for the periods at the end of the sentence and starting it with the verb without a subject I am against but added it here to keep the consistency in the whole text as I can see the rest starts and end similarly.

This method informs the main application that the current page or component in the iframe is dirty, which means it has unsaved changes, like for example a page with form fields which has been modified from their original values.

kazydek · 2018-12-18T08:56:06Z

docs/luigi-client-api.md

+
+#### Parameters
+
+-   `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if current page/component has any unsaved changes at the moment


Suggested change

- `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if current page/component has any unsaved changes at the moment

- `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if the current page or component has any unsaved changes

kazydek · 2018-12-18T10:49:40Z

docs/luigi-client-api.md

+
+### setDirtyStatus
+
+This method informs the main application that the current view in the iframe has unsaved changes, like for example a view with form fields which have been edited but not yet submitted.


Suggested change

This method informs the main application that the current view in the iframe has unsaved changes, like for example a view with form fields which have been edited but not yet submitted.

This method informs the main application that there are unsaved changes in the current view in the iframe. For example, that can be a view with form fields which were edited but not submitted.

kazydek · 2018-12-18T11:28:04Z

docs/luigi-client-api.md

+
+#### Parameters
+
+-   `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if the current page or component has any unsaved changes at the moment


Suggested change

- `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if the current page or component has any unsaved changes at the moment

- `isDirty` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** tells if there are any unsaved changes on the current page or component

parostatkiem-zz added 12 commits November 22, 2018 13:39

Modal interaction works

6656a2b

Merge branch 'master' of https://github.com/kyma-project/luigi into U…

ccc8157

…nsaved-changes-modal # Conflicts: # core/src/services/routing.js

Implement the prompt

a0c8f0e

Improve code & add comments

38afc97

Add support for custom title and text

6670654

Fix obsolete import

6b83b17

Merge branch 'master' of https://github.com/kyma-project/luigi into U…

259a587

…nsaved-changes-modal

Handle potential errors

19146ee

Add unit test

eb1a472

Add demo to Angular example & add e2e tests

0f1f65e

Update comment in e2e

6c91d1d

Undo temporary change

d7b3b8b

parostatkiem-zz added enhancement New feature or request area/luigi labels Nov 27, 2018

parostatkiem-zz requested review from antiheld, dariadomagala-sap, hardl, jesusreal, kwiatekus, maxmarkus, pekura and y-kkamil as code owners November 27, 2018 15:08

parostatkiem-zz added 2 commits November 28, 2018 10:44

Merge branch 'master' of https://github.com/kyma-project/luigi into U…

1686dae

…nsaved-changes-modal

Merge branch 'master' of https://github.com/kyma-project/luigi into U…

ae77b09

…nsaved-changes-modal

jesusreal self-assigned this Nov 29, 2018

jesusreal and others added 4 commits November 29, 2018 10:14

Merge branch 'master' into Unsaved-changes-modal

242c90f

Remove unnecessary css imports

87d0060

Merge branch 'master' of https://github.com/kyma-project/luigi into U…

84fc378

…nsaved-changes-modal # Conflicts: # core/src/services/routing.js

Add missing dependency

22779f3

pekura self-assigned this Nov 30, 2018

maxmarkus removed the WIP Work in progress label Dec 13, 2018

Merge remote-tracking branch 'upstream/master' into Unsaved-changes-m…

2446b8f

…odal

jesusreal added 2 commits December 14, 2018 13:27

Support unsaved changes modal for preserved views

7e658c8

Add backdrop to unsaved changes modal

cb010e2

jesusreal added 2 commits December 14, 2018 15:54

Refactor by removing inside app navigation handler

8ee233c

Undo unimportant cosmetic changes to avoid massive merge conflicts wi…

ba7cd48

…th other tasks in progress

pekura approved these changes Dec 14, 2018

View reviewed changes

jesusreal added 4 commits December 14, 2018 17:37

Merge branch 'master' into Unsaved-changes-modal

2022b6d

Add unsaved modal changes support and pointer cursor to logo title co…

efd78e1

…mponent

Fix e2e tests

2bd5f2e

kazydek reviewed Dec 18, 2018

View reviewed changes

small improvement in luigi client docu

5cb0ebb

kazydek reviewed Dec 18, 2018

View reviewed changes

More docu changes

a82ae71

kazydek reviewed Dec 18, 2018

View reviewed changes

improve docu for text added on last commit

e128b07

kazydek reviewed Dec 18, 2018

View reviewed changes

kazydek approved these changes Dec 18, 2018

View reviewed changes

Update description for isDirty parameter

7d7cdf4

jesusreal merged commit 778e691 into SAP:master Dec 18, 2018

parostatkiem-zz deleted the Unsaved-changes-modal branch February 5, 2019 08:29

stanleychh pushed a commit to stanleychh/luigi that referenced this pull request Dec 30, 2021

Unsaved changes modal (SAP#252)

c312ff2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unsaved changes modal #252

Unsaved changes modal #252

parostatkiem-zz commented Nov 27, 2018 •

edited

Loading

pekura commented Dec 13, 2018

pekura commented Dec 13, 2018

jesusreal commented Dec 14, 2018

jesusreal commented Dec 14, 2018

jesusreal commented Dec 14, 2018

kazydek Dec 18, 2018

jesusreal Dec 18, 2018

kazydek Dec 18, 2018

jesusreal Dec 18, 2018

kazydek Dec 18, 2018 •

edited

Loading

kazydek Dec 18, 2018

jesusreal Dec 18, 2018 •

edited

Loading

jesusreal Dec 18, 2018

kazydek Dec 18, 2018 •

edited

Loading

jesusreal Dec 18, 2018

kazydek Dec 18, 2018

jesusreal Dec 18, 2018

kazydek Dec 18, 2018

	Navigates to the given path in application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.
	Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.

	Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally display a DOM element like a button.
	Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.

	Makes current page dirty or not
	Makes the current page dirty or not.


		#### Parameters

		- `isDirty` [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) tells if current page/component has any unsaved changes at the moment


		### setDirtyStatus

		This method informs the main application that the current view in the iframe has unsaved changes, like for example a view with form fields which have been edited but not yet submitted.

Unsaved changes modal #252

Unsaved changes modal #252

Conversation

parostatkiem-zz commented Nov 27, 2018 • edited Loading

‼️ IMPORTANT ‼️

pekura commented Dec 13, 2018

pekura commented Dec 13, 2018

jesusreal commented Dec 14, 2018

jesusreal commented Dec 14, 2018

jesusreal commented Dec 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kazydek Dec 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jesusreal Dec 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kazydek Dec 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parostatkiem-zz commented Nov 27, 2018 •

edited

Loading

kazydek Dec 18, 2018 •

edited

Loading

jesusreal Dec 18, 2018 •

edited

Loading

kazydek Dec 18, 2018 •

edited

Loading