Replacing a JS button with a lightning component (or whichever the best solution might be)

Question

Good afternoon, I understand this may seem like a duplicate question but I believe it is not. Please enlighten me since I'm new to lightning. I'm trying to get my JS buttons to work in lightning without much success. The first approach I tried was by creating a lightning component. It works perfectly except for the fact that instead of having the button on the top right it appears in the Feed area. Code for this solution: Component

<aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="ApexController">
<!-- Attribute -->
<aura:attribute name="loading" type="Boolean" default="true" />
<!-- Event handlers -->
<aura:handler name="init" action="{!c.myAction}" value="{!this}" />
<!-- Lightning design system "spinner" + loading message -->
<aura:if isTrue="{!v.loading}">
<div class="slds-spinner_container">
<div class="slds-spinner slds-spinner-brand slds-spinner-medium" role="status">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- /Spinner -->
</aura:component>

Js Controller

({
myAction : function(component, event, helper) {
var action = component.get("c.assignToCurrentUser"); // method on ApexController.cls
// v.recordId does not have to be explicitly defined as an attribute.
// this is taken care of the force:hasRecordId implementation
var params = {"recordId": component.get("v.recordId")};
action.setParams(params);
action.setCallback(this, function(response) {
var state = response.getState();
component.set("v.loading", false);
if (component.isValid() && state === "SUCCESS")
{
console.log(response.getReturnValue());
helper.helperMethod("success", "Case assignment", "Case has been assigned to you!");
$A.get("e.force:refreshView").fire();
}
else
{
// Show "toast" -> nice message dialog
helper.helperMethod("error", "Case assignment", "The system was unable to assign the case to you. Please contact your salesforce administrator");
}
// automatically close dialog -> so no user action needed
$A.get("e.force:closeQuickAction").fire();
});
$A.enqueueAction(action);
}
})

Js Helper

({
helperMethod : function(toasttype, title, message, data) {
data = data || [];
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
type: toasttype,
mode: "sticky",
title: title,
message: message,
messageTemplate: message,
messageTemplateData: data
});
toastEvent.fire();
}
})

Apex controller

public class ApexController {
@AuraEnabled
public static Boolean assignToCurrentUser(Id recordId)
{
    Case caseObj=new Case();
    caseObj.Id = recordId; 
    caseObj.OwnerId = UserInfo.getUserId();
    update caseObj;
    return true;
}
}

In Case > Buttons, Links and actions > click New Action Action Type: Lightning component Lightning Component: The one created above After it is created add it to the page layout in the salesforce 1 and lightning area

The second solution looks like the one I've seen in convert Javascript button to VF page button but my top priority was to get it to work with lightning components instead

Answer 1

The reason the button is appearing in the feed area instead of the top right actions is related to the fact that this quick action was created for a case. It looks fine for leads, for example. This means the first solution works according to the specifications and is a valid one. I'll change the component to show a button and add it anywhere I like in the record page instead.