Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Provide dialog component for displaying a component or microfrontend #488

Closed
danielwiehl opened this issue Aug 30, 2023 · 0 comments
Closed

Provide dialog component for displaying a component or microfrontend #488

danielwiehl opened this issue Aug 30, 2023 · 0 comments
Assignees
@k-genov
Labels
comp:microfrontend-platform comp: workbench comp:workbench-client feature
Projects
SCION
Milestone
2023-11

Comments

@danielwiehl
Copy link
Collaborator

danielwiehl commented Aug 30, 2023 •
edited

Is your feature request related to a problem? Please describe.

The workbench supports displaying content in a popup or message box but not in a dialog. A dialog differs from a popup in that it blocks its referer (or the entire application), is movable, and does not close when clicking outside its bounds. A message box is a specialization of a dialog. Unlike a dialog, the content and appearance of a message box are typically controlled by the message box opener.

Describe the solution you'd like

The workbench provides API for opening a component or microfrontend in a dialog.

General Requirements:

  • is either view-modal or application-modal;
  • can be moved (similar to the message box);
  • multiple dialogs are stacked (similar to the message box);
  • is centered in its modality context (similar to the message box);
  • provides a header to display a title (drag handle);
  • provides an optional area to display actions (button bar);
  • can be closed using the "X" in the upper right corner (if closable)
  • supports passing an input and returning an output
  • Sticks to the referring view (if view-modal)

Microfrontend-Related Requirements:

  • can be provided as a dialog capability to display a microfrontend;
  • title and size can be declared in the dialog capability (similar to popup capability);
  • URL is not persisted (similar to popup)
  • host can also provide a dialog capability (similar to popup capability);

Additional context

Consider refactoring the message box implementation based on the new dialog component.
@danielwiehl danielwiehl added this to the 2023-11 milestone Aug 30, 2023
@danielwiehl danielwiehl added this to Triage in SCION via automation Aug 30, 2023
@danielwiehl danielwiehl mentioned this issue Sep 7, 2023
Closed
@danielwiehl danielwiehl moved this from Triage to In Progress in SCION Oct 6, 2023
@k-genov k-genov mentioned this issue Nov 13, 2023
Merged
17 tasks
This was referenced Nov 23, 2023
Merged
Merged
@k-genov k-genov mentioned this issue Jan 18, 2024
Merged
17 tasks
@k-genov k-genov mentioned this issue Mar 8, 2024
Merged
17 tasks
danielwiehl pushed a commit that referenced this issue May 21, 2024
@k-genov @danielwiehl
feat(workbench-client/message-box): enable microfrontend display in a…
3c2a403 
… message box

A micro application can provide a microfrontend for display in a workbench message box. Message box microfrontends are contributed in the form of capabilities.

**Provide a microfrontend message box capability as follows:**

```json
{
  "type": "messagebox",
  "qualifier": {
    "confirmation": "unsaved-changes"
  },
  "params": [{"name": "changes", "required": true}],
  "properties": {
    "path": "path/to/message-box",
    "size": {"height": "200px", "width": "250px"}
  }
}
```

**Open a microfrontend message box capability as follows:**

```ts
inject(WorkbenchMessageBoxService).open({confirmation: 'unsaved-changes'}, {
  title: 'Unsaved Changes',
  params: {changes: ['change 1', 'change 2']},
  actions: {yes: 'Yes', no: 'No'},
});
```

Closes #488

BREAKING CHANGE: The signature of the `WorkbenchMessageBoxService#open` method has changed.

To migrate
- To display a text message, pass the message as the first argument, not via the `content` property in the options.
- To display a custom message box, pass the qualifier as the first argument and options, if any, as the second argument.

**Example migration to display a text message**
```ts
// Before Migration
inject(WorkbenchMessageBoxService).open({
  content: 'Do you want to continue?',
  actions: {yes: 'Yes', no: 'No'},
});

// After Migration
inject(WorkbenchMessageBoxService).open('Do you want to continue?', {
  actions: {yes: 'Yes', no: 'No'},
});
```

**Example migration to open a custom message box capability**

```ts
// Before Migration
inject(WorkbenchMessageBoxService).open({
    title: 'Unsaved Changes',
    params: {changes: ['change 1', 'change 2']},
    actions: {yes: 'Yes', no: 'No'},
  },
  {confirmation: 'unsaved-changes'},
);

// After Migration
inject(WorkbenchMessageBoxService).open({confirmation: 'unsaved-changes'}, {
  title: 'Unsaved Changes',
  params: {changes: ['change 1', 'change 2']},
  actions: {yes: 'Yes', no: 'No'},
});
```
@k-genov k-genov mentioned this issue May 21, 2024
Merged
17 tasks
danielwiehl pushed a commit that referenced this issue May 21, 2024
@k-genov @danielwiehl
feat(workbench-client/message-box): enable microfrontend display in a…
f575934 
… message box

A micro application can provide a microfrontend for display in a workbench message box. Message box microfrontends are contributed in the form of capabilities.

**Provide a microfrontend message box capability as follows:**
```json
{
  "type": "messagebox",
  "qualifier": {
    "confirmation": "unsaved-changes"
  },
  "params": [{"name": "changes", "required": true}],
  "properties": {
    "path": "path/to/message-box",
    "size": {"height": "200px", "width": "250px"}
  }
}
```

**Open a microfrontend message box capability as follows:**
```ts
inject(WorkbenchMessageBoxService).open({confirmation: 'unsaved-changes'}, {
  title: 'Unsaved Changes',
  params: {changes: ['change 1', 'change 2']},
  actions: {yes: 'Yes', no: 'No'},
});
```

Closes #488

BREAKING CHANGE: The signature of the `WorkbenchMessageBoxService#open` method has changed.

To migrate:
- To display a text message, pass the message as the first argument, not via the `content` property in the options.
- To display a custom message box, pass the qualifier as the first argument and options, if any, as the second argument.

**Example migration to display a text message**
```ts
// Before Migration
inject(WorkbenchMessageBoxService).open({
  content: 'Do you want to continue?',
  actions: {yes: 'Yes', no: 'No'},
});

// After Migration
inject(WorkbenchMessageBoxService).open('Do you want to continue?', {
  actions: {yes: 'Yes', no: 'No'},
});
```

**Example migration to open a custom message box capability**
```ts
// Before Migration
inject(WorkbenchMessageBoxService).open({
    title: 'Unsaved Changes',
    params: {changes: ['change 1', 'change 2']},
    actions: {yes: 'Yes', no: 'No'},
  },
  {confirmation: 'unsaved-changes'},
);

// After Migration
inject(WorkbenchMessageBoxService).open({confirmation: 'unsaved-changes'}, {
  title: 'Unsaved Changes',
  params: {changes: ['change 1', 'change 2']},
  actions: {yes: 'Yes', no: 'No'},
});
```
SCION automation moved this from In Progress to Done May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@k-genov k-genov

Labels
comp:microfrontend-platform comp: workbench comp:workbench-client feature
Projects
SCION
  
Done
Milestone
2023-11
Development

No branches or pull requests
2 participants
@danielwiehl @k-genov