Prevent change visibility of a repo in the UI when disallowed by billing plan

Fixes #486

- Extracts out the check plan logic and UI from the new repo page into its own directive (repo-count-checker)
- Adds the new directive to the repo settings panel
- Some additional UI improvements for the repo settings panel
This commit is contained in:
Joseph Schorr 2015-09-16 14:00:06 -04:00
parent fbfe7fdb54
commit 2739cf47ba
8 changed files with 173 additions and 109 deletions

View file

@ -0,0 +1,24 @@
<div class="repo-count-checker-element">
<div class="required-plan" ng-show="isEnabled && planRequired && planRequired.title">
<div class="co-alert co-alert-info">
In order to make this repository private under
<strong ng-if="isUserNamespace">your personal namespace</strong>
<strong ng-if="!isUserNamespace">organization <b>{{ repo.namespace }}</b></strong>, you will need to upgrade your plan to
<b style="border-bottom: 1px dotted black;" data-html="true"
data-title="{{ '<b>' + planRequired.title + '</b><br>' + planRequired.privateRepos + ' private repositories' }}" bs-tooltip>
{{ planRequired.title }}
</b>.
This will cost $<span>{{ planRequired.price / 100 }}</span>/month.
<a class="btn btn-primary" ng-click="upgradePlan()" ng-show="!planChanging">Upgrade now</a>
</div>
<span ng-if="isUserNamespace && user.organizations.length == 1" style="margin-left: 6px; display: inline-block;">or did you mean to have this repository under the <b>{{ user.organizations[0].name }}</b> namespace?</span>
<div class="cor-loader-inline" ng-show="planChanging"></div>
</div>
<div class="cor-loader-inline" ng-show="isEnabled && checkingPlan"></div>
<div class="required-plan" ng-show="isEnabled && planRequired && !isUserNamespace && !planRequired.title">
<div class="co-alert co-alert-warning">
This organization has reached its private repository limit. Please contact your administrator.
</div>
</div>
</div>
</div>

View file

@ -22,12 +22,10 @@
<div class="repository-events-table" repository="repository"
is-enabled="isEnabled"></div>
<!-- Other settings -->
<!-- Visibility settings -->
<div class="co-panel">
<div class="co-panel-heading"><i class="fa fa-gears"></i> Repository Settings</div>
<div class="co-panel-heading"><i class="fa fa-unlock-alt"></i> Repository Visibility</div>
<div class="cor-loader" ng-show="!repository"></div>
<div ng-show="repository">
<!-- Public/Private -->
<div class="panel-body panel-section lock-section" ng-if="!repository.is_public">
@ -44,12 +42,23 @@
<div>This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.</div>
<button class="btn btn-default" ng-click="askChangeAccess('private')">
<button class="btn btn-default" ng-click="askChangeAccess('private')" ng-show="!planRequired">
<i class="fa fa-lock"></i>Make Private
</button>
</div>
<!-- Delete Repository -->
<!-- Payment -->
<div class="repo-count-checker" namespace="repository.namespace" plan-required="planRequired"
is-enabled="repository.is_public">
</div>
</div>
</div>
</div>
<!-- Delete repository -->
<div class="co-panel">
<div class="co-panel-heading"><i class="fa fa-trash"></i> Delete Repository</div>
<div class="cor-loader" ng-show="!repository"></div>
<div ng-show="repository">
<div class="panel-body panel-section">
<div class="co-alert co-alert-danger">
<button class="btn btn-danger delete-btn" ng-click="askDelete()">
@ -60,10 +69,16 @@
Deleting a repository <b>cannot be undone</b>. Here be dragons!
</div>
</div>
</div>
</div>
<!-- Build Status Badge -->
<div class="panel-body panel-section hidden-xs">
<!-- Build Status Badge -->
<div class="co-panel hidden-xs">
<div class="co-panel-heading"><i class="fa fa-tasks"></i> Build Status Badge</div>
<div class="cor-loader" ng-show="!repository"></div>
<div ng-show="repository">
<div class="panel-body panel-section">
<!-- Token Info Banner -->
<div class="co-alert co-alert-info" ng-if="!repository.is_public">
Note: This badge contains a token so the badge can be seen by external users. The token does not grant any other access and is safe to share!