DEV: Add CI setup and fix linting issues (#11)

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "eslint-config-discourse",
+  "ignorePatterns": ["javascripts/vendor/*"],
+  "globals": {
+    "settings": "readonly",
+    "themePrefix": "readonly"
+  }
+}

.github/workflows/component-linting.yml

@@ -0,0 +1,48 @@
+name: Linting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: plugin-linting-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: ESLint
+        if: ${{ always() }}
+        run: yarn eslint --ext .js,.js.es6 --no-error-on-unmatched-pattern {test,javascripts}
+
+      - name: Prettier
+        if: ${{ always() }}
+        shell: bash
+        run: |
+          yarn prettier -v
+          files=$(find javascripts desktop mobile common scss -type f \( -name "*.scss" -or -name "*.js" -or -name "*.es6" \) 2> /dev/null) || true
+          if [ -n "$files" ]; then
+            yarn prettier --list-different $files
+          fi
+          if [ 0 -lt $(find test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            yarn prettier --list-different "test/**/*.{js,es6}"
+          fi
+
+      - name: Ember template lint
+        if: ${{ always() }}
+        run: yarn ember-template-lint --no-error-on-unmatched-pattern javascripts

.github/workflows/component-tests.yml

@@ -0,0 +1,149 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: plugin-tests-${{ format('{0}-{1}', github.head_ref || github.run_number, github.job) }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: ${{ matrix.build_type }}
+    runs-on: ubuntu-latest
+    container: discourse/discourse_test:slim-browsers
+    timeout-minutes: 15
+
+    env:
+      DISCOURSE_HOSTNAME: www.example.com
+      RUBY_GLOBAL_METHOD_CACHE_SIZE: 131072
+      RAILS_ENV: development
+      PGUSER: discourse
+      PGPASSWORD: discourse
+
+    strategy:
+      fail-fast: false
+
+      matrix:
+        build_type: ["frontend-legacy", "frontend"]
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          repository: discourse/discourse
+          fetch-depth: 1
+
+      - name: Install component
+        uses: actions/checkout@v3
+        with:
+          path: tmp/component
+          fetch-depth: 1
+
+      - name: Setup Git
+        run: |
+          git config --global user.email "ci@ci.invalid"
+          git config --global user.name "Discourse CI"
+
+      - name: Start redis
+        run: |
+          redis-server /etc/redis/redis.conf &
+
+      - name: Start Postgres
+        run: |
+          chown -R postgres /var/run/postgresql
+          sudo -E -u postgres script/start_test_db.rb
+          sudo -u postgres psql -c "CREATE ROLE $PGUSER LOGIN SUPERUSER PASSWORD '$PGPASSWORD';"
+
+      - name: Bundler cache
+        uses: actions/cache@v3
+        with:
+          path: vendor/bundle
+          key: ${{ runner.os }}-gem-${{ hashFiles('**/Gemfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-gem-
+
+      - name: Setup gems
+        run: |
+          gem install bundler --conservative -v $(awk '/BUNDLED WITH/ { getline; gsub(/ /,""); print $0 }' Gemfile.lock)
+          bundle config --local path vendor/bundle
+          bundle config --local deployment true
+          bundle config --local without development
+          bundle install --jobs 4
+          bundle clean
+
+      - name: Lint English locale
+        run: bundle exec ruby script/i18n_lint.rb "tmp/component/locales/en.yml"
+
+      - name: Get yarn cache directory
+        id: yarn-cache-dir
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Yarn cache
+        uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Fetch app state cache
+        uses: actions/cache@v3
+        id: app-cache
+        with:
+          path: tmp/app-cache
+          key: >-
+            ${{ hashFiles('.github/workflows/tests.yml') }}-
+            ${{ hashFiles('db/**/*', 'plugins/**/db/**/*') }}-
+
+      - name: Restore database from cache
+        if: steps.app-cache.outputs.cache-hit == 'true'
+        run: psql -f tmp/app-cache/cache.sql postgres
+
+      - name: Restore uploads from cache
+        if: steps.app-cache.outputs.cache-hit == 'true'
+        run: rm -rf public/uploads && cp -r tmp/app-cache/uploads public/uploads
+
+      - name: Create and migrate database
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: |
+          bin/rake db:create
+          bin/rake db:migrate
+
+      - name: Dump database for cache
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: mkdir -p tmp/app-cache && pg_dumpall > tmp/app-cache/cache.sql
+
+      - name: Dump uploads for cache
+        if: steps.app-cache.outputs.cache-hit != 'true'
+        run: rm -rf tmp/app-cache/uploads && cp -r public/uploads tmp/app-cache/uploads
+
+      - name: Check qunit existence
+        id: check_qunit
+        shell: bash
+        run: |
+          if [ 0 -lt $(find tmp/component/test -type f \( -name "*.js" -or -name "*.es6" \) 2> /dev/null | wc -l) ]; then
+            echo "::set-output name=files_exist::true"
+          fi
+
+      - name: Component QUnit
+        if: matrix.build_type == 'frontend-legacy' && steps.check_qunit.outputs.files_exist == 'true'
+        run: |
+          THEME_NAME=$(ruby -e 'require "json"; puts JSON.parse(File.read("tmp/component/about.json"))["name"]')
+          bundle exec rake themes:install -- "--{\"$THEME_NAME\": \"tmp/component\"}"
+          QUNIT_EMBER_CLI=0 UNICORN_TIMEOUT=120 bundle exec rake "themes:qunit[name,$THEME_NAME]"
+        timeout-minutes: 10
+
+      - name: Component QUnit (Ember CLI)
+        if: matrix.build_type == 'frontend' && steps.check_qunit.outputs.files_exist == 'true'
+        run: |
+          THEME_NAME=$(ruby -e 'require "json"; puts JSON.parse(File.read("tmp/component/about.json"))["name"]')
+          bundle exec rake themes:install -- "--{\"$THEME_NAME\": \"tmp/component\"}"
+          QUNIT_EMBER_CLI=1 UNICORN_TIMEOUT=120 bundle exec rake "themes:qunit[name,$THEME_NAME]"
+        timeout-minutes: 10

.gitignore

@@ -1,2 +1,2 @@
+node_modules
 .discourse-site
-HELP

.prettierrc

@@ -0,0 +1 @@
+{}

.template-lintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: ["ember-template-lint-plugin-discourse"],
+  extends: "discourse:recommended",
+};

README.md

@@ -4,28 +4,24 @@ By default this banner appears on all top-level topic pages (latest/new/unread/t
 
 ![17%20PM|690x326](https://d11a6trkgmumsb.cloudfront.net/optimized/3X/1/4/14ec7e5d17d7b8bd203759ce1c9b69605e2d9e03_2_1380x652.png)
 
-
 :building_construction: [Github repo](https://github.com/awesomerobot/discourse-search-banner): `https://github.com/awesomerobot/discourse-search-banner.git`
 
 :telescope: [Preview it on theme creator](https://theme-creator.discourse.org/theme/awesomerobot/discourse-search-banner)
 
 :question: [How do I install a theme component?](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
 
-
 :sparkling_heart: This very heavily borrows from [angus'](https://github.com/angusmcleod) header search component: https://meta.discourse.org/t/header-search-theme/67959
 
-
 ### Available settings
 
-* Set the headline and subhead text
-* Show the banner on all top-level topic pages (default), or just the homepage 
-* Set a background image
+- Set the headline and subhead text
+- Show the banner on all top-level topic pages (default), or just the homepage
+- Set a background image
 
 ### Custom styling
 
 The HTML element gets a class named `.display-search-banner` wherever this banner appears, and the banner itself is wrapped with the `.custom-search-banner` class, so with some CSS you should be able to customize the appearance of this banner however you see fit.
 
-
 ### Future enhancements
 
-* Add an option to enable the banner in specific categories
+- Add an option to enable the banner in specific categories

about.json

@@ -1,8 +1,8 @@
 {
   "name": "discourse-search-banner",
+  "component": true,
   "about_url": "https://meta.discourse.org/t/search-banner-theme-component/122939",
   "license_url": "https://github.com/awesomerobot/discourse-search-banner/blob/master/LICENSE",
-  "component": true,
   "assets": {},
   "color_schemes": {}
 }

javascripts/discourse/api-initializers/init-search-banner.js

@@ -17,25 +17,29 @@ export default apiInitializer("0.8", (api) => {
   // Simplified version of header search theme component
   const searchMenuWidget = api.container.factoryFor("widget:search-menu");
   const corePanelContents = searchMenuWidget.class.prototype["panelContents"];
+
   api.reopenWidget("search-menu", {
-    buildKey: function (attrs) {
+    buildKey(attrs) {
       let type = attrs.formFactor || "menu";
       return `search-${type}`;
     },
-    defaultState: function (attrs) {
+
+    defaultState(attrs) {
       return {
         formFactor: attrs.formFactor || "menu",
         showHeaderResults: false,
         inTopicContext: attrs.inTopicContext,
       };
     },
-    html: function (attrs, state) {
+
+    html(attrs, state) {
       if (this.state.formFactor === "widget") {
         return this.panelContents();
       } else {
         return this._super(attrs, state);
       }
     },
+
     mouseDownOutside() {
       const formFactor = this.state.formFactor;
       if (formFactor === "menu") {
@@ -45,16 +49,19 @@ export default apiInitializer("0.8", (api) => {
         this.scheduleRerender();
       }
     },
-    click: function () {
+
+    click() {
       const formFactor = this.state.formFactor;
       if (formFactor === "widget") {
         this.showResults();
       }
     },
-    showResults: function () {
+
+    showResults() {
       this.state.showHeaderResults = true;
       this.scheduleRerender();
     },
+
     linkClickedEvent(attrs) {
       const { searchLogId, searchResultId, searchResultType } = attrs;
       if (searchLogId && searchResultId && searchResultType) {
@@ -72,7 +79,8 @@ export default apiInitializer("0.8", (api) => {
         this.scheduleRerender();
       }
     },
-    panelContents: function () {
+
+    panelContents() {
       const formFactor = this.state.formFactor;
       let showHeaderResults =
         this.state.showHeaderResults == null ||
@@ -90,7 +98,7 @@ export default apiInitializer("0.8", (api) => {
       }
 
       contents = contents.concat(...corePanelContents.call(this));
-      let results = contents.find((w) => w.name == "search-menu-results");
+      let results = contents.find((w) => w.name === "search-menu-results");
       if (results && results.attrs.results) {
         $(".search-menu.search-header").addClass("has-results");
       } else {
@@ -101,20 +109,22 @@ export default apiInitializer("0.8", (api) => {
       } else {
         return contents.filter((widget) => {
           return (
-            widget.name != "search-menu-results" &&
-            widget.name != "search-context"
+            widget.name !== "search-menu-results" &&
+            widget.name !== "search-context"
           );
         });
       }
     },
   });
+
   api.createWidget("search-widget", {
     tagName: "div.search-widget",
   });
+
   api.decorateWidget("search-widget:after", function (helper) {
-    const searchWidget = helper.widget,
-      appController = helper.register.lookup("controller:application"),
-      searchMenuVisible = searchWidget.state.searchVisible;
+    const searchWidget = helper.widget;
+    const searchMenuVisible = searchWidget.state.searchVisible;
+
     if (!searchMenuVisible && !searchWidget.attrs.topic) {
       return helper.attach("search-menu", {
         contextEnabled: searchWidget.state.contextEnabled,

javascripts/discourse/components/search-banner.js

@@ -11,16 +11,16 @@ export default Component.extend({
   @discourseComputed("router.currentRouteName")
   displayForRoute(currentRouteName) {
     const showOn = settings.show_on;
-    if (showOn == "homepage") {
-      return currentRouteName == `discovery.${defaultHomepage()}`;
-    } else if (showOn == "top_menu") {
+    if (showOn === "homepage") {
+      return currentRouteName === `discovery.${defaultHomepage()}`;
+    } else if (showOn === "top_menu") {
       return this.siteSettings.top_menu
         .split("|")
-        .any((m) => `discovery.${m}` == currentRouteName);
+        .any((m) => `discovery.${m}` === currentRouteName);
     } else {
       // "all"
       return (
-        currentRouteName != "full-page-search" &&
+        currentRouteName !== "full-page-search" &&
         !currentRouteName.startsWith("admin.")
       );
     }
@@ -29,11 +29,11 @@ export default Component.extend({
   @discourseComputed("currentUser")
   displayForUser(currentUser) {
     const showFor = settings.show_for;
-    if (showFor == "everyone") {
+    if (showFor === "everyone") {
       return true;
-    } else if (showFor == "logged_out" && !currentUser) {
+    } else if (showFor === "logged_out" && !currentUser) {
       return true;
-    } else if (showFor == "logged_in" && currentUser) {
+    } else if (showFor === "logged_in" && currentUser) {
       return true;
     }
     return false;

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "discourse-search-banner",
+  "version": "1.0.0",
+  "repository": "https://github.com/discourse/discourse-search-banner",
+  "author": "Discourse",
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "eslint-config-discourse": "^3.1.0"
+  }
+}