diff --git a/imports/ui/components/externalApplications/component.html b/imports/ui/components/externalApplications/component.html index 030df14a..4a12b6b3 100644 --- a/imports/ui/components/externalApplications/component.html +++ b/imports/ui/components/externalApplications/component.html @@ -24,110 +24,130 @@

External applications
-
- - - - - - - - - - - - {{#unless externalApps}} - - - - - - - + +
+ +
+
+
Name
+
URL
+
Name Match(regex)
+
Kind Match(regex)
+
Action
+
+
+ {{#unless externalApps}} + {{#unless showNewAppRow}} +
+
No applications have been defined
+
{{/unless}} - {{#each app in externalApps}} - {{#if editMode app.name }} -
- - - - - - - {{else}} - - - - - - - - {{/if}} - {{/each}} - - {{#if showNewAppRow }} - - - - - - - + +
+
Name Match(regex)
+ +
+
+
Kind Match(regex)
+ +
+
+
Action
+ + +
+ + {{else}} +
+
+
Name
+
{{app.name}}
+
+
+
URL
+
{{app.url}}
+
+
+
Name Match(regex)
+
{{app.nameMatch}}
+
+
+
Kind Match(regex)
+
{{app.kindMatch}}
+
+
+
Action
+ + +
+
{{/if}} - -
NameURLName Match (regex)Kind Match (regex)Action
No applications have been definedhttps://company.example.com/{{|kind}}/{{|metadata.labels.app}}my-resourceDeployment
- -
Please enter a unique name
- 		- -
Please enter a url
- 		- - - - - - -
{{app.name}}{{app.url}}{{app.nameMatch}}{{app.kindMatch}} - - -
- + {{/unless}} + {{#each app in externalApps}} + {{#if editMode app.name }} +
+
+
Name
+
Please enter a unique name
-
- + +
+
URL
+
Please enter a url
-
- - - - - - -
+ {{/each}} + {{#if showNewAppRow }} +
+
+
Name
+ +
Please enter a unique name
+
+
+
URL
+ +
Please enter a url
+
+
+
Name Match(regex)
+ +
+
+
Kind Match(regex)
+ +
+
+
Action
+ + +
+
+ {{/if}}
-
- -
+ {{#unless showNewAppRow}} +
+ +
+ {{/unless}}
diff --git a/imports/ui/components/externalApplications/component.scss b/imports/ui/components/externalApplications/component.scss index 7696b211..c8321b2c 100644 --- a/imports/ui/components/externalApplications/component.scss +++ b/imports/ui/components/externalApplications/component.scss @@ -1,8 +1,65 @@ -.cursor-pointer { + +$grey:#ced4da; + +.app-edit { + min-height: 37px; cursor: pointer; + overflow-x: scroll; +} +#app-table .container-fluid { + padding-left: 0px; +} +.app-item { + line-height: 2.5; + margin-bottom: 2px; + &:hover { + background-color: rgba(0,0,0,.075); + } +} +.app-item-edit { + margin-bottom: 2px; +} +.row-header { + line-height: 2.1; + border-bottom: solid 1px $grey; + border-top: solid 1px $grey; + font-weight: 600; + margin-bottom: 8px; +} +.row-header-sm { + border: none; + font-weight: 600; } -// prevents the left border from being cut off when the input field is focused -td.app-edit:focus { - outline-offset: -5px; +@media (max-width: 991px) { + .app-item { + line-height: 3.5; + &:hover { + background-color: inherit; + } + } + .app-item-new { + line-height: 3.5; + } + .action-col { + border-bottom: solid 1px $grey; + padding-bottom: 10px; + } + .app-item-edit { + line-height: 3.5; + } + .form-control { + height: 39px; + } + .app-edit { + display: block; + width: 100%; + height: 39px; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.9; + border: 1px solid $grey; + border-radius: 0px; + } } diff --git a/imports/ui/components/externalApplications/index.js b/imports/ui/components/externalApplications/index.js index dd062c83..c86bbcf9 100644 --- a/imports/ui/components/externalApplications/index.js +++ b/imports/ui/components/externalApplications/index.js @@ -144,7 +144,7 @@ Template.ManageExternalApps.events({ }, 'click .js-update-app'(e) { e.preventDefault(); - const appId = $(e.target).closest('tr').data('id'); + const appId = $(e.target).closest('.app-item-edit').data('id'); const updatedName = $(e.target).closest('.app-item-edit').find('input[name="appName"]').val(); const updatedLink = $(e.target).closest('.app-item-edit').find('input[name="appLink"]').val(); const updatedNameMatch = $(e.target).closest('.app-item-edit').find('input[name="nameMatch"]').val(); @@ -176,9 +176,9 @@ Template.ManageExternalApps.events({ clickedItem.set(null); editMode.set(false); }, - 'click td.app-edit, keypress td.app-edit'(e) { + 'click .app-edit, keypress .app-edit'(e) { e.preventDefault(); - const clickedRow = $(e.target).closest('tr').data('name'); + const clickedRow = $(e.target).closest('.app-item').data('name'); clickedItem.set(clickedRow); editMode.set(true); return false; diff --git a/imports/ui/pages/resources/resourcesSingle.jsx b/imports/ui/pages/resources/resourcesSingle.jsx index 55903b61..c3bb1207 100644 --- a/imports/ui/pages/resources/resourcesSingle.jsx +++ b/imports/ui/pages/resources/resourcesSingle.jsx @@ -197,9 +197,13 @@ export class ResourcesSingle_default extends React.Component{ KindResourceTagName = resourceKinds[kind]; } + const apps = this.props.externalApplications; + return (
- + { apps && apps.length > 0 && + + } {KindResourceTagName && @@ -215,7 +219,6 @@ export class ResourcesSingle_default extends React.Component{ class ExternalApps extends React.Component{ renderLinks(applications) { - console.log(JSON.parse(this.props.resource.data)); const resourceName = _.get(this.props.resource, 'searchableData.name', this.props.selfLink); const resourceKind = this.props.resource.searchableData.kind;