Migrated code card to Octane syntax

refs https://github.com/TryGhost/Ghost/issues/14101

- applying boyscout rule and upgrading/cleaning up when touching files
- nothing out of the ordinary to report with this migration

ghost/admin/.lint-todo

@@ -1249,3 +1249,13 @@ remove|ember-template-lint|no-duplicate-landmark-elements|353|28|353|28|38d3be08
 remove|ember-template-lint|no-duplicate-landmark-elements|421|28|421|28|345501bb9545198904b82e4c073b11d792ae2ea6|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs
 add|ember-template-lint|no-action|6|77|6|77|76726a13a086d82dab219df12e86db1773a9de32|1657756800000|1668128400000|1673312400000|app/components/gh-file-uploader.hbs
 remove|ember-template-lint|no-action|12|92|12|92|031d04576149d3034549aa3d14bc26da704cd70c|1652054400000|1662422400000|1665014400000|app/components/gh-file-uploader.hbs
+remove|ember-template-lint|no-action|9|16|9|16|822c6a91d06436c87443aba1c5316874b4de7e93|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|10|18|10|18|40a9eaaf8ee3a30448bd8f5c51e4f57ad6f637cb|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|11|14|11|14|45b936fe4ae520e86dc577dced7e4de626004fba|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|12|14|12|14|c27072dba50f6e36c62d708160adb2e96b8244e3|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|14|17|14|17|2ecb8ec2db47e693d292cac348977b4c83e5b0a4|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|15|17|15|17|b562d5c8ffc834037fff995329aa4cd49218776b|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|28|20|28|20|b96b7bd3d4b17c4761201d3a44c6876b119611f9|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|34|19|34|19|bb54609cede4c2f20ae22de5cbc2771d396aaaf4|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|no-action|55|20|55|20|ee695277e2f7dac9fbe5570ebfbe9c738280a976|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs
+remove|ember-template-lint|require-input-label|31|8|31|8|615e3b52bcc28f911cc3b8e3630bd77324e357a6|1652054400000|1662422400000|1665014400000|lib/koenig-editor/addon/components/koenig-card-code.hbs

ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.hbs

@@ -1,36 +1,37 @@
 <KoenigCard
-    @class={{concat "ba b--white relative kg-card-hover miw-100" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
+    @class={{concat "ba b--white relative kg-card-hover miw-100" (if @isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
     @style={{this.cardStyle}}
-    @headerOffset={{this.headerOffset}}
+    @headerOffset={{@headerOffset}}
     @toolbar={{this.toolbar}}
-    @payload={{this.payload}}
+    @payload={{@payload}}
-    @isSelected={{this.isSelected}}
+    @isSelected={{@isSelected}}
-    @isEditing={{this.isEditing}}
+    @isEditing={{@isEditing}}
-    @selectCard={{action this.selectCard}}
+    @selectCard={{@selectCard}}
-    @deselectCard={{action this.deselectCard}}
+    @deselectCard={{@deselectCard}}
-    @editCard={{action this.editCard}}
+    @editCard={{@editCard}}
-    @saveCard={{action this.saveCard}}
+    @saveCard={{@saveCard}}
-    @saveAsSnippet={{this.saveAsSnippet}}
+    @saveAsSnippet={{@saveAsSnippet}}
-    @onEnterEdit={{action "enterEditMode"}}
+    @onEnterEdit={{this.enterEditMode}}
-    @onLeaveEdit={{action "leaveEditMode"}}
+    @onLeaveEdit={{this.leaveEditMode}}
-    @addParagraphAfterCard={{this.addParagraphAfterCard}}
+    @addParagraphAfterCard={{@addParagraphAfterCard}}
-    @moveCursorToPrevSection={{this.moveCursorToPrevSection}}
+    @moveCursorToPrevSection={{@moveCursorToPrevSection}}
-    @moveCursorToNextSection={{this.moveCursorToNextSection}}
+    @moveCursorToNextSection={{@moveCursorToNextSection}}
-    @editor={{this.editor}}
+    @editor={{@editor}}
     as |card|
 >
-    {{#if this.isEditing}}
+    {{#if @isEditing}}
-        <GhCmEditor @value={{this.payload.code}}
+        <GhCmEditor @value={{@payload.code}}
             @class="koenig-card-code--editor koenig-card-html--editor"
             @textareaClass="o-0"
             @autofocus={{true}}
             @lineWrapping={{true}}
-            @update={{action "updateCode"}}
+            @update={{this.updateCode}}
             @mode={{this.cmMode}}
         />
         <input
+            aria-label="Code card language"
             type="text"
-            value={{readonly this.payload.language}}
+            value={{@payload.language}}
             {{on "blur" this.updateLanguage}}
             placeholder="Language..."
             class="absolute w-20 pa1 ba b--lightgrey br2 f8 tracked-2 fw4 z-999 outline-0 anim-normal"
@@ -38,21 +39,21 @@
         />
     {{else}}
         <div class="koenig-card-html-rendered">
-            <pre><code class="line-numbers {{if this.payload.language (concat "language-" this.payload.language)}}">{{this.escapedCode}}</code></pre>
+            <pre><code class="line-numbers {{if @payload.language (concat "language-" @payload.language)}}">{{this.escapedCode}}</code></pre>
         </div>
-        {{#if this.payload.language}}
+        {{#if @payload.language}}
             <div class="absolute top-2 right-2 flex justify-center items-center pa2">
-                <span class="db nudge-top--2 fw5 f8 midlightgrey">{{this.payload.language}}</span>
+                <span class="db nudge-top--2 fw5 f8 midlightgrey">{{@payload.language}}</span>
             </div>
         {{/if}}
         <div class="koenig-card-click-overlay"></div>
     {{/if}}
 
-    {{#if (and (not this.isEditing) (or this.isSelected (clean-basic-html this.payload.caption)))}}
+    {{#if (and (not @isEditing) (or @isSelected (clean-basic-html @payload.caption)))}}
         <card.CaptionInput
             @class="z-999"
-            @caption={{this.payload.caption}}
+            @caption={{@payload.caption}}
-            @update={{action "updateCaption"}}
+            @update={{this.updateCaption}}
             @placeholder="Type caption for code block (optional)"
         />
     {{/if}}

ghost/admin/lib/koenig-editor/addon/components/koenig-card-code.js

@@ -1,11 +1,11 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import Ember from 'ember';
-import classic from 'ember-classic-decorator';
+import {action} from '@ember/object';
-import {action, computed, set} from '@ember/object';
 import {utils as ghostHelperUtils} from '@tryghost/helpers';
 import {htmlSafe} from '@ember/template';
 import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
+import {tracked} from '@glimmer/tracking';
 
 const {Handlebars} = Ember;
 const {countWords} = ghostHelperUtils;
@@ -17,39 +17,19 @@ const CM_MODE_MAP = {
     js: 'javascript'
 };
 
-@classic
 export default class KoenigCardCode extends Component {
-    // attrs
+    @tracked showLanguageInput = true;
-    payload = null;
-    isSelected = false;
-    isEditing = false;
-    headerOffset = 0;
-    showLanguageInput = true;
 
-    // closure actions
-    editCard() {}
-    saveCard() {}
-    selectCard() {}
-    deselectCard() {}
-    deleteCard() {}
-    registerComponent() {}
-    moveCursorToNextSection() {}
-    moveCursorToPrevSection() {}
-    addParagraphAfterCard() {}
-
-    @computed('payload.code')
     get isEmpty() {
-        return isBlank(this.payload.code);
+        return isBlank(this.args.payload.code);
     }
 
-    @computed('payload.code')
     get counts() {
-        return {wordCount: countWords(this.payload.code)};
+        return {wordCount: countWords(this.args.payload.code)};
     }
 
-    @computed('isEditing')
     get toolbar() {
-        if (this.isEditing) {
+        if (this.args.isEditing) {
             return false;
         }
 
@@ -60,30 +40,26 @@ export default class KoenigCardCode extends Component {
                 iconClass: 'fill-white',
                 title: 'Edit',
                 text: '',
-                action: run.bind(this, this.editCard)
+                action: this.args.editCard
             }]
         };
     }
 
-    @computed('payload.code')
     get escapedCode() {
-        let escapedCode = Handlebars.Utils.escapeExpression(this.payload.code);
+        let escapedCode = Handlebars.Utils.escapeExpression(this.args.payload.code);
         return htmlSafe(escapedCode);
     }
 
-    @computed('payload.language')
     get cmMode() {
-        let {language} = this.payload;
+        let {language} = this.args.payload;
         return CM_MODE_MAP[language] || language;
     }
 
-    @computed('isEditing')
     get cardStyle() {
-        let style = this.isEditing ? 'background-color: #f4f8fb; border-color: #f4f8fb' : '';
+        let style = this.args.isEditing ? 'background-color: #f4f8fb; border-color: #f4f8fb' : '';
         return htmlSafe(style);
     }
 
-    @computed('showLanguageInput')
     get languageInputStyle() {
         let styles = ['top: 6px', 'right: 6px'];
         if (!this.showLanguageInput) {
@@ -92,18 +68,18 @@ export default class KoenigCardCode extends Component {
         return htmlSafe(styles.join('; '));
     }
 
-    init() {
+    constructor() {
-        super.init(...arguments);
+        super(...arguments);
-        let payload = this.payload || {};
+        let payload = this.args.payload || {};
 
         // CodeMirror errors on a `null` or `undefined` value
         if (!payload.code) {
-            set(payload, 'code', '');
+            payload.code = '';
         }
 
-        this.set('payload', payload);
+        this.payload = payload;
 
-        this.registerComponent(this);
+        this.args.registerComponent(this);
     }
 
     @action
@@ -134,26 +110,26 @@ export default class KoenigCardCode extends Component {
         if (this.isEmpty) {
             // afterRender is required to avoid double modification of `isSelected`
             // TODO: see if there's a way to avoid afterRender
-            run.scheduleOnce('afterRender', this, this.deleteCard);
+            run.scheduleOnce('afterRender', this, this.args.deleteCard);
         }
     }
 
     _updatePayloadAttr(attr, value) {
-        let payload = this.payload;
+        let payload = this.args.payload;
-        let save = this.saveCard;
+        let save = this.args.saveCard;
 
-        set(payload, attr, value);
+        payload[attr] = value;
 
         // update the mobiledoc and stay in edit mode
         save(payload, false);
     }
 
     _hideLanguageInput() {
-        this.set('showLanguageInput', false);
+        this.showLanguageInput = false;
     }
 
     _showLanguageInput() {
-        this.set('showLanguageInput', true);
+        this.showLanguageInput = true;
     }
 
     _addMousemoveHandler() {