feat(ui): add stand-in API icon when none selected on devportal page
MODIFY
manager/ui/war/plugins/api-manager/css/apiman.css
manager/ui/war/plugins/api-manager/css/apiman.css
@@ -2164,8 +2164,12 @@ html, body {height: 100%;}
/*End Notifications*/
/*Cropper*/
-.cropper-view-box,
-.cropper-face {
+#image-cropper-container .cropper-view-box,
+#image-cropper-container .cropper-face {
+ border-radius: 50%;
+}
+
+img#devportal-api-logo {
border-radius: 50%;
}
/*End Cropper*/
\ No newline at end of file

MODIFY
manager/ui/war/plugins/api-manager/html/api/api-devportal.html
manager/ui/war/plugins/api-manager/html/api/api-devportal.html
<div ng-show="data.apiVersion.exposeInPortal">
<!-- Feature in Portal -->
- <div class="title" apiman-i18n-key="dev-portal">Feature in the developer portal?</div>
+ <div class="title" apiman-i18n-key="dev-portal">Feature In Portal</div>
<div>
<span apiman-i18n-key="feature-api-in-portal-help">Feature this API version in the developer portal?
If selected, the API will appear as a default entry on the developer portal landing page.</span>
</span>
</div>
<div class="apiman-divider-40"
- ng-show="plans.length === 0">
+ ng-show="data.planSummaries.length === 0">
<div class="alert alert-warning">
<span class="pficon pficon-info"></span>
- <span apiman-i18n-key="api-plans.no-locked-plans-found">No plans were attached to this API.</span>
+ <span apiman-i18n-key="api-plans.no-locked-plans-found">No plans are attached to this API. Without plans, this API will not appear in the developer portal.</span>
</div>
</div>
<div class="card-pf card-pf-accented card-pf-aggregate-status">
<h2 class="card-pf-title">
{{ data.planSummaries[$index].planName }}
- <h6 class="card-subtitle mb-2 text-muted">Version {{ plan.version }}</h6>
</h2>
+ <h6 class="card-subtitle mb-2 text-muted">Version {{ plan.version }}</h6>
<div class="card-pf-body text-left">
<p class="card-text">{{ data.planSummaries[$index].planDescription }}</p>
-
-
<div>
<ul class="list-group list-group-flush">
<li style="max-width: max-content !important;" class="list-group-item" ng-show="plan.exposeInPortal === true">&#9702; Plan <strong>is available</strong> in the developer portal</li>
</div>
</div>
<!-- /row -->
- </div>
<!-- /Attached plans -->
<hr />
<!-- Image cropper modal and/or image -->
- <div class="row api-logo-container">
- <img src="{{ data.latestImage }}" ng-hide="!data.latestImage" alt="API image" />
+ <div class="row row-cards-pf api-logo-container">
+ <div class="col-xs-6 col-sm-5 col-md-5 container-border" style="width: 27em;">
+ <div class="card-pf card-pf-accented card-pf-aggregate-status">
+ <h2 class="card-pf-title">
+ Select a logo for your API
+ </h2>
+ <h6 class="card-subtitle mb-2 text-left"><em>Optional</em>. A stand-in will be provided if no logo is chosen.</h6>
+ <div class="card-pf-body text-center">
+ <img src="{{ getImageEndpoint() }}" ng-hide="!data.latestImage" alt="API image" id="devportal-api-logo" />
+ <span ng-show="!data.latestImage" class="fa fa-file-image-o" style="font-size: 10em;"></span>
+ </div>
+ <div class="card-pf-footer text-center" style="margin: 0 -10px !important;">
<button class="btn btn-primary" ng-click="openImageCropper()" type="button" data-field="uploadButton">
<span class="fa fa-upload"></span> Upload image
</button>
</div>
-
+ </div>
+ </div>
+ </div>
<!-- /image cropper and/or image -->
<!-- API version description markdown row -->
<div class="title" apiman-i18n-key="extended-api-description">Extended API Description</div>

MODIFY
manager/ui/war/plugins/api-manager/ts/api/api-devportal.ts
manager/ui/war/plugins/api-manager/ts/api/api-devportal.ts
@@ -145,7 +145,7 @@ function devPortalBusinessLogic(
apiVersion: $scope.version as ApiVersionBean, // $scope.version is bound magically by PageLifecycle... Maybe pass in as an arg.
planSummaries: apiPlans,
isFeaturedApi: isFeaturedApi($scope.version.api),
- latestImage: `${Configuration.api.endpoint}/${$scope.version.api.image}`
+ latestImage: $scope.version.api.image
}
// Original clean copy.
@@ -154,6 +154,7 @@ function devPortalBusinessLogic(
/** Functions **/
$scope.updateFeaturedApi = invertFeaturedApi;
$scope.openImageCropper = openImageCropperModal;
+ $scope.getImageEndpoint = getImageEndpoint;
// TUI Markdown editor. Will initialise
let markdownEditor: Editor = null;
@@ -295,6 +296,16 @@ function devPortalBusinessLogic(
);
}
+ function getImageEndpoint(): string {
+ if (!$scope.data.latestImage) {
+ return null;
+ } else if ($scope.data.latestImage.startsWith("data")) {
+ return $scope.data.latestImage;
+ } else {
+ return `${Configuration.api.endpoint}/${$scope.data.latestImage}`;
+ }
+ }
+
function handleFailure(failure: any): void {
// TODO(msavy): do something useful here...
Logger.error("failure {0}", failure.data || failure);

feat(ui): add stand-in API icon when none selected on devportal page