Upgrade to bootstrap 4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-ui",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "Embedded UI for any service that implements the Rancher API spec",
   "author": "SUSE",
   "license": "Apache-2.0",
@@ -19,13 +19,14 @@
     "upload": "./scripts/upload"
   },
   "devDependencies": {
-    "clean-css-cli": "^5.6.2",
+    "clean-css-cli": "5.6.3",
     "sass": "1.58.3",
-    "uglify-js": "3.17.4"
+    "uglify-js": "3.19.3"
   },
   "dependencies": {
-    "bootstrap": "3.4.1",
+    "@rancher/icons": "2.0.63",
+    "bootstrap": "4.6.2",
     "handlebars": "4.7.9",
-    "jquery": "3.6.3"
+    "jquery": "3.7.1"
   }
 }

partials/column-links.hbs

@@ -1,7 +1,7 @@
 <div class="column-links">
   <ul>
     {{#eachProperty links}}
-      <li class="row resource-link" data-self="{{value}}"><i class="glyphicon glyphicon-circle-arrow-right"></i>{{key}}</li>
+      <li class="row resource-link" data-self="{{value}}"><i class="icon icon-right-arrow-alt"></i>{{key}}</li>
     {{else}}
       <li><div class="muted"><i>None</i></div></li>
     {{/eachProperty}}

partials/field.hbs

@@ -1,7 +1,7 @@
 {{#ifInList type 'array,map'}}
   {{#each children}}
     <div class="dualValue">
-      <a class="btn btn-default btn-xs btn-inline" tabindex="-1" onclick="htmlapi.subRemove(this);"><i class="glyphicon glyphicon-minus"></i></a>
+      <a class="btn btn-secondary btn-sm btn-inline" tabindex="-1" onclick="htmlapi.subRemove(this);"><i class="icon icon-minus"></i></a>
       {{>field.hbs}}
     </div>
   {{/each}}
@@ -102,7 +102,7 @@
 {{/if}}
 
 {{#if enlargeable}}
-  <a class="btn btn-default btn-xs btn-inline" onclick="htmlapi.switchToTextarea(this);" tabindex="-1" title="Enlarge"><i class="glyphicon glyphicon-resize-full"></i></a>
+  <a class="btn btn-secondary btn-sm btn-inline" onclick="htmlapi.switchToTextarea(this);" tabindex="-1" title="Enlarge"><i class="icon icon-sort"></i></a>
 {{/if}}
 
 {{#if nullCheck}}
@@ -115,7 +115,7 @@
 
 {{#unless addingField}}
   {{#ifInList type 'array,map'}}
-      <a class="btn btn-default btn-xs btn-inline" tabindex="-1" onclick="htmlapi.subAdd(this,'{{name}}');"><i class="glyphicon glyphicon-plus"></i></a>
+      <a class="btn btn-secondary btn-sm btn-inline" tabindex="-1" onclick="htmlapi.subAdd(this,'{{name}}');"><i class="icon icon-plus"></i></a>
     </div>
   {{/ifInList}}
 {{/unless}}

scripts/build

@@ -15,7 +15,7 @@ echo "Version: ${VERSION}"
 echo ""
 
 echo "Installing NPM dependencies"
-npm install
+npm install --no-fund
 
 DIST=./dist/${VERSION}
 mkdir -p ${DIST}
@@ -40,7 +40,7 @@ echo "Building ..."
 
 JS_FILES=(node_modules/jquery/dist/jquery.js \
   vendor/jquery.scrollintoview.js \
-  node_modules/bootstrap/dist/js/bootstrap.js \
+  node_modules/bootstrap/dist/js/bootstrap.bundle.js \
   vendor/async.js \
   vendor/json2.js \
   vendor/polyfill.js \
@@ -68,8 +68,23 @@ cp -R node_modules/bootstrap/dist/** ${DIST}
 sed -i.bak -e "s@/\*# sourceMappingURL=bootstrap\.css\.map.*@@g" ${DIST}/css/bootstrap.css
 rm -f ${DIST}/css/bootstrap.css.bak
 
+# Copy @rancher/icons font files. Its style.css references `fonts/icons.*`
+# (no leading `./`), which resolves next to ui.css in the dist output.
+mkdir -p ${DIST}/fonts
+cp node_modules/@rancher/icons/fonts/icons.ttf \
+   node_modules/@rancher/icons/fonts/icons.woff \
+   node_modules/@rancher/icons/fonts/icons.svg \
+   ${DIST}/fonts/
+
+# Patch @rancher/icons style.css: drop `font-display: block` so that if the
+# font file fails to load we get a visible fallback glyph (rectangle) instead
+# of the block-period hiding the pseudo-element entirely.
+sed -e 's@font-display:[[:space:]]*block;@@g' \
+    node_modules/@rancher/icons/style.css > ./tmp/rancher-icons.css
+
 # Generate css
 cat ./node_modules/bootstrap/dist/css/bootstrap.css \
+  ./tmp/rancher-icons.css \
   styles/main.scss \
   styles/explorer.scss \
   > ./tmp/ui.scss

scripts/docker-patch

@@ -16,13 +16,13 @@ fi
 
 echo "Patching running container with latest api-ui"
 
-docker exec -it ${CONTAINER} bash -c "rm -rf /usr/share/rancher/ui/api-ui/*"
+docker exec -it ${CONTAINER} bash -c "rm -rf /usr/share/rancher/ui-dashboard/api-ui/*"
 
 # Copy in the built code
 
 VERSION=$(node -e "(function () { console.log(require('./package.json').version) })()")
 
 docker cp ./dist/${VERSION}/ ${CONTAINER}:/usr/share/rancher
 
-docker exec -it ${CONTAINER} bash -c "cp -R /usr/share/rancher/${VERSION}/* /usr/share/rancher/ui/api-ui/"
+docker exec -it ${CONTAINER} bash -c "cp -R /usr/share/rancher/${VERSION}/* /usr/share/rancher/ui-dashboard/api-ui/"
 docker exec -it ${CONTAINER} bash -c "rm -rf /usr/share/rancher/${VERSION}"

src/HTMLApi.js

@@ -128,7 +128,7 @@ HTMLApi.prototype.showModal = function(body,opt,cb)
   var modalHtml = Handlebars.templates['modal.hbs'](opt);
   var modal = $(modalHtml);
   this._reqModal = modal;
-  $('.modal-dialog',modal).css('width',opt.width||'750px');
+  $('.modal-dialog',modal).css({width: opt.width||'750px', maxWidth: opt.width||'750px'});
   this.setModalActions(opt.actions);
   modal.bind('keydown', this.onKeys);
   modal.modal({backdrop: 'static', keyboard: false});
@@ -185,7 +185,7 @@ HTMLApi.prototype.setModalActions = function(actions)
   var html = '';
 
   actions.forEach(function(action) {
-    var color = 'btn-default';
+    var color = 'btn-secondary';
     var btnType = 'button'
     if ( action.primary ) {
       color = 'btn-primary';
@@ -194,7 +194,7 @@ HTMLApi.prototype.setModalActions = function(actions)
       color = 'btn-link';
     }
 
-    html += '<button type="'+btnType+'" class="btn '+color+'" onclick="htmlapi.modalAction(\''+ action.id +'\');">'+ action.text + '</button>';
+    html += '<button type="'+btnType+'" class="btn btn-sm '+color+'" onclick="htmlapi.modalAction(\''+ action.id +'\');">'+ action.text + '</button>';
   });
 
   $('.modal-footer', this._reqModal).html(html);
@@ -431,7 +431,7 @@ HTMLApi.prototype._addCollapser = function(item)
     return;
 
   var collapser = $('<i/>', {
-    "class": "glyphicon glyphicon-minus",
+    "class": "icon icon-minus",
     click: JSONFormatter.prototype.collapse
   });
 

styles/main.scss

@@ -1,18 +1,19 @@
-@font-face {
-  font-family: 'Glyphicons Halflings';
-  src: url("fonts/glyphicons-halflings-regular.eot");
-  src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
-        url("fonts/glyphicons-halflings-regular.woff2") format("woff2"),
-        url("fonts/glyphicons-halflings-regular.woff") format("woff"),
-        url("fonts/glyphicons-halflings-regular.ttf") format("truetype"),
-        url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
-}
-
 .modal {
   overflow: auto;
   position: absolute;
 }
 
+// Bootstrap 3 → 4 compatibility shim for .well (removed in v4)
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
 SELECT {
   width: auto;
 }
@@ -195,7 +196,13 @@ LI {
   padding: 0;
 }
 
-.json LI .glyphicon {
+.icon {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: -0.125em;
+}
+
+.json LI .icon {
   position: relative;
   left: -15px;
   margin-right: -15px;
@@ -216,6 +223,10 @@ H1 {
   z-index: 1;
 }
 
+#header LABEL {
+  font-weight: bold;
+}
+
 #header .btn {
   margin-bottom: 3px;
 }
@@ -224,6 +235,62 @@ H1 {
   margin-bottom: 0;
 }
 
+// Restore Bootstrap 3-era button sizing and color palette so the app looks
+// like its pre-upgrade self. Bootstrap 4 sets .btn to font-size:1rem/padding
+// larger than v3, and picks a brighter primary blue (#007bff) and green
+// (#28a745). These overrides put both back.
+.btn {
+  font-size: 14px;
+  line-height: 1.42857143;
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+
+.btn-sm {
+  font-size: 12px;
+  line-height: 1.5;
+  padding: 5px 10px;
+  border-radius: 3px;
+}
+
+.btn-primary {
+  background-color: #337ab7;
+  border-color: #2e6da4;
+
+  &:hover, &:focus, &:active, &.active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-color: #286090;
+    border-color: #204d74;
+  }
+}
+
+.btn-success {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+
+  &:hover, &:focus, &:active, &.active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-color: #449d44;
+    border-color: #398439;
+  }
+}
+
+.btn-secondary {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+
+  &:hover, &:focus, &:active, &.active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: #333;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+  }
+}
+
 TH {
 text-align: left;
 }

templates/body.hbs

@@ -3,16 +3,16 @@
   <div iv="header-body">
     <label>Operations</label>
     <div id="operations">
-        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.up()" {{#unless operations.up}}disabled="disabled"{{/unless}}><span class="glyphicon glyphicon-arrow-up"></span> Up</button>
-        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.reload()"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.up()" {{#unless operations.up}}disabled="disabled"{{/unless}}><span class="icon icon-chevron-up"></span> Up</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.reload()"><span class="icon icon-refresh"></span> Reload</button>
       {{#if operations.post}}
-        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.create()"><span class="glyphicon glyphicon-plus"></span> Create</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.create()"><span class="icon icon-plus"></span> Create</button>
       {{/if}}
       {{#if operations.put}}
-        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.update()"><span class="glyphicon glyphicon-edit"></span> Edit</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.update()"><span class="icon icon-edit"></span> Edit</button>
       {{/if}}
       {{#if operations.delete}}
-        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.remove()"><span class="glyphicon glyphicon-trash"></span> Delete</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.remove()"><span class="icon icon-trash"></span> Delete</button>
       {{/if}}
     </div>
     <br/>
@@ -36,7 +36,7 @@
     {{#if data.sortLinks }}
       <form>
         <div class="row">
-          <div class="col-xs-7">
+          <div class="col-7">
             <label>Sort By</label>
             <select id="sortBy" class="form-control" onchange="htmlapi.sortChange(this)">
                 {{#unless data.sort.name}}<option value="">(Not Sorted)</option>{{/unless}}
@@ -45,16 +45,16 @@
                 {{/eachProperty}}
             </select>
           </div>
-          <div class="col-xs-5">
+          <div class="col-5">
             {{#if data.sort.name }}
               <label>Direction</label>
               <div class="btn-group btn-group-sm">
                 {{#ifEqual data.sort.order "desc"}}
-                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
-                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
+                  <button type="button" class="btn btn-secondary btn-sm" onclick="htmlapi.sortOrderChange();"><span class="icon icon-sort-down"></span></button>
+                  <button type="button" class="btn btn-secondary btn-sm active"><span class="icon icon-sort-up"></span></button>
                 {{else}}
-                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
-                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
+                  <button type="button" class="btn btn-secondary btn-sm active"><span class="icon icon-sort-down"></span></button>
+                  <button type="button" class="btn btn-secondary btn-sm" onclick="htmlapi.sortOrderChange();"><span class="icon icon-sort-up"></span></button>
                 {{/ifEqual}}
               </div>
             {{/if}}
@@ -73,40 +73,42 @@
         {{#if data.pagination.partial}}
           {{#if data.pagination.first}}
             {{#ifEqual data.links.self data.pagination.first}}
-              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="icon icon-chevron-beginning"></span></button>
             {{else}}
-              <a class="btn btn-success btn-sm" href="{{data.pagination.first}}"><span class="glyphicon glyphicon-step-backward"></span></a>
+              <a class="btn btn-success btn-sm" href="{{data.pagination.first}}"><span class="icon icon-chevron-beginning"></span></a>
             {{/ifEqual}}
           {{else}}
-              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="icon icon-chevron-beginning"></span></button>
           {{/if}}
           {{#if data.pagination.prev}}
-            <a class="btn btn-success btn-sm" href="{{data.pagination.prev}}"><span class="glyphicon glyphicon-chevron-left"></span></a>
+            <a class="btn btn-success btn-sm" href="{{data.pagination.prev}}"><span class="icon icon-chevron-left"></span></a>
           {{else}}
-              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-left"></span></button>
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="icon icon-chevron-left"></span></button>
           {{/if}}
           {{#if data.pagination.next}}
-            <a class="btn btn-success btn-sm" href="{{data.pagination.next}}"><span class="glyphicon glyphicon-chevron-right"></span></a>
+            <a class="btn btn-success btn-sm" href="{{data.pagination.next}}"><span class="icon icon-chevron-right"></span></a>
           {{else}}
-              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-right"></span></button>
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="icon icon-chevron-right"></span></button>
           {{/if}}
           {{#if data.pagination.last}}
-            <a class="btn btn-success btn-sm" href="{{data.pagination.last}}"><span class="glyphicon glyphicon-step-forward"></span></a>
+            <a class="btn btn-success btn-sm" href="{{data.pagination.last}}"><span class="icon icon-chevron-end"></span></a>
           {{else}}
-              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span></button>
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="icon icon-chevron-end"></span></button>
           {{/if}}
         {{else}}
           <p class="inactive">Full result</p>
         {{/if}}
       </div>
       <div>
-        <form class="form-horizontal">
+        <form>
         <div class="input-group input-group-sm">
-          <span class="input-group-addon">Limit:</span>
+          <div class="input-group-prepend">
+            <span class="input-group-text">Limit:</span>
+          </div>
           <input class="form-control" type="number" min="0" step="100" id="limit" name="limit" value="{{data.pagination.limit}}"/>
-          <span class="input-group-btn">
-            <button type="submit" class="btn btn-primary btn-sm" onclick="htmlapi.setLimit($('limit').val())"><span class="glyphicon glyphicon-signal"></span> Set</button>
-          </span>
+          <div class="input-group-append">
+            <button type="submit" class="btn btn-primary btn-sm" onclick="htmlapi.setLimit($('limit').val())"><span class="icon icon-checkmark"></span> Set</button>
+          </div>
         </div>
         </form>
       </div>
@@ -123,9 +125,6 @@
     {{#if docsPage}}
       <a href="{{docsPage}}" target="apidocs">Documentation</a><br/>
     {{/if}}
-    {{#if logout}}
-      <a href="#" onclick="htmlapi.logout(); return false">Log Out</a>
-    {{/if}}
   </div>
 </div>