Skip to content

SS-1204 Improved styling of forms, navbar, public apps page #278

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

Merged
hamzaimran08 merged 13 commits into from
Feb 19, 2025
Merged

SS-1204 Improved styling of forms, navbar, public apps page #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
28e48c9
change app cancel button css class
hamzaimran08 Feb 16, 2025
b80205d
change css class for cancel button in password change
hamzaimran08 Feb 16, 2025
2a6cd24
restructured user profile page
hamzaimran08 Feb 16, 2025
b12eedc
restructured profile edit page
hamzaimran08 Feb 16, 2025
47f2083
added footer to app templates
hamzaimran08 Feb 16, 2025
297ac69
added css for nav, tables, colors and responsiveness
hamzaimran08 Feb 16, 2025
1e708be
added separator and highlighting to navbar
hamzaimran08 Feb 16, 2025
df6e840
enhanced app cards and public apps page
hamzaimran08 Feb 16, 2025
a8a26c9
rounded borders for app instances table
hamzaimran08 Feb 16, 2025
4a3ad88
fixed cancel and app card button colors
hamzaimran08 Feb 17, 2025
f9dab32
removed app instances table changes
hamzaimran08 Feb 18, 2025
594a2dd
Merge branch 'develop' into SS-1204-harmonize-frontend
hamzaimran08 Feb 18, 2025
08fad73
update e2e tests
hamzaimran08 Feb 18, 2025
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
9 changes: 7 additions & 2 deletions apps/forms/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,14 @@ def _setup_form_fields(self):
def _setup_form_helper(self):
# Create a footer for submit form or cancel
self.footer = Div(
Button("cancel", "Cancel", css_class="btn-danger", onclick="window.history.back()"),
Button(
"cancel",
"Cancel",
css_class="btn-outline-dark btn-outline-cancel me-2",
onclick="window.history.back()",
),
Submit("submit", "Submit"),
css_class="card-footer d-flex justify-content-between",
css_class="card-footer d-flex justify-content-end",
)
self.helper = FormHelper(self)
self.helper.form_method = "post"
Expand Down
9 changes: 7 additions & 2 deletions apps/forms/filemanager.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,14 @@ def _setup_form_helper(self):
super()._setup_form_helper()

self.footer = Div(
Button("cancel", "Cancel", css_class="btn-danger", onclick="window.history.back()"),
Button(
"cancel",
"Cancel",
css_class="btn-outline-dark btn-outline-cancel me-2",
onclick="window.history.back()",
),
Submit("submit", "Activate", css_class="btn-profile text-dark"),
css_class="card-footer d-flex justify-content-between",
css_class="card-footer d-flex justify-content-end",
)
body = Div(
Div(
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/ui-tests/test-brute-force-login-attempts.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe("Test brute force login attempts are blocked", () => {
cy.get('button.btn-profile').click()
cy.get('li.btn-group').find('a').contains("My profile").click()
cy.url().should("include", "user/profile/")
cy.get('div.col-8').should("contain", users.brute_force_login_user.email)
cy.get('#id_email').should("contain.value", users.brute_force_login_user.email)

// Sign out before logging in again
cy.logf("Sign out before logging in again", Cypress.currentTest)
Expand Down
46 changes: 23 additions & 23 deletions cypress/e2e/ui-tests/test-deploy-app.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ describe("Test deploying app", () => {

// Create an app with project permissions
cy.logf("Now creating a project app", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name_project)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Project')
Expand All @@ -111,7 +111,7 @@ describe("Test deploying app", () => {
.and('include', default_url_subpath);
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name_project).should('not.exist')

// make this app public as an update and check that it works
Expand All @@ -138,7 +138,7 @@ describe("Test deploying app", () => {

// Create a public app and verify that it is displayed on the public apps page
cy.logf("Now creating a public app", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name_public)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -269,7 +269,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit("/apps")
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name_public_2).should('not.exist')

} else {
Expand All @@ -294,7 +294,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a shiny app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -342,7 +342,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit("/apps")
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -369,7 +369,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a dash app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -411,7 +411,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -434,7 +434,7 @@ describe("Test deploying app", () => {
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()

cy.logf("Creating a tisuumaps app", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -469,7 +469,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -494,7 +494,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a gradio app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -532,7 +532,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -557,7 +557,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a streamlit app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -595,7 +595,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -621,7 +621,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a dash app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -681,7 +681,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name_edited).should('not.exist')

} else {
Expand All @@ -707,7 +707,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a dash app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -778,7 +778,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand All @@ -803,7 +803,7 @@ describe("Test deploying app", () => {
cy.logf("Creating a dash app", Cypress.currentTest)
cy.visit("/projects/")
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Public')
Expand Down Expand Up @@ -860,7 +860,7 @@ describe("Test deploying app", () => {
// check that the app is not visible under public apps
cy.visit('/apps/')
cy.get("title").should("have.text", "Apps and models | SciLifeLab Serve (beta)")
cy.get('h3').should('contain', 'Public applications and models')
cy.get('h3').should('contain', 'Public Applications & Models')
cy.contains('h5.card-title', app_name).should('not.exist')

} else {
Expand Down Expand Up @@ -894,7 +894,7 @@ describe("Test deploying app", () => {
cy.contains('.card-title', project_name).parents('.card-body').siblings('.card-footer').find('a:contains("Open")').first().click()
// Create an app and set a custom subdomain for it
cy.logf("Now creating an app with a custom subdomain", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
// fill out other fields
cy.get('#id_name').clear().type(app_name)
cy.get('#id_description').clear().type(app_description)
Expand All @@ -912,7 +912,7 @@ describe("Test deploying app", () => {

// Try using the same subdomain the second time
cy.logf("Now trying to create an app with an already taken subdomain", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()

cy.get('#id_name').clear().type(app_name_2)
cy.get('#id_port').clear().type("8501")
Expand Down Expand Up @@ -976,7 +976,7 @@ describe("Test deploying app", () => {

// Create an app with project permissions
cy.logf("Now creating an app with a non-existent image reference - expecting Image Error", Cypress.currentTest)
cy.get('div.card-body:contains("' + app_type + '")').find('a:contains("Create")').click()
cy.get('div.card-body:contains("' + app_type + '")').siblings('.card-footer').find('a:contains("Create")').click()
cy.get('#id_name').type(app_name_statuses)
cy.get('#id_description').type(app_description)
cy.get('#id_access').select('Project')
Expand Down
10 changes: 5 additions & 5 deletions cypress/e2e/ui-tests/test-login-account-handling.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe("Test login, profile page view, password change, password reset", () =>
cy.get('li.btn-group').find('a').contains("My profile").click()
cy.url().should("include", "user/profile/")

cy.get('div.col-8').should("contain", users.login_user.email)
cy.get('#id_email').should("contain.value", users.login_user.email)
})

it("can edit user profile information", () => {
Expand All @@ -71,9 +71,9 @@ describe("Test login, profile page view, password change, password reset", () =>
cy.get('#id_department').clear().type(department);
cy.get('#submit-id-save').click();

cy.contains(firstName).should('exist');
cy.contains(lastName).should('exist');
cy.contains(department).should('exist');
cy.get('#id_first_name').should("contain.value", firstName);
cy.get('#id_last_name').should("contain.value", lastName);
cy.get('#id_department').should("contain.value", department);
}


Expand All @@ -89,7 +89,7 @@ describe("Test login, profile page view, password change, password reset", () =>
cy.visit("/")
cy.get('button.btn-profile').click()
cy.get('li.btn-group').find('a').contains("My profile").click()
cy.get('button.btn-profile').contains('a', 'Edit').click();
cy.get('button.btn-primary').contains('Edit').click();
editProfile('changing first name again', 'changing last name again', 'changing department name again');
})

Expand Down
Loading
Loading