feat: Super admin design improvements (#8517)

- Revamp the super admin design - Introduce a new settings page for support and billing settings - Move the access tokens into users, agent bots and platform app show pages Co-authored-by: Sojan <sojan@pepalo.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
chatwoot · Dec 9, 2023 · f002870 · f002870
1 parent b1a6875
commit f002870
Show file tree

Hide file tree

Showing 39 changed files with 571 additions and 342 deletions.
diff --git a/app/assets/stylesheets/administrate/application.scss b/app/assets/stylesheets/administrate/application.scss
@@ -25,7 +25,6 @@
 @import 'components/flashes';
 @import 'components/form-actions';
 @import 'components/main-content';
-@import 'components/navigation';
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';

diff --git a/app/assets/stylesheets/administrate/base/_layout.scss b/app/assets/stylesheets/administrate/base/_layout.scss
@@ -1,7 +1,7 @@
 html {
   background-color: $color-white;
   box-sizing: border-box;
-  font-size: 10px;
+  font-size: 16px;
   -webkit-font-smoothing: antialiased;
 }
 

diff --git a/app/assets/stylesheets/administrate/components/_attributes.scss b/app/assets/stylesheets/administrate/components/_attributes.scss
@@ -16,8 +16,8 @@
 .attribute-data {
   float: left;
   margin-bottom: $base-spacing;
-  margin-left: 2rem;
-  width: calc(84% - 1rem);
+  margin-left: 1.25rem;
+  width: calc(84% - 0.625rem);
 }
 
 .attribute--nested {

diff --git a/app/assets/stylesheets/administrate/components/_field-unit.scss b/app/assets/stylesheets/administrate/components/_field-unit.scss
@@ -9,22 +9,22 @@
 
 .field-unit__label {
   float: left;
-  margin-left: 1rem;
+  margin-left: 0.625rem;
   text-align: right;
-  width: calc(15% - 1rem);
+  width: calc(15% - 0.625rem);
 }
 
 .field-unit__field {
   float: left;
-  margin-left: 2rem;
-  max-width: 50rem;
+  margin-left: 1.25rem;
+  max-width: 31.15rem;
   width: 100%;
 }
 
 .field-unit--nested {
   border: $base-border;
   margin-left: 7.5%;
-  max-width: 60rem;
+  max-width: 37.5rem;
   padding: $small-spacing;
   width: 100%;
 

diff --git a/app/assets/stylesheets/administrate/components/_form-actions.scss b/app/assets/stylesheets/administrate/components/_form-actions.scss
@@ -1,3 +1,3 @@
 .form-actions {
-  margin-left: calc(15% + 2rem);
+  margin-left: calc(15% + 1.25rem);
 }
diff --git a/app/assets/stylesheets/administrate/components/_main-content.scss b/app/assets/stylesheets/administrate/components/_main-content.scss
@@ -13,14 +13,18 @@
   table {
     font-size: $font-size-small;
   }
+
+  form {
+    margin-top: $space-two;
+  }
 }
 
 .main-content__header {
   align-items: center;
   background-color: $color-white;
   border-bottom: 1px solid $color-border;
   display: flex;
-  min-height: 5.6rem;
+  min-height: 3.5rem;
   padding: $space-small $space-normal;
 }
 

diff --git a/app/assets/stylesheets/administrate/components/_navigation.scss b/app/assets/stylesheets/administrate/components/_navigation.scss
diff --git a/app/assets/stylesheets/administrate/components/_search.scss b/app/assets/stylesheets/administrate/components/_search.scss
@@ -1,7 +1,7 @@
 .search {
   margin-left: auto;
-  margin-right: 2rem;
-  max-width: 44rem;
+  margin-right: 1.25rem;
+  max-width: 27.5rem;
   position: relative;
   width: 100%;
 }

diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss
@@ -1,10 +1,10 @@
 // Typography
-$base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+$base-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
   "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif !default;
 $heading-font-family: $base-font-family !default;
 
-$base-font-size: 14px !default;
+$base-font-size: 16px !default;
 
 $base-line-height: 1.5 !default;
 $heading-line-height: 1.2 !default;

diff --git a/app/assets/stylesheets/administrate/utilities/_variables.scss b/app/assets/stylesheets/administrate/utilities/_variables.scss
@@ -1,30 +1,30 @@
 // Font sizes
-$font-size-nano: 0.8rem;
-$font-size-micro: 1.0rem;
-$font-size-mini: 1.2rem;
-$font-size-small: 1.4rem;
-$font-size-default: 1.6rem;
-$font-size-medium: 1.8rem;
-$font-size-large: 2.2rem;
-$font-size-big: 2.4rem;
-$font-size-bigger: 3.0rem;
-$font-size-mega: 3.4rem;
-$font-size-giga: 4.0rem;
+$font-size-nano: 0.5rem;
+$font-size-micro: 0.675rem;
+$font-size-mini: 0.75rem;
+$font-size-small: 0.875rem;
+$font-size-default: 1rem;
+$font-size-medium: 1.125rem;
+$font-size-large: 1.375rem;
+$font-size-big: 1.5rem;
+$font-size-bigger: 1.75rem;
+$font-size-mega: 2.125rem;
+$font-size-giga: 2.5rem;
 
 // spaces
 $zero: 0;
-$space-micro: 0.2rem;
-$space-smaller: 0.4rem;
-$space-small: 0.8rem;
-$space-one: 1rem;
-$space-slab: 1.2rem;
-$space-normal: 1.6rem;
-$space-two: 2.0rem;
-$space-medium: 2.4rem;
-$space-large: 3.2rem;
-$space-larger: 4.8rem;
-$space-jumbo: 6.4rem;
-$space-mega: 10.0rem;
+$space-micro: 0.125rem;
+$space-smaller: 0.25rem;
+$space-small: 0.5rem;
+$space-one: 0.675rem;
+$space-slab: 0.75rem;
+$space-normal: 1rem;
+$space-two: 1.25rem;
+$space-medium: 1.5rem;
+$space-large: 2rem;
+$space-larger: 3rem;
+$space-jumbo: 4rem;
+$space-mega: 6.25rem;
 
 // font-weight
 $font-weight-feather: 100;

diff --git a/app/controllers/super_admin/application_controller.rb b/app/controllers/super_admin/application_controller.rb
@@ -20,4 +20,13 @@ def order
       params.fetch(resource_name, {}).fetch(:direction, 'desc')
     )
   end
+
+  private
+
+  def invalid_action_perfomed
+    # rubocop:disable Rails/I18nLocaleTexts
+    flash[:error] = 'Invalid action performed'
+    # rubocop:enable Rails/I18nLocaleTexts
+    redirect_back(fallback_location: root_path)
+  end
 end
diff --git a/app/controllers/super_admin/installation_configs_controller.rb b/app/controllers/super_admin/installation_configs_controller.rb
@@ -1,4 +1,5 @@
 class SuperAdmin::InstallationConfigsController < SuperAdmin::ApplicationController
+  rescue_from ActiveRecord::RecordNotUnique, :with => :invalid_action_perfomed
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #

diff --git a/app/controllers/super_admin/settings_controller.rb b/app/controllers/super_admin/settings_controller.rb
@@ -0,0 +1,10 @@
+class SuperAdmin::SettingsController < SuperAdmin::ApplicationController
+  def show; end
+
+  def refresh
+    Internal::CheckNewVersionsJob.perform_now
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: 'Instance status refreshed'
+    # rubocop:enable Rails/I18nLocaleTexts
+  end
+end
diff --git a/app/dashboards/access_token_dashboard.rb b/app/dashboards/access_token_dashboard.rb
@@ -30,11 +30,7 @@ class AccessTokenDashboard < Administrate::BaseDashboard
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.
   SHOW_PAGE_ATTRIBUTES = %i[
-    owner
-    id
     token
-    created_at
-    updated_at
   ].freeze
 
   # FORM_ATTRIBUTES

diff --git a/app/dashboards/agent_bot_dashboard.rb b/app/dashboards/agent_bot_dashboard.rb
@@ -46,6 +46,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
     name
     description
     outgoing_url
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

diff --git a/app/dashboards/platform_app_dashboard.rb b/app/dashboards/platform_app_dashboard.rb
@@ -32,6 +32,7 @@ class PlatformAppDashboard < Administrate::BaseDashboard
     name
     created_at
     updated_at
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

diff --git a/app/dashboards/user_dashboard.rb b/app/dashboards/user_dashboard.rb
@@ -36,7 +36,8 @@ class UserDashboard < Administrate::BaseDashboard
     updated_at: Field::DateTime,
     pubsub_token: Field::String,
     type: Field::Select.with_options(collection: [nil, 'SuperAdmin']),
-    accounts: CountField
+    accounts: CountField,
+    access_token: Field::HasOne
   }.freeze
 
   # COLLECTION_ATTRIBUTES
@@ -67,6 +68,7 @@ class UserDashboard < Administrate::BaseDashboard
     updated_at
     confirmed_at
     account_users
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

diff --git a/app/javascript/dashboard/assets/scss/super_admin/index.scss b/app/javascript/dashboard/assets/scss/super_admin/index.scss
@@ -1,39 +1,8 @@
-@import '../variables';
+@import 'shared/assets/fonts/inter';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-.superadmin-body {
-  background: var(--color-background);
-
-  .hero--title {
-    font-size: var(--font-size-mega);
-    font-weight: var(--font-weight-light);
-    margin-top: var(--space-large);
-  }
-
-  .update-subscription--checkbox {
-    display: flex;
-
-    input {
-      line-height: 1.5;
-      margin-right: var(--space-one);
-      margin-top: var(--space-smaller);
-    }
-
-    label {
-      font-size: var(--font-size-small);
-      line-height: 1.5;
-      margin-bottom: var(--space-normal);
-    }
-  }
+body {
+  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
-
-.alert-box {
-  background-color: var(--r-500);
-  border-radius: 5px;
-  color: var(--color-white);
-  font-size: 14px;
-  margin-bottom: 14px;
-  padding: 10px;
-  text-align: center;
-}
-
-
diff --git a/app/javascript/dashboard/assets/scss/super_admin/pages.scss b/app/javascript/dashboard/assets/scss/super_admin/pages.scss
diff --git a/app/javascript/packs/superadmin.js b/app/javascript/packs/superadmin.js
@@ -1,2 +1 @@
-import '../dashboard/assets/scss/app.scss';
 import '../dashboard/assets/scss/super_admin/index.scss';
diff --git a/app/javascript/packs/superadmin_pages.js b/app/javascript/packs/superadmin_pages.js
@@ -1,2 +1 @@
-import '../dashboard/assets/scss/super_admin/pages.scss';
 import 'chart.js';