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

TASK-5666 - IVA Job Browser - Input parameters type object not displayed #896

Merged
merged 11 commits into from
Apr 10, 2024
Merged

TASK-5666 - IVA Job Browser - Input parameters type object not displayed #896

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0e6d484
Fix Job parameter disaplay
imedina Mar 11, 2024
320be3c
Merge branch 'release-2.12.x' into TASK-5666
imedina Apr 1, 2024
f43b7e4
Merge branch 'release-2.12.x' into TASK-5666
jmjuanes Apr 2, 2024
2f02dc2
pkg: remove unused dependencies #TASK-5666
jmjuanes Apr 3, 2024
0f80614
pkg: disable husky #TASK-5666
jmjuanes Apr 3, 2024
334c698
wc: add cypress tags to toolbar buttons #TASK-5666
jmjuanes Apr 3, 2024
8971696
test: fix job browser tests #TASK-5666
jmjuanes Apr 3, 2024
b33b67d
test: clean job-grid tests #TASK-5666
jmjuanes Apr 3, 2024
e2c9bd0
Merge branch 'release-2.12.x' into TASK-5666
jmjuanes Apr 10, 2024
95c2a5e
wc: add test attribute in job refresh button #TASK-5666
jmjuanes Apr 10, 2024
63299ca
test: fix job-browser tests #TASK-5666
jmjuanes Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .husky/.gitignore
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions .husky/pre-commit
View file
Open in desktop

This file was deleted.

122 changes: 36 additions & 86 deletions cypress/e2e/iva/job-browser-grid.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,88 +31,38 @@ context("Job Browser Grid", () => {

// TOOLBAR
context("Job Toolbar", () => {
const toolbarComponent = "";

beforeEach(() => {
cy.get(browserGrid)
.find(`div[data-cy="toolbar"]`)
.as("toolbar");
});

//1. Render the toolbar
context("render", () => {
// 1.1. It should render a div with the toolbar
it("should render toolbar", () => {
cy.get(browserGrid)
.find(`div[data-cy="toolbar-wrapper"]`)
.should("be.visible");
});
// 1.1. If configured, it should render a New button
it("should render New button", () => {
cy.get(browserGrid)
.find(`button[data-action="create"]`)
.should("be.visible");
});
it("should render toolbar", () => {
cy.get(browserGrid)
.find(`div[data-cy="toolbar-wrapper"]`)
.should("be.visible");
});
});

// MODAL CREATE
context("Modal Create", () => {
beforeEach(() => {
// eslint-disable-next-line cypress/unsafe-to-chain-command
it("should render Refresh button", () => {
cy.get(browserGrid)
.find(`button[data-action="create"]`)
.should("be.disabled");
.find(`button[data-cy="toolbar-btn-refresh"]`)
.should("be.visible");
});

it("should render Export button", () => {
cy.get(browserGrid)
.find(`div[data-cy="modal-create"]`)
.as("modal-create");
.find(`button[data-cy="toolbar-btn-export"]`)
.should("be.visible");
});

it("should render Settings button", () => {
cy.get(browserGrid)
.find(`button[data-cy="toolbar-btn-settings"]`)
.should("be.visible");
});
// 1. Open modal and render create
// it("should render create modal", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .find("div.modal-dialog")
// .should("be.visible");
// });
// 2. Render title
// it("should render create title", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .find("h4.modal-title")
// .should("contain.text", "Job Create");
// });
// 3. Render button clear
// it("should render button clear", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .contains('button', 'Clear')
// .should("be.visible");
// });
// 4. Render button create
// it("should render button create", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .contains('button', 'Create')
// .should("be.visible");
// });
// 5. Render tabs
// it("should render form tabs", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .find("ul.nav.nav-tabs > li")
// .should("have.length.at.least", 1);
// });
// 6. Render File ID
// it("should have form field ID", () => {
// // eslint-disable-next-line cypress/unsafe-to-chain-command
// cy.get("@modal-create")
// .find(`data-form div.form-horizontal div.row.form-group label.control-label`)
// .should("contain.text", "Job ID");
// });
});

context("Modal Setting", () => {

it("should move modal setting", () => {
cy.get("button[data-action='settings']")
.click();
Expand Down Expand Up @@ -204,27 +154,27 @@ context("Job Browser Grid", () => {
});
});

context("Row", () => {
it("should display row #3 as selected", () => {
// eslint-disable-next-line cypress/unsafe-to-chain-command
cy.get("tbody tr")
.eq(3)
.click()
.should("have.class","success");
});
context("Row", () => {
it("should display row #3 as selected", () => {
// eslint-disable-next-line cypress/unsafe-to-chain-command
cy.get("tbody tr")
.eq(3)
.click()
.should("have.class","success");
});

it("should download job Json", () => {
cy.get("tbody tr:first > td")
.eq(-2)
.within(() => {
cy.get("button")
.click();
cy.get("ul[class='dropdown-menu dropdown-menu-right']")
.contains("a","Download JSON")
.click();
});
it("should download job Json", () => {
cy.get("tbody tr:first > td")
.eq(-2)
.within(() => {
cy.get("button")
.click();
cy.get("ul[class='dropdown-menu dropdown-menu-right']")
.contains("a","Download JSON")
.click();
});
});
});

context("extension", () => {
it("should display 'Extra Column' column", () => {
Expand Down
3 changes: 0 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
"serve:build": "vite preview",
"clean": "rm -rf build",
"build": "npm run clean && rollup -c && npm run package",
"prepare": "husky install",
"test:open": "cypress open",
"test:prepare": "./prepare-test.sh",
"test:run": "cypress run --spec cypress/e2e/commons/data-form.cy.js,cypress/e2e/iva/**/*.cy.js",
Expand All @@ -43,7 +42,6 @@
"@polymer/polymer": "2.6.1",
"@svgdotjs/svg.js": "^3.0.16",
"@vaadin/router": "^1.7.2",
"@webcomponents/webcomponentsjs": "^1.1.0",
"animate.css": "^3.5.2",
"backbone": "~1.3.3",
"bootstrap": "3.3.6",
Expand Down Expand Up @@ -107,7 +105,6 @@
"grunt": "^1.4.0",
"grunt-shell": "^3.0.1",
"highlight.js": "^10.6.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"regenerator-runtime": "^0.13.3",
"rollup": "^2.56.3",
Expand Down
3 changes: 0 additions & 3 deletions src/sites/api/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,6 @@
<script src="{{ API_CONFIG_PATH }}/config.js"></script>
<script src="{{ API_CONFIG_PATH }}/pages.js"></script>

<script type="text/javascript"
src="../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

<script type="text/javascript" src="../../../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../../../node_modules/lodash/lodash.min.js"></script>
<script type="text/javascript" src="../../../node_modules/backbone/backbone-min.js"></script>
Expand Down
4 changes: 0 additions & 4 deletions src/sites/iva/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,6 @@

<script src="{{ IVA_CONFIG_PATH }}/pages.js"></script>

<!-- build:js[webcomponents/webcomponents-loader.js] -->
<script type="text/javascript" src="../../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- /build -->

<!-- build:js[assets/js/vendor.js] -->
<script type="text/javascript" src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../../node_modules/lodash/lodash.min.js"></script>
Expand Down
10 changes: 5 additions & 5 deletions src/webcomponents/commons/opencb-grid-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export default class OpencbGridToolbar extends LitElement {
`) : nothing}

${this._settings.showRefresh ? html`
<button type="button" class="btn btn-default btn-sm" @click="${() => LitUtils.dispatchCustomEvent(this, "refresh")}">
<button data-cy="toolbar-btn-refresh" type="button" class="btn btn-default btn-sm" @click="${() => LitUtils.dispatchCustomEvent(this, "refresh")}">
<i class="fas fa-sync-alt icon-padding"></i> Refresh
</button>
` :nothing}
Expand All @@ -163,12 +163,12 @@ export default class OpencbGridToolbar extends LitElement {
As a workaround, the tooltip will be displayed from a wrapper -->
${isCreateDisabled ? html `
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="${isCreateDisabledTooltip}">
<button data-action="create" type="button" class="btn btn-default btn-sm" disabled>
<button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-default btn-sm" disabled>
<i class="fas fa-file icon-padding" aria-hidden="true"></i> New ...
</button>
</span>
` : html `
<button data-action="create" type="button" class="btn btn-default btn-sm"
<button data-cy="toolbar-btn-create" data-action="create" type="button" class="btn btn-default btn-sm"
@click="${this.onActionClick}">
${this._settings?.downloading === true ? html`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>` : null}
<i class="fas fa-file icon-padding" aria-hidden="true"></i> New ...
Expand All @@ -179,7 +179,7 @@ export default class OpencbGridToolbar extends LitElement {

${this._settings.showExport ? html`
<div class="btn-group">
<button data-action="export" type="button" class="btn btn-default btn-sm" @click="${this.onActionClick}">
<button data-cy="toolbar-btn-export" data-action="export" type="button" class="btn btn-default btn-sm" @click="${this.onActionClick}">
${this._settings?.downloading === true ? html`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>` : null}
<i class="fas fa-download icon-padding" aria-hidden="true"></i> Export ...
</button>
Expand All @@ -188,7 +188,7 @@ export default class OpencbGridToolbar extends LitElement {

${this._settings?.showSettings ? html`
<div class="btn-group">
<button data-action="settings" type="button" class="btn btn-default btn-sm" @click="${this.onActionClick}">
<button data-cy="toolbar-btn-settings" data-action="settings" type="button" class="btn btn-default btn-sm" @click="${this.onActionClick}">
<i class="fas fa-cog icon-padding"></i> Settings ...
</button>
</div>
Expand Down
93 changes: 51 additions & 42 deletions src/webcomponents/job/job-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default class JobGrid extends LitElement {
}

propertyObserver() {
// With each property change we must updated config and create the columns again. No extra checks are needed.
// With each property change we must update config and create the columns again. No extra checks are needed.
this._config = {
...this.getDefaultConfig(),
...this.config,
Expand All @@ -107,21 +107,21 @@ export default class JobGrid extends LitElement {
toolId: this.toolId,
resource: "JOB",
columns: this._getDefaultColumns(),
create: {
display: {
modalTitle: "Job Create",
modalDraggable: true,
disabled: true,
disabledTooltip: "This operation will be implemented soon. Thanks for your patience.",
modalCyDataName: "modal-create",
},
render: () => html `
<job-create
.displayConfig="${{mode: "page", type: "tabs", buttonsLayout: "upper"}}"
.opencgaSession="${this.opencgaSession}">
</job-create>`
},
// Uncomment in case we need to change defaults
// create: {
// display: {
// modalTitle: "Job Create",
// modalDraggable: true,
// disabled: true,
// disabledTooltip: "This operation will be implemented soon. Thanks for your patience.",
// modalCyDataName: "modal-create",
// },
// render: () => html `
// <job-create
// .displayConfig="${{mode: "page", type: "tabs", buttonsLayout: "upper"}}"
// .opencgaSession="${this.opencgaSession}">
// </job-create>`
// },
// export: {
// display: {
// modalTitle: "Job Export",
Expand Down Expand Up @@ -443,25 +443,46 @@ export default class JobGrid extends LitElement {
if (UtilsNew.isNotEmpty(params)) {
html = "<div>";
for (const key of Object.keys(params)) {
let nestedObject = "";
if (typeof params[key] === "object") {
for (const subKey of Object.keys(params[key])) {
nestedObject += `
<div style="white-space: nowrap">
<span style="margin: 2px 0; font-weight: bold">${subKey}:</span> ${params[key][subKey]}
html += `<div style="margin: 2px 0; white-space: nowrap">`;
// 1. Normal parameter
if (typeof params[key] !== "object") {
if (params[key].length > 100) {
html += `
<span title="${params[key]}" style="margin: 2px 0; font-weight: bold">${key}:</span> <span title="${params[key]}">${params[key].substring(0, 100) + "..." || "true"}</span>
`;
} else {
html += `
<span style="margin: 2px 0; font-weight: bold">${key}:</span> ${params[key] || "true"}
`;
}
} else {
// 2. This parameter is an Object, we need to loop its internal subparams.
let nestedObject = "";
// 2.1 It can contain some subparams, or ...
if (UtilsNew.isNotEmpty(params[key])) {
for (const subKey of Object.keys(params[key])) {
nestedObject += `
<div style="margin: 2px 0">
<span style="margin: 2px 0; font-weight: bold">${subKey}:</span> ${params[key][subKey]}
</div>
`;
}
html += `
<div>
<span style="margin: 2px 0; font-weight: bold">${key}:</span>
</div>
<div style="padding-left: 10px">
${nestedObject}
</div>
`;
} else {
// 2.2 ... it can be an empty object.
html += `
<span style="margin: 2px 0; font-weight: bold">${key}:</span><spam style="font-style: italic">none</spam>
`;
}
}
html += `
<div style="white-space: nowrap">
${nestedObject ? `
<div><span style="margin: 2px 0; font-weight: bold">${key}:</span></div>
<div style="padding-left: 10px">
${nestedObject}
</div>` :
`<span style="margin: 2px 0; font-weight: bold">${key}:</span> ${params[key]}`}
</div>`;
html += "</div>";
}
html += "</div>";
}
Expand Down Expand Up @@ -630,18 +651,6 @@ export default class JobGrid extends LitElement {
});
}

getRightToolbar() {
return [
{
render: () => html`
<button type="button" class="btn btn-default btn-sm" @click="${() => this.table.bootstrapTable("refresh")}">
<i class="fas fa-sync-alt icon-padding"></i> Refresh
</button>
`,
}
];
}

render() {
return html`
${this._config.showToolbar ? html`
Expand Down
Loading