diff --git a/static/directives/repo-view/repo-panel-settings.html b/static/directives/repo-view/repo-panel-settings.html index 6d9ccf553..a417ea9a8 100644 --- a/static/directives/repo-view/repo-panel-settings.html +++ b/static/directives/repo-view/repo-panel-settings.html @@ -70,21 +70,13 @@
- This state is currently {{ repository.state }}. + This state is currently {{ selectedState.title }}. Standard permissions apply. Users will not be able to push or modify images. The images and tags are maintained by Quay and Users can not push or modify them.
- -
-
- -
-
- + diff --git a/static/js/directives/repo-view/repo-panel-settings.js b/static/js/directives/repo-view/repo-panel-settings.js index cfec82d1e..f9dcf7826 100644 --- a/static/js/directives/repo-view/repo-panel-settings.js +++ b/static/js/directives/repo-view/repo-panel-settings.js @@ -96,24 +96,20 @@ angular.module('quay').directive('repoPanelSettings', function () { }, ApiService.errorDisplay('Could not change visibility')); }; - // Hide State, for now, if mirroring feature-flag is not enabled. if (Features.REPO_MIRROR) { - $scope.repoStates = ['NORMAL', 'READ_ONLY']; - } - - // Only show MIRROR as an option if the feature-flag is enabled. - if (Features.REPO_MIRROR) { $scope.repoStates.push('MIRROR'); } - - // Hide State, for now, if mirroring feature-flag is not enabled. - if (Features.REPO_MIRROR) { - $scope.selectedState = $scope.repository.state; - $scope.changeState = function() { - let state = {'state': $scope.selectedState}; - let params = {'repository': $scope.repository.namespace + '/' + $scope.repository.name}; - ApiService.changeRepoState(state, params) + $scope.repoStates = [ + {value: 'NORMAL', title: 'Normal', description: 'Standard permissions apply.'}, + {value: 'READ_ONLY', title: 'Readonly', description: 'Users will not be able to push or modify images.'}, + {value: 'MIRROR', title: 'Mirror', description: 'The images and tags are maintained by Quay and Users can not push or modify them.'}, + ]; + $scope.selectedState = $scope.repoStates.find(s => s.value === $scope.repository.state); + $scope.changeState = function(event) { + ApiService.changeRepoState({state: event.state.value}, + {repository: [$scope.repository.namespace, $scope.repository.name].join('/')}) .then(function() { - $scope.repository.state = $scope.selectedState; - $route.reload(); // State will eventually affect many UI elements. Reload the view. + $scope.repository.state = $scope.selectedState.value; + // State will eventually affect many UI elements. Reload the view. + $route.reload(); }, ApiService.errorDisplay('Could not change state')); } } diff --git a/static/js/directives/ui/repo-state/repo-state.component.css b/static/js/directives/ui/repo-state/repo-state.component.css new file mode 100644 index 000000000..bad8b7e5a --- /dev/null +++ b/static/js/directives/ui/repo-state/repo-state.component.css @@ -0,0 +1,72 @@ +.new-repo-state .btn { + width: 95px; + position: relative; + text-align: left; + + padding: 4px; + padding-left: 10px; +} + +.repo-state.small .btn { + padding: 2px; + padding-left: 10px; +} + +.new-repo-state .btn .caret { + position: absolute; + top: 13px; + right: 7px; +} + +.repo-state.small .btn .caret { + top: 11px; +} + +.new-repo-state .repo-state-help-text { + font-size: 12px; + color: #ccc; + margin-top: 4px; + margin-bottom: 2px; +} + +.new-repo-state .btn { + border-left: 4px solid #ccc; +} + +.new-repo-state .btn.NORMAL { + border-left-color: #5cb85c; +} + +.new-repo-state .btn.READ_ONLY { + border-left-color: #5cb85c; +} + +.new-repo-state .btn.MIRROR { + border-left-color: #337ab7; +} + +.new-repo-state li a { + vertical-align: middle; +} + +.new-repo-state li a:before { + content: ""; + border-radius: 50%; + width: 10px; + height: 10px; + background: #ccc; + display: inline-block; + margin-right: 6px; +} + +.new-repo-state li.NORMAL a:before { + background-color: #5cb85c; +} + +.new-repo-state li.READ_ONLY a:before { + background-color: #5cb85c; +} + +.new-repo-state li.MIRROR a:before { + background-color: #337ab7; +} diff --git a/static/js/directives/ui/repo-state/repo-state.component.html b/static/js/directives/ui/repo-state/repo-state.component.html new file mode 100644 index 000000000..d77fb750e --- /dev/null +++ b/static/js/directives/ui/repo-state/repo-state.component.html @@ -0,0 +1,16 @@ +
+
+ + +
+
diff --git a/static/js/directives/ui/repo-state/repo-state.component.ts b/static/js/directives/ui/repo-state/repo-state.component.ts new file mode 100644 index 000000000..d9ac606db --- /dev/null +++ b/static/js/directives/ui/repo-state/repo-state.component.ts @@ -0,0 +1,21 @@ +import { Component, Input, Output, EventEmitter } from 'ng-metadata/core'; +import * as template from './repo-state.component.html'; +import * as styleUrl from './repo-state.component.css'; + + +type RepoStateOption = { + value: string; + title: string; + description: string; +}; + +@Component({ + selector: 'repo-state', + templateUrl: template, + styleUrls: [styleUrl], +}) +export class RepoStateComponent { + @Input('<') public options: RepoStateOption[]; + @Input('<') public selectedState: RepoStateOption; + @Output() public onChange = new EventEmitter(); +} diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index eb80a488d..96d19a6c3 100644 --- a/static/js/quay.module.ts +++ b/static/js/quay.module.ts @@ -43,6 +43,7 @@ import { AppSpecificTokenManagerComponent } from './directives/ui/app-specific-t import { ManifestLinkComponent } from './directives/ui/manifest-link/manifest-link.component'; import { ManifestSecurityView } from './directives/ui/manifest-security-view/manifest-security-view.component'; import { MarkdownModule } from './directives/ui/markdown/markdown.module'; +import { RepoStateComponent } from './directives/ui/repo-state/repo-state.component'; import * as Clipboard from 'clipboard'; @@ -89,6 +90,7 @@ import * as Clipboard from 'clipboard'; AppSpecificTokenManagerComponent, ManifestLinkComponent, ManifestSecurityView, + RepoStateComponent, ], providers: [ ViewArrayImpl, diff --git a/static/js/types/custom.d.ts b/static/js/types/custom.d.ts index 94e6d20d5..8cc8ef73e 100644 --- a/static/js/types/custom.d.ts +++ b/static/js/types/custom.d.ts @@ -1,3 +1,13 @@ declare var System: { import: (module: string) => Promise; }; + +declare module "*.html" { + const value: string; + export = value; +} + +declare module "*.css" { + const value: string; + export = value; +}