NIFI-12099 Repurpose Template icon in top left bar (#7811)

This closes #7811

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml

@@ -559,6 +559,7 @@
                                                 <include>${staging.dir}/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js</include>
                                                 <include>${staging.dir}/js/nf/canvas/header/components/nf-ng-funnel-component.js</include>
                                                 <include>${staging.dir}/js/nf/canvas/header/components/nf-ng-template-component.js</include>
+                                                <include>${staging.dir}/js/nf/canvas/header/components/nf-ng-registry-import-component.js</include>
                                                 <include>${staging.dir}/js/nf/canvas/header/components/nf-ng-label-component.js</include>
                                                 <include>${staging.dir}/js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js</include>
                                                 <include>${staging.dir}/js/nf/canvas/directives/nf-ng-draggable-directive.js</include>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties

@@ -89,6 +89,7 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-ng-bridge.js?
 <script type="text/javascript" src="js/nf/canvas/header/components/nf-ng-remote-process-group-component.js?${project.version}"></script>\n\
 <script type="text/javascript" src="js/nf/canvas/header/components/nf-ng-funnel-component.js?${project.version}"></script>\n\
 <script type="text/javascript" src="js/nf/canvas/header/components/nf-ng-template-component.js?${project.version}"></script>\n\
+<script type="text/javascript" src="js/nf/canvas/header/components/nf-ng-registry-import-component.js?${project.version}"></script>\n\
 <script type="text/javascript" src="js/nf/canvas/header/components/nf-ng-label-component.js?${project.version}"></script>\n\
 <script type="text/javascript" src="js/nf/canvas/directives/nf-ng-breadcrumbs-directive.js?${project.version}"></script>\n\
 <script type="text/javascript" src="js/nf/canvas/directives/nf-ng-draggable-directive.js?${project.version}"></script>\n\

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp

@@ -61,6 +61,13 @@
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.funnelComponent);">
                 <span class="component-button-grip"></span>
             </button>
+            <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.importFromRegistry}}"
+                    id="registry-import-component"
+                    class="component-button icon icon-import-from-registry"
+                    ng-disabled="!appCtrl.nf.CanvasUtils.canWriteCurrentGroup();"
+                    nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.registryImportComponent);">
+                <span class="component-button-grip"></span>
+            </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.label}}"
                     id="label-component"
                     class="component-button icon icon-label"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css

@@ -36,7 +36,6 @@ md-toolbar.md-small .md-toolbar-tools {
 #header .icon {
     font-size:32px;
     color: #004849;
-    padding-left:12px
 }
 
 #header .fa {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/fonts/flowfont/flowfont.css

@@ -1,60 +1,59 @@
 @font-face {
-    font-family: 'flowfont';
-    src: url('./flowfont.eot?33669169');
-    src: url('./flowfont.eot?33669169#iefix') format('embedded-opentype'),
-    url('./flowfont.woff2?33669169') format('woff2'),
-    url('./flowfont.woff?33669169') format('woff'),
-    url('./flowfont.ttf?33669169') format('truetype'),
-    url('./flowfont.svg?33669169#flowfont') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'flowfont';
+  src: url('./flowfont.eot?8516181');
+  src: url('./flowfont.eot?8516181#iefix') format('embedded-opentype'),
+       url('./flowfont.woff2?8516181') format('woff2'),
+       url('./flowfont.woff?8516181') format('woff'),
+       url('./flowfont.ttf?8516181') format('truetype'),
+       url('./flowfont.svg?8516181#flowfont') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
 /*
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'flowfont';
-    src: url('../font/flowfont.svg?33669169#flowfont') format('svg');
+    src: url('../font/flowfont.svg?8516181#flowfont') format('svg');
   }
 }
 */
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
+[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "flowfont";
   font-style: normal;
   font-weight: normal;
-  speak: none;
- 
+  speak: never;
+
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
- 
+
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
- 
+
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
- 
+
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
-  /*margin-left: .2em;*/
- 
+  margin-left: .2em;
+
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
- 
+
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
- 
+
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
- 
+
 .icon-funnel-add:before { content: '\e800'; } /* '' */
 .icon-counter:before { content: '\e801'; } /* '' */
 .icon-enable-false:before { content: '\e802'; } /* '' */
@@ -78,9 +77,11 @@
 .icon-port-in-add:before { content: '\e814'; } /* '' */
 .icon-processor-add:before { content: '\e815'; } /* '' */
 .icon-lineage:before { content: '\e816'; } /* '' */
+.icon-import-from-registry-add:before { content: '\e81d'; } /* '' */
+.icon-import-from-registry:before { content: '\e81e'; } /* '' */
 .icon-port-in:before { content: '\e832'; } /* '' */
 .icon-port-out:before { content: '\e833'; } /* '' */
 .icon-connect:before { content: '\e834'; } /* '' */
 .icon-connect-add:before { content: '\e835'; } /* '' */
 .icon-threads:before { content: '\e83f'; } /* '' */
-.icon-drop:before { content: '\e888'; } /* '' */
+.icon-drop:before { content: '\e888'; } /* '' */