-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
GDB-7785 Introduce share saved query action (#51)
* GDB-7785 Introduce share saved query action ## What This MR introduces support for sharing of saved query through a link. ## Why GDB workbench supports functionality for sharing of saved queries through a specially crafted link. ## How * Introduced a new action button for each saved query which opens a window with a field containing the share link. The copy link button writes the link into the clipboard and closes the dialog. * Implemented tests. * Make the share link field readonly in order to prevent modifications by the user.
- Loading branch information
1 parent
c7013d7
commit 41b56ea
Showing
20 changed files
with
642 additions
and
15 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import {YasqeSteps} from "../../steps/yasqe-steps"; | ||
| import {QueryStubs} from "../../stubs/query-stubs"; | ||
| import ActionsPageSteps from "../../steps/actions-page-steps"; | ||
|
|
||
| describe('Share saved query action', () => { | ||
| beforeEach(() => { | ||
| QueryStubs.stubDefaultQueryResponse(); | ||
| // Given I have opened a page with the yasgui | ||
| // And there is an open tab with sparql query in it | ||
| ActionsPageSteps.visit(); | ||
| }); | ||
|
|
||
| it('Should be able to get shareable link for any saved query', () => { | ||
| // Given I have opened the saved queries popup | ||
| YasqeSteps.showSavedQueries(); | ||
| YasqeSteps.getSavedQueriesPopup().should('be.visible'); | ||
| // When I click on share query button on a particular query | ||
| YasqeSteps.shareSavedQuery(0); | ||
| // Then I expect a dialog with the shareable link to appear | ||
| YasqeSteps.getShareSavedQueryDialog().should('be.visible'); | ||
| YasqeSteps.getShareSavedQueryDialogTitle().should('contain', 'Copy URL to clipboard'); | ||
| YasqeSteps.getShareSavedQueryLink().should('have.value', 'http://localhost:3333/pages/actions?savedQueryName=Add%20statements'); | ||
| // When I cancel operation | ||
| YasqeSteps.closeShareSavedQueryDialog(); | ||
| // Then I expect that the dialog should be closed | ||
| YasqeSteps.getShareSavedQueryDialog().should('not.exist'); | ||
| // When I click on share query button on a particular query | ||
| YasqeSteps.showSavedQueries(); | ||
| YasqeSteps.shareSavedQuery(0); | ||
| // And I click the copy button | ||
| YasqeSteps.copySavedQueryShareLink(); | ||
| // Then I expect that the share link is copied in the clipboard | ||
| YasqeSteps.getShareSavedQueryDialog().should('not.exist'); | ||
| ActionsPageSteps.getSaveQueryPayload().should('have.value', 'http://localhost:3333/pages/actions?savedQueryName=Add%20statements'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
...component/src/components/ontotext-dialog-web-component/ontotext-dialog-web-component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| @import 'src/css/common'; | ||
|
|
||
| :host { | ||
| display: block; | ||
| } | ||
|
|
||
| .dialog-overlay { | ||
| position: fixed; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| // Because the tooltip we use position itself on z-index: 9999 | ||
| z-index: 9998; | ||
| margin-left: -10px; | ||
| background-color: rgba(0, 0, 0, .5); | ||
| font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; | ||
| font-weight: 300; | ||
| color: #373a3c; | ||
| } | ||
|
|
||
| .dialog { | ||
| z-index: 1001; | ||
| width: 600px; | ||
| max-width: 600px; | ||
| background-color: #fff; | ||
| box-shadow: 0 5px 15px rgb(0 0 0 / 50%); | ||
| font-family: inherit; | ||
| font-weight: inherit; | ||
|
|
||
| .dialog-header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding: 15px; | ||
| border-bottom: 1px solid #e5e5e5; | ||
| font-size: 20px; | ||
|
|
||
| .dialog-title { | ||
| margin: .5rem 0; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .close-button { | ||
| background-color: #fff; | ||
| border: none; | ||
| outline: none; | ||
| cursor: pointer; | ||
| transition: all .15s ease-out; | ||
|
|
||
| &:hover, &:focus { | ||
| font-weight: bold; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .dialog-body { | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .dialog-footer { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| padding: 15px; | ||
| border-top: 1px solid #e5e5e5; | ||
|
|
||
| button { | ||
| display: inline-block; | ||
| font-weight: 400; | ||
| line-height: 1.25; | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| user-select: none; | ||
| border: 1px solid transparent; | ||
| outline: none; | ||
| padding: .5rem 1rem; | ||
| font-size: 1rem; | ||
| border-radius: 0; | ||
| transition: all .15s ease-out; | ||
| } | ||
|
|
||
| @include primaryButton; | ||
| @include secondaryButton; | ||
| } | ||
| } |
37 changes: 37 additions & 0 deletions
37
...-component/src/components/ontotext-dialog-web-component/ontotext-dialog-web-component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import {Component, h, Host, Prop} from '@stencil/core'; | ||
|
|
||
| export type DialogConfig = { | ||
| dialogTitle: string; | ||
| onClose: (evt: MouseEvent) => void; | ||
| } | ||
|
|
||
| @Component({ | ||
| tag: 'ontotext-dialog-web-component', | ||
| styleUrl: 'ontotext-dialog-web-component.scss', | ||
| shadow: false, | ||
| }) | ||
| export class OntotextDialogWebComponent { | ||
|
|
||
| @Prop() config: DialogConfig; | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host> | ||
| <div class="dialog-overlay" onClick={(evt) => this.config.onClose(evt)}> | ||
| <div class="dialog"> | ||
| <div class="dialog-header"> | ||
| <h3 class="dialog-title">{this.config.dialogTitle}</h3> | ||
| <button class="close-button icon-close" onClick={(evt) => this.config.onClose(evt)}></button> | ||
| </div> | ||
| <div class="dialog-body"> | ||
| <slot name="body" /> | ||
| </div> | ||
| <div class="dialog-footer"> | ||
| <slot name="footer" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
...ext-yasgui-web-component/src/components/ontotext-dialog-web-component/readme.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # ontotext-dialog-web-component | ||
|
|
||
|
|
||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | -------- | --------- | ----------- | -------------------------------------------------------------- | ----------- | | ||
| | `config` | -- | | `{ dialogTitle: string; onClose: (evt: MouseEvent) => void; }` | `undefined` | | ||
|
|
||
|
|
||
| ## Dependencies | ||
|
|
||
| ### Used by | ||
|
|
||
| - [share-saved-query-dialog](../share-saved-query-dialog) | ||
|
|
||
| ### Graph | ||
| ```mermaid | ||
| graph TD; | ||
| share-saved-query-dialog --> ontotext-dialog-web-component | ||
| style ontotext-dialog-web-component fill:#f9f,stroke:#333,stroke-width:4px | ||
| ``` | ||
|
|
||
| ---------------------------------------------- | ||
|
|
||
| *Built with [StencilJS](https://stenciljs.com/)* |
Oops, something went wrong.