From b8ea887443a7fcb923426233a3646921d2b02fb6 Mon Sep 17 00:00:00 2001
From: Nate Otto <nate@ottonomy.net>
Date: Thu, 27 Apr 2023 14:13:30 -0700
Subject: [PATCH 1/2] Add missing action bar to rich-skill-form-component
 Closes #382

---
 .../form/rich-skill-form.component.html       | 24 ++++++++++++++++++-
 .../form/rich-skill-form.component.ts         |  4 ++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/richskill/form/rich-skill-form.component.html b/ui/src/app/richskill/form/rich-skill-form.component.html
index fe98bf4a8..894b75c58 100644
--- a/ui/src/app/richskill/form/rich-skill-form.component.html
+++ b/ui/src/app/richskill/form/rich-skill-form.component.html
@@ -264,8 +264,30 @@ <h3 class="t-visuallyHidden" id="save-quicklinks">Quick Links</h3>
 
       </div>
 
-      <div class="l-stickyBar-x-bar t-hidden-desktopMin t-padding-medium t-padding-top">
+      <div class="l-stickyBar-x-bar t-hidden-desktopMin">
         <!-- @actionbarhorizontal -->
+        <nav class="l-flex l-flex-alignCenter l-flex-0 t-elevation-large">
+          <button class="m-actionBarItemHorizontal m-actionBarItemHorizontal-secondary" type="button" (click)="handleClickCancel()">
+            <svg class="m-actionBarItemHorizontal-x-icon t-icon">
+              <use [attr.xlink:href]="cancelIcon"></use>
+            </svg>
+            <span class="m-actionBarItemHorizontal-x-label">Cancel</span>
+            <span class="m-actionBarItemHorizontal-x-divider m-divider m-divider-large"></span>
+          </button>
+    
+          <app-formfield-submit
+                [formGroup]="skillForm"
+                [enabled]="formValid"
+                [dirty]="formDirty"
+                [observables]="[skillSaved]"
+                [mobileView]="true"
+                (errorsOccurred)="handleFormErrors($event)"
+              ></app-formfield-submit>
+          <div class="m-quickLinks" aria-labelledby="save-quicklinks">
+            <h3 class="t-visuallyHidden" id="save-quicklinks">Quick Links</h3>
+            <a (click)="scrollToTopClicked.emit()">Back to top</a>
+          </div>
+        </nav>
       </div>
     </div>
 
diff --git a/ui/src/app/richskill/form/rich-skill-form.component.ts b/ui/src/app/richskill/form/rich-skill-form.component.ts
index 644b15592..684764ffa 100644
--- a/ui/src/app/richskill/form/rich-skill-form.component.ts
+++ b/ui/src/app/richskill/form/rich-skill-form.component.ts
@@ -28,6 +28,7 @@ import {HasFormGroup} from "../../core/abstract-form.component"
 import {notACopyValidator} from "../../validators/not-a-copy.validator"
 import {ApiSkillSummary} from "../ApiSkillSummary"
 import {Whitelabelled} from "../../../whitelabel"
+import { SvgHelper, SvgIcon } from "src/app/core/SvgHelper"
 
 @Component({
   selector: "app-rich-skill-form",
@@ -50,6 +51,9 @@ export class RichSkillFormComponent extends Whitelabelled implements OnInit, Has
   searchingSimilarity?: boolean
   similarSkills?: ApiSkillSummary[]
 
+  iconCollection = SvgHelper.path(SvgIcon.COLLECTION)
+  cancelIcon = SvgHelper.path(SvgIcon.CANCEL)
+
   constructor(
     private fb: FormBuilder,
     private route: ActivatedRoute,

From 4e56cd120b16e55757b4c763f8ccf1041f6b1bce Mon Sep 17 00:00:00 2001
From: Nate Otto <nate@ottonomy.net>
Date: Thu, 27 Apr 2023 16:40:50 -0700
Subject: [PATCH 2/2] fixup: Remove unused icon

---
 ui/src/app/richskill/form/rich-skill-form.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/app/richskill/form/rich-skill-form.component.ts b/ui/src/app/richskill/form/rich-skill-form.component.ts
index 684764ffa..ca504b2e7 100644
--- a/ui/src/app/richskill/form/rich-skill-form.component.ts
+++ b/ui/src/app/richskill/form/rich-skill-form.component.ts
@@ -51,7 +51,6 @@ export class RichSkillFormComponent extends Whitelabelled implements OnInit, Has
   searchingSimilarity?: boolean
   similarSkills?: ApiSkillSummary[]
 
-  iconCollection = SvgHelper.path(SvgIcon.COLLECTION)
   cancelIcon = SvgHelper.path(SvgIcon.CANCEL)
 
   constructor(