Merge branch 'main' into jeremyf/refactoring-cached-tags-followed-by-…

…user

* main: (36 commits)
  Stripping tags from "tags.short_summary" column (#16248)
  Add host tag in ForemStatsClient (#16237)
  Configured the repository to handle line endings (#16234)
  Removed font-awesome from the admin section (#16239)
  fix (#16244)
  remove assignment of css variable to undefined (#16243)
  Add new tag autocomplete to editor (#16025)
  Color tokens (#16107)
  ListingsToolkit refactoring (#16184)
  Expanding the range of followed tags we show (#16213)
  Let override of ToS and CoC show in onboarding (#16217)
  Bump stripe from 5.42.0 to 5.43.0 (#16233)
  Bump flipper-active_record from 0.23.0 to 0.23.1 (#16231)
  Bump flipper-ui from 0.23.0 to 0.23.1 (#16232)
  Bump flipper-active_support_cache_store from 0.23.0 to 0.23.1 (#16230)
  Bump js-routes from 2.2.0 to 2.2.1 (#16229)
  Adds suggested_tags to Onboarding section in Config (#16228)
  Constantize broadcast messages (#16219)
  app/mailers i18n (#16191)
  Remove the "Getting Started" Section from the Config (#16033)
  ...

.gitattributes

@@ -1,8 +1,6 @@
-# Declare SVG files to have LF endings on checkout
-# On Windows, the default git setting for `core.autocrlf`
-# means that when checking out code, LF endings get converted
-# to CRLF.
-# *.svg text eol=lf
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
 *.rb   diff=ruby
 *.rake diff=ruby
 *.css  diff=css

.simplecov

@@ -1,18 +1,14 @@
 unless ENV["COVERAGE"] == "false"
   SimpleCov.start "rails" do
     add_filter "/spec/"
-    add_filter "/dashboards/"
     add_filter "/app/controllers/admin/"
-    add_filter "/app/black_box/"
-    add_filter "/app/fields/"
+    add_filter "/app/lib/black_box/"
     add_filter "/app/views/admin/"
 
-    # TODO: [thepracticaldev/oss] enable this when we upgrade to SimpleCov 0.18
-    # enable_coverage :branch
+    enable_coverage :branch
 
     add_group "Decorators", "app/decorators"
     add_group "Errors", "app/errors"
-    add_group "Labor", "app/labor"
     add_group "Liquid tags", "app/liquid_tags"
     add_group "Policies", "app/policies"
     add_group "Queries", "app/queries"

.travis.yml

@@ -10,11 +10,10 @@ cache:
 rvm:
   - 3.0.2
 addons:
-  postgresql: '12'
+  postgresql: '13'
   apt:
     packages:
-      - postgresql-12
-      - postgresql-client-12
+      - postgresql-13
   chrome: 'stable'
   artifacts:
     paths:
@@ -26,9 +25,9 @@ addons:
 env:
   global:
     - RAILS_ENV=test
-    - DATABASE_URL=postgres://travis@localhost:5433/Forem_prod_test
+    - DATABASE_URL=postgres://travis@localhost:5432/Forem_prod_test
     - DATABASE_NAME=Forem_prod_test
-    - DATABASE_URL_TEST=postgres://travis@localhost:5433/Forem_test
+    - DATABASE_URL_TEST=postgres://travis@localhost:5432/Forem_test
     - DATABASE_NAME_TEST=Forem_test
     # Dummy values needed to verify the app boots via "rails runner"
     - APP_PROTOCOL=http://
@@ -46,12 +45,8 @@ env:
 before_install:
   - sudo apt-get update
   - sudo apt-get -y install gsfonts
-  - >-
-    sudo sed -i
-    -e '/local.*peer/s/postgres/all/'
-    -e 's/peer\|md5/trust/g'
-    /etc/postgresql/12/main/pg_hba.conf
-  - sudo service postgresql@12-main restart
+  - sudo sed -i -e '/local.*peer/s/postgres/all/' -e 's/peer\|md5/trust/g' /etc/postgresql/*/main/pg_hba.conf
+  - sudo service postgresql restart
   - gem install bundler:"<2.3"
 install:
   - date --rfc-3339=seconds

Gemfile

@@ -33,16 +33,16 @@ gem "fastimage", "~> 2.2" # FastImage finds the size or type of an image given i
 gem "fastly", "~> 3.0" # Client library for the Fastly acceleration system
 gem "feedjira", "~> 3.2" # A feed fetching and parsing library
 gem "field_test", "~> 0.5" # A/B testing
-gem "flipper", "~> 0.23.0" # Feature flipping / flags for Ruby
-gem "flipper-active_record", "~> 0.23.0" # Store Flipper flags in ActiveRecord
-gem "flipper-active_support_cache_store", "~> 0.23.0" # Cache feature flags for a short time
-gem "flipper-ui", "~> 0.23.0"
+gem "flipper", "~> 0.23.1" # Feature flipping / flags for Ruby
+gem "flipper-active_record", "~> 0.23.1" # Store Flipper flags in ActiveRecord
+gem "flipper-active_support_cache_store", "~> 0.23.1" # Cache feature flags for a short time
+gem "flipper-ui", "~> 0.23.1"
 gem "fog-aws", "~> 3.12" # 'fog' gem to support Amazon Web Services
 gem "front_matter_parser", "~> 1.0" # Parse a front matter from syntactically correct strings or files
 gem "gemoji", "~> 4.0.0.rc3" # Character information and metadata for standard and custom emoji
 gem "gibbon", "~> 3.4" # API wrapper for MailChimp's API
 gem "hairtrigger", "~> 0.2.24" # HairTrigger lets you create and manage database triggers in a concise, db-agnostic, Rails-y way.
-gem "honeybadger", "~> 4.9" # Used for tracking application errors
+gem "honeybadger", "~> 4.10" # Used for tracking application errors
 gem "honeycomb-beeline", "~> 2.8.1" # Monitoring and Observability gem
 gem "html_truncator", "~> 0.4" # Truncate an HTML string properly
 gem "httparty", "~> 0.20" # Makes http fun! Also, makes consuming restful web services dead easy
@@ -101,7 +101,7 @@ gem "slack-notifier", "~> 2.4" # A slim ruby wrapper for posting to slack webhoo
 gem "sprockets", "~> 4.0" # Sprockets is a Rack-based asset packaging system
 gem "staccato", "~> 0.5" # Ruby Google Analytics Measurement
 gem "sterile", "~> 1.0" # Transliterate Unicode and Latin1 text to 7-bit ASCII for URLs
-gem "stripe", "~> 5.42" # Ruby library for the Stripe API
+gem "stripe", "~> 5.43" # Ruby library for the Stripe API
 gem "strong_migrations", "~> 0.7" # Catch unsafe migrations
 gem "twitter", "~> 7.0" # A Ruby interface to the Twitter API
 gem "uglifier", "~> 4.2" # Uglifier minifies JavaScript files
@@ -140,7 +140,7 @@ group :development, :test do
   gem "pry", "~> 0.14" # An IRB alternative and runtime developer console
   gem "pry-rails", "~> 0.3" # Use Pry as your rails console
   gem "rspec-rails", "~> 5.0" # rspec-rails is a testing framework for Rails 3+
-  gem "rubocop", "~> 1.24", require: false # Automatic Ruby code style checking tool
+  gem "rubocop", "~> 1.25", require: false # Automatic Ruby code style checking tool
   gem "rubocop-performance", "~> 1.13", require: false # A collection of RuboCop cops to check for performance optimizations in Ruby code
   gem "rubocop-rails", "~> 2.13", require: false # Automatic Rails code style checking tool
   gem "rubocop-rspec", "~> 2.7", require: false # Code style checking for RSpec files

Gemfile.lock

@@ -288,16 +288,16 @@ GEM
       browser (>= 2.0)
       railties (>= 5.2)
       rice (>= 4.0.2)
-    flipper (0.23.0)
-    flipper-active_record (0.23.0)
+    flipper (0.23.1)
+    flipper-active_record (0.23.1)
       activerecord (>= 4.2, < 8)
-      flipper (~> 0.23.0)
-    flipper-active_support_cache_store (0.23.0)
+      flipper (~> 0.23.1)
+    flipper-active_support_cache_store (0.23.1)
       activesupport (>= 4.2, < 8)
-      flipper (~> 0.23.0)
-    flipper-ui (0.23.0)
+      flipper (~> 0.23.1)
+    flipper-ui (0.23.1)
       erubi (>= 1.0.0, < 2.0.0)
-      flipper (~> 0.23.0)
+      flipper (~> 0.23.1)
       rack (>= 1.4, < 3)
       rack-protection (>= 1.5.3, < 2.2.0)
       sanitize (< 7)
@@ -358,7 +358,7 @@ GEM
       thor
     highline (2.0.3)
     hkdf (0.3.0)
-    honeybadger (4.9.0)
+    honeybadger (4.10.0)
     honeycomb-beeline (2.8.1)
       libhoney (~> 1.14, >= 1.14.2)
     html_tokenizer (0.0.7)
@@ -417,7 +417,7 @@ GEM
       actionpack (>= 3.1)
       railties (>= 3.1)
       sass (>= 3.2)
-    js-routes (2.2.0)
+    js-routes (2.2.1)
       railties (>= 4)
     json (2.5.1)
     jsonapi-serializer (2.2.0)
@@ -688,9 +688,9 @@ GEM
     rspec-support (3.10.2)
     rss (0.2.9)
       rexml
-    rubocop (1.24.1)
+    rubocop (1.25.0)
       parallel (~> 1.10)
-      parser (>= 3.0.0.0)
+      parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml
@@ -810,7 +810,7 @@ GEM
     stackprof (0.2.17)
     sterile (1.0.23)
       nokogiri (>= 1.11.7)
-    stripe (5.42.0)
+    stripe (5.43.0)
     stripe-ruby-mock (3.1.0.rc3)
       dante (>= 0.2.0)
       multi_json (~> 1.0)
@@ -936,18 +936,18 @@ DEPENDENCIES
   fastly (~> 3.0)
   feedjira (~> 3.2)
   field_test (~> 0.5)
-  flipper (~> 0.23.0)
-  flipper-active_record (~> 0.23.0)
-  flipper-active_support_cache_store (~> 0.23.0)
-  flipper-ui (~> 0.23.0)
+  flipper (~> 0.23.1)
+  flipper-active_record (~> 0.23.1)
+  flipper-active_support_cache_store (~> 0.23.1)
+  flipper-ui (~> 0.23.1)
   fog-aws (~> 3.12)
   front_matter_parser (~> 1.0)
   gemoji (~> 4.0.0.rc3)
   gibbon (~> 3.4)
   guard (~> 2.18)
   guard-livereload (~> 2.5)
   hairtrigger (~> 0.2.24)
-  honeybadger (~> 4.9)
+  honeybadger (~> 4.10)
   honeycomb-beeline (~> 2.8.1)
   html_truncator (~> 0.4)
   httparty (~> 0.20)
@@ -1008,7 +1008,7 @@ DEPENDENCIES
   rspec-rails (~> 5.0)
   rspec-retry (~> 0.6)
   rss (~> 0.2.9)
-  rubocop (~> 1.24)
+  rubocop (~> 1.25)
   rubocop-performance (~> 1.13)
   rubocop-rails (~> 2.13)
   rubocop-rspec (~> 2.7)
@@ -1029,7 +1029,7 @@ DEPENDENCIES
   staccato (~> 0.5)
   stackprof (~> 0.2)
   sterile (~> 1.0)
-  stripe (~> 5.42)
+  stripe (~> 5.43)
   stripe-ruby-mock (= 3.1.0.rc3)
   strong_migrations (~> 0.7)
   test-prof (~> 1.0)

app/assets/javascripts/initializers/initScrolling.js

@@ -105,7 +105,7 @@ function buildTagsHTML(tag) {
   var antifollow = '';
   if (tag.points < 0) {
     antifollow =
-      '<span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined" title="This tag has negative follow weight">Anti-follow</span>';
+      '<span class="c-indicator c-indicator--danger" title="This tag has negative follow weight">Anti-follow</span>';
   }
 
   return `<div class="crayons-card p-4 m:p-6 flex flex-col single-article" id="follows-${tag.id}" style="border: 1px solid ${tag.color}; box-shadow: 3px 3px 0 ${tag.color}">

app/assets/stylesheets/base/main.scss

@@ -57,7 +57,7 @@ body {
 }
 
 a {
-  color: var(--link-brand-color);
+  color: var(--link-branded-color);
   text-decoration: none;
 }
 

app/assets/stylesheets/base/typography.scss

@@ -86,10 +86,10 @@ body {
 
   a {
     text-decoration: underline;
-    color: var(--accent-brand);
+    color: var(--link-branded-color);
 
     &:hover {
-      color: var(--accent-brand-darker);
+      color: var(--link-branded-color-hover);
     }
   }
 

app/assets/stylesheets/components/autocomplete.scss

@@ -60,7 +60,7 @@
 }
 
 .c-autocomplete--multi {
-  &__wrapper:focus-within {
+  &__wrapper-border:focus-within {
     @extend %form-styling-focus;
 
     .c-autocomplete--multi__input {
@@ -69,12 +69,18 @@
   }
 
   &__input {
-    background-color: var(--form-bg);
+    background-color: var(--bg-color);
     color: var(--body-color);
     border: none;
   }
 
-  .crayons-btn.c-autocomplete--multi__selected {
+  &__wrapper-border {
+    .c-autocomplete--multi__input {
+      background-color: var(--form-bg);
+    }
+  }
+
+  .c-btn.c-autocomplete--multi__selected {
     &:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
@@ -91,7 +97,11 @@
     }
   }
 
-  ul.c-autocomplete--multi__popover {
+  .c-autocomplete--multi__popover {
+    position: absolute;
+    max-height: 500px;
+    overflow: auto;
+    width: 100%;
     padding: var(--su-1);
     z-index: var(--z-elevate);
     background: var(--card-bg);

app/assets/stylesheets/components/buttons.scss

@@ -151,10 +151,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
   --bg-hover: var(--button-secondary-bg-hover);
   --color: var(--button-secondary-color);
   --color-hover: var(--button-secondary-color-hover);
-  --bg-inverted: var(--button-secondary-inverted-bg);
-  --bg-inverted-hover: var(--button-secondary-inverted-bg-hover);
-  --color-inverted: var(--button-secondary-inverted-color);
-  --color-inverted-hover: var(--button-secondary-inverted-color-hover);
 }
 
 .crayons-btn--outlined {
@@ -164,12 +160,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
   --border-hover: var(--button-outlined-border-hover);
   --color: var(--button-outlined-color);
   --color-hover: var(--button-outlined-color-hover);
-  --bg-inverted: var(--button-outlined-inverted-bg);
-  --bg-inverted-hover: var(--button-outlined-inverted-bg-hover);
-  --border-inverted: var(--button-outlined-inverted-border);
-  --border-inverted-hover: var(--button-outlined-inverted-border-hover);
-  --color-inverted: var(--button-outlined-inverted-color);
-  --color-inverted-hover: var(--button-outlined-inverted-color-hover);
 
   --border-width: 2px;
 }
@@ -204,10 +194,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
     --color-hover: var(--accent-brand-darker);
     --shadow: none;
     --shadow-hover: none;
-    --bg-inverted: var(--button-ghost-inverted-bg);
-    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
-    --color-inverted: var(--accent-brand-lighter);
-    --color-inverted-hover: var(--accent-brand-lighter);
   }
 
   &-dimmed {
@@ -217,10 +203,6 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
     --color-hover: var(--button-ghost-dimmed-color-hover);
     --shadow: none;
     --shadow-hover: none;
-    --bg-inverted: var(--button-ghost-inverted-bg);
-    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
-    --color-inverted: var(--accent-ghost-dimmed-inverted-color);
-    --color-inverted-hover: var(--accent-ghost-dimmed-inverted-color-hover);
   }
 
   &-success {
@@ -236,30 +218,13 @@ label[class*='crayons-btn']:focus-within // label for input[type="file"] made to
     --color-inverted-hover: var(--accent-success-darker);
   }
 
-  &-warning {
-    --bg: var(--button-ghost-bg);
-    --bg-hover: var(--button-ghost-bg-hover);
-    --color: var(--accent-warning);
-    --color-hover: var(--accent-warning-darker);
-    --shadow: none;
-    --shadow-hover: none;
-    --bg-inverted: var(--button-ghost-inverted-bg);
-    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
-    --color-inverted: var(--accent-warning);
-    --color-inverted-hover: var(--accent-warning-darker);
-  }
-
   &-danger {
     --bg: var(--button-ghost-bg);
     --bg-hover: var(--button-ghost-bg-hover);
     --color: var(--accent-danger);
     --color-hover: var(--accent-danger-darker);
     --shadow: none;
     --shadow-hover: none;
-    --bg-inverted: var(--button-ghost-inverted-bg);
-    --bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
-    --color-inverted: var(--accent-danger);
-    --color-inverted-hover: var(--accent-danger-lighter);
   }
 }
 

app/assets/stylesheets/components/cards.scss

@@ -14,8 +14,7 @@
   }
 
   &--elevated {
-    box-shadow: 0 0 0 1px var(--card-secondary-border), 0 1px 3px var(--base-a5),
-      0 3px 9px var(--base-a5);
+    box-shadow: var(--shadow-1);
   }
 
   &--content-rows {

app/assets/stylesheets/components/drawer-navigation.scss

@@ -10,13 +10,13 @@
     }
 
     a[aria-current='page'] {
-      color: var(--link-brand-color);
+      color: var(--link-branded-color);
     }
 
     .check-icon {
       vertical-align: middle;
       display: none;
-      color: var(--link-brand-color);
+      color: var(--link-branded-color);
     }
 
     a[aria-current='page'] + .check-icon {