open-vault/ui/app/styles/core/toggle.scss
Angel Garbarino 59e83e2e6d
UI Database Secrets Engine (MongoDB) (#10655)
* move the ttls on enable for db to default and not as options

* refactor form field to angle brackets

* add database to supported backend

* initial setup of components and models

* setup selectable cards, need to make own component

* styling setup

* subtext and links

* number styling

* search select put in place and button, all pretty things

* search label text

* messy but closer to data configuration. making models and fetching those models on routes

* connection adapter and serializer that is pulled in by the overview route

* clean up and add new model params connections and roles to overview route hbs

* setting up overview as route with SecretHeader component.  TODO, show Overview tab, but have link to route.  It's going be on the secret header list component

* setup overview tab on secret-list-header to go to overview page

* setup id in overview route

* Correct link on secrets engine list for database and others

* Roles tab on database fetches correct model

* Update options for backend with hasOverview param so overview tab is rendered conditionally on secret list header

* create new getCrendentialsComponent

* Rename database connection parent component and start working on display

* setup routing to credentials route for database from overview page

* setup network request for the credentials of role

* setup serializer for credentials

* redirect previous route

* fix border color on button disable

* add margin to back button

* change to glimmer component

* glimmerize and clean up the get-credentials-card

* Begin database connection show and create form

* add component test for the get-credentials-card

* Database connection model and field groups

* add static roles to searhSelect

* add staticRoles on overview page

* Toolbar and tabs on database connection show view looks correct

* combine static and dynamic role models for pagination

* Update database-list-item with real link to connection

* Add support for optionalText edit type on form-field

* handle situation when no static and/or dynamic roles

* turn partial into component so can handle computed and eventually click actions, similar to transform

* glimmerize database-list-item

* use lazy capabilities on list role and static-role actions

* Create connection works and redirects to show page

* creds request based on dynamic or static and unload the store by record creds when they transition away.

* dynamcially add in backend for queries

* fixes on overview page for get credentials with hardcoded backend and layout for static creds

* Rotate and Reset connection actions working on connection

* get credentials set the query params

* setup async for handling permission errors on overivew

* Move query logic to store for getting both types of role

* Filtering works on combined role models

* cleanup

* Fix no meta on connections list

* better handle the situation where you don't have access to list roles but do to generate

* implment updated empty state component and add to credentials page when roleType is noRoleType

* glimmerize the input search component

* move logic for generate credentials urlto the generate creds component

* remove query param for role type

* handle permissions on the overview page

* permissions for role list

* New roles route for backends

* handle different permissions for empty return on 404 vs 403 on overview page

* fix links on overview page

* Connetions WIP

* setup lazy caps for the connections model and list

* add computed to role and static role models to clean up permissions

* setup actions for connections list

* Update form-field to show password type and update json input to angle bracket syntax with optional theme option

* setup capabilities on overview for empty state

* fix hardcoded on the backend

* toggle inner label has width 100%

* Add custom update password togglable input on database connection edit form, and only submit defined attrs

* Add updateRecord to connection adapter

* glimmerize secret list header and make new component which either shows or does not show the tab based on permissions

* Remove tabs on show connection

* add peek record

* Update database role to get both models on a single model, remove static-role model and adapter, remove roles route

* fix creds permissions on database-list-item

* add component info and rename for secret-list-header-tab

* fix issues on overview page

* Add path to individual role on serializer

* add accetpance test for testing the engine

* fix transform test

* test fix

* Update connection before role created, disable button with tooltip if user cannot update path

* Add add-to-array and remove-from-array helpers with tests

* Clean up connection update on delete or create role, cleanup logs, role create link works

* Database role create and edit forms with readonly fields and validation. Add readonly-form-field

* Add field div around ttl picker for correct spacing on form-field

* fix the breadcrumbs

* PLaceholder test for readonly form field

* create new helper to format time duration

* tooltip and formatting on static role

* more on static roles time stuff

* clean up

* clean up

* fixes on the test and addition of another helper test

* fix secrets machine test

* Add modal to connection creation flow

* fix issue with readonly form field test

* Add is-empty-object helper and tests

* Role error handling

* Remove Atlas option from connection list, add defaults to db role form

* clean up stuff though might have made it uglier

* clean up

* Add capabilities checks on connection actions

* Fix jsdocs on readonly-form-field

* Fix json editor height on form field

* Readonly form has notallowed cursor, readonly form field updates

* Add blank field rendering to info-table-row

* Start writing readonly form field tests

* Address some PR comments

* fix fallback action on search select

* cleanup per comments

* fix readonly form field test and lint

* Cleanup string helpers

* Replace renderBlank with alwaysRender logic

* re-humanize label on readonly form field

* Show defaultShown value on info-table-row if no value and always render

* Show default on role and connection show table

* Add changelog

Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>
2021-02-18 10:36:31 -06:00

107 lines
2.1 KiB
SCSS

/* COPIED FROM BULMA/SWITCH */
.toggle[type='checkbox'] {
outline: 0;
user-select: none;
position: absolute;
margin-bottom: 0;
opacity: 0;
left: 0;
}
.toggle[type='checkbox'][disabled] {
cursor: not-allowed;
}
.toggle[type='checkbox'][disabled] + label {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::before {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label::after {
opacity: 0.5;
}
.toggle[type='checkbox'][disabled] + label:hover {
cursor: not-allowed;
}
.toggle[type='checkbox'] + label {
position: relative;
display: inline-block;
padding-left: 3.5rem;
cursor: pointer;
}
.toggle[type='checkbox'] + label::before {
position: absolute;
display: block;
top: 0;
left: 0;
width: 3rem;
height: 1.5rem;
border: 0.1rem solid transparent;
border-radius: 0.75rem;
background: $ui-gray-300;
content: '';
}
.toggle[type='checkbox'] + label::after {
display: block;
position: absolute;
top: 0.25rem;
left: 0.25rem;
width: 1rem;
height: 1rem;
transform: translate3d(0, 0, 0);
border-radius: 50%;
background: white;
transition: all 0.25s ease-out;
content: '';
}
.toggle[type='checkbox']:checked + label::before {
background: $ui-gray-700;
}
.toggle[type='checkbox']:checked + label::after {
left: 1.625rem;
}
/* CUSTOM */
.toggle[type='checkbox'] {
&.is-small {
+ label {
font-size: $size-7;
padding-left: $size-8 * 2.5;
margin: 0 0.25rem;
&::before {
top: $size-8 / 5;
height: $size-8;
width: $size-8 * 2;
}
&::after {
width: $size-8 * 0.8;
height: $size-8 * 0.8;
transform: translateX(0.15rem);
left: 0;
top: $size-8/ 4;
}
}
&:checked + label::after {
left: 0;
transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
}
}
&.is-large {
width: 4.5rem;
height: 2.25rem;
}
}
.toggle[type='checkbox'].is-small + label::after {
will-change: left;
}
.toggle[type='checkbox']:focus + label {
box-shadow: 0 0 1px $blue;
}
.toggle[type='checkbox'].is-success:checked + label::before {
background: $blue;
}
.toggle-label {
width: 100%;
}