chore(deps): add tailwindcss [DTD-29] (#6604)

.storybook/main.js

@@ -16,6 +16,9 @@ module.exports = {
             exportLocalsConvention: 'camelCaseOnly',
           },
         },
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
       },
     },
   ],

app/assets/css/app.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body,
 #page-wrapper,
@@ -812,75 +816,6 @@ json-tree .branch-preview {
   padding-bottom: 5px;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.flex {
-  display: flex;
-}
-
-.block {
-  display: block;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.space-x-2 > * + * {
-  margin-left: 0.5rem;
-}
-
-.space-x-3 > * + * {
-  margin-left: 0.75rem;
-}
-
-.space-x-4 > * + * {
-  margin-left: 1rem;
-}
-
-.space-y-8 > * + * {
-  margin-top: 2rem;
-}
-
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.m-l-5 {
-  margin-left: 5px;
-}
-
-.m-l-20 {
-  margin-left: 20px;
-}
-
-.m-l-30 {
-  margin-left: 30px;
-}
-
-.m-r-2 {
-  margin-right: 2px;
-}
-
-.m-r-5 {
-  margin-right: 5px;
-}
-
-.m-t-10 {
-  margin-top: 10px;
-}
-
-.m-t-10 {
-  margin-top: 10px;
-}
-
-.m-b-10 {
-  margin-bottom: 10px;
-}
-
 .no-margin {
   margin: 0 !important;
 }
@@ -889,54 +824,6 @@ json-tree .branch-preview {
   border: none;
 }
 
-.dispay-flex {
-  display: flex;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.ml-0 {
-  margin-left: 0rem;
-}
-
-.ml-1 {
-  margin-left: 0.25rem;
-}
-
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.ml-5 {
-  margin-left: 1.25rem;
-}
-
-.ml-5 {
-  margin-left: 1.5rem;
-}
-
-.ml-6 {
-  margin-left: 1.75rem;
-}
-
-.ml-7 {
-  margin-left: 2rem;
-}
-
-.ml-8 {
-  margin-left: 2.25rem;
-}
-
 .text-wrap {
   word-break: break-all;
   white-space: normal;
@@ -947,10 +834,6 @@ json-tree .branch-preview {
   cursor: not-allowed;
 }
 
-.space-x-1 {
-  margin-left: 0.25rem;
-}
-
 /* used for bootbox prompt with inputType radio */
 .form-check.radio {
   margin-left: 15px;

app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html

@@ -1,8 +1,8 @@
 <div class="form-group">
   <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
     Connectivity check
-    <i class="fa fa-check green-icon m-l-5" ng-if="$ctrl.state.successfulConnectivityCheck"></i>
+    <i class="fa fa-check green-icon ml-2" ng-if="$ctrl.state.successfulConnectivityCheck"></i>
-    <i class="fa fa-times red-icon m-l-5" ng-if="$ctrl.state.failedConnectivityCheck"></i>
+    <i class="fa fa-times red-icon ml-2" ng-if="$ctrl.state.failedConnectivityCheck"></i>
   </label>
   <div class="col-sm-9 col-lg-10">
     <button

app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html

@@ -4,7 +4,7 @@
 
 <rd-widget ng-repeat="config in $ctrl.settings.AdminGroupSearchSettings | limitTo: (1 - $ctrl.settings.AdminGroupSearchSettings)">
   <rd-widget-body>
-    <div class="form-group m-b-10" ng-if="$index > 0">
+    <div class="form-group mb-3" ng-if="$index > 0">
       <span class="col-sm-12 text-muted small"> Extra search configuration </span>
     </div>
 
@@ -72,7 +72,7 @@
   </rd-widget-body>
 </rd-widget>
 
-<div class="form-group m-t-10">
+<div class="form-group mt-3">
   <div class="col-sm-12">
     <button
       class="label label-default interactive no-border"
@@ -84,7 +84,7 @@
       <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
     </button>
   </div>
-  <div class="col-sm-12 m-t-10">
+  <div class="col-sm-12 mt-3">
     <button
       class="btn btm-sm btn-primary"
       type="button"
@@ -96,14 +96,14 @@
     >
       Fetch Admin Group(s)
     </button>
-    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="m-l-30"> <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i> No groups found</span>
+    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-5"> <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i> No groups found</span>
   </div>
 </div>
 
 <div class="form-group">
   <div class="col-sm-12">
     <label for="admin-auto-populate" class="control-label text-left text-muted" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }"> Assign admin rights to group(s) </label>
-    <label class="switch m-l-20" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
+    <label class="switch ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
       <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" /><i></i>
     </label>
   </div>
@@ -113,7 +113,7 @@
   <div class="col-sm-12">
     <label for="group-access" class="control-label text-left"> Select Group(s) </label>
     <span
-      class="m-l-20"
+      class="ml-7"
       isteven-multi-select
       ng-if="$ctrl.enableAssignAdminGroup"
       input-model="$ctrl.groups"

app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html

@@ -10,7 +10,7 @@
 <div class="form-group">
   <div class="col-sm-12 small text-muted">
     <p>
-      <i class="fa fa-info-circle blue-icon m-r-2" aria-hidden="true"></i>
+      <i class="fa fa-info-circle blue-icon mr-1" aria-hidden="true"></i>
       You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the
       same certificates).
     </p>
@@ -18,7 +18,7 @@
 </div>
 
 <div class="form-group">
-  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left dispay-flex flex-wrap">
+  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left flex flex-wrap">
     LDAP Server
     <button
       type="button"
@@ -32,7 +32,7 @@
     </button>
   </label>
   <div class="col-sm-9 col-lg-10">
-    <div class="m-b-10 dispay-flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
+    <div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
       <input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
       <button ng-if="$index > 0" class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLDAPUrl($index)">
         <i class="fa fa-trash" aria-hidden="true"></i>
@@ -97,35 +97,39 @@
   connectivity-check="$ctrl.connectivityCheck"
 ></ldap-connectivity-check>
 
-<ldap-custom-user-search
+<div class="space-y-10">
-  class="m-r-5"
+  <ldap-custom-user-search
-  settings="$ctrl.settings.SearchSettings"
+    class="block"
-  on-search-click="($ctrl.onSearchUsersClick)"
+    settings="$ctrl.settings.SearchSettings"
-  limited-feature-id="$ctrl.limitedFeatureId"
+    on-search-click="($ctrl.onSearchUsersClick)"
-></ldap-custom-user-search>
+    limited-feature-id="$ctrl.limitedFeatureId"
-<ldap-custom-group-search
+  ></ldap-custom-user-search>
-  class="m-r-5"
-  settings="$ctrl.settings.GroupSearchSettings"
-  on-search-click="($ctrl.onSearchGroupsClick)"
-  limited-feature-id="$ctrl.limitedFeatureId"
-></ldap-custom-group-search>
 
-<ldap-custom-admin-group
+  <ldap-custom-group-search
-  class="m-r-5"
+    class="block"
-  settings="$ctrl.settings"
+    settings="$ctrl.settings.GroupSearchSettings"
-  on-search-click="($ctrl.onSearchAdminGroupsClick)"
+    on-search-click="($ctrl.onSearchGroupsClick)"
-  selected-admin-groups="$ctrl.selectedAdminGroups"
+    limited-feature-id="$ctrl.limitedFeatureId"
-  default-admin-group-search-filter="'(objectClass=groupOfNames)'"
+  ></ldap-custom-group-search>
-  limited-feature-id="$ctrl.limitedFeatureId"
-  is-limited-feature-self-contained="true"
-></ldap-custom-admin-group>
 
-<ldap-settings-test-login
+  <ldap-custom-admin-group
-  settings="$ctrl.settings"
+    class="block"
-  limited-feature-id="$ctrl.limitedFeatureId"
+    settings="$ctrl.settings"
-  show-be-indicator-if-needed="true"
+    on-search-click="($ctrl.onSearchAdminGroupsClick)"
-  is-limited-feature-self-contained="true"
+    selected-admin-groups="$ctrl.selectedAdminGroups"
-></ldap-settings-test-login>
+    default-admin-group-search-filter="'(objectClass=groupOfNames)'"
+    limited-feature-id="$ctrl.limitedFeatureId"
+    is-limited-feature-self-contained="true"
+  ></ldap-custom-admin-group>
+
+  <ldap-settings-test-login
+    class="block"
+    settings="$ctrl.settings"
+    limited-feature-id="$ctrl.limitedFeatureId"
+    show-be-indicator-if-needed="true"
+    is-limited-feature-self-contained="true"
+  ></ldap-settings-test-login>
+</div>
 
 <save-auth-settings-button
   on-save-settings="($ctrl.onSaveSettings)"

app/portainer/user-activity/activity-logs-view/activity-logs-view.html

@@ -25,7 +25,7 @@
       </p>
 
       <div>
-        <button type="button" class="btn btn-sm btn-primary m-r-10" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
+        <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
           <i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV
         </button>
         <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>

app/portainer/user-activity/auth-logs-view/auth-logs-view.html

@@ -25,7 +25,7 @@
       </p>
 
       <div>
-        <button type="button" class="btn btn-sm btn-primary m-r-10" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled
+        <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled
           ><i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV
         </button>
         <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>

package.json

@@ -134,6 +134,7 @@
     "spinkit": "^2.0.1",
     "splitargs": "github:deviantony/splitargs#semver:~0.2.0",
     "strip-ansi": "^6.0.0",
+    "tailwindcss": "^3.0.23",
     "toastr": "^2.1.4",
     "ui-select": "^0.19.8",
     "uuid": "^3.3.2",
@@ -174,16 +175,16 @@
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "auto-ngtemplate-loader": "^2.0.1",
-    "autoprefixer": "^7.1.1",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-i18next-extract": "^0.8.3",
     "babel-plugin-lodash": "^3.3.4",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "6",
+    "copy-webpack-plugin": "^10.2.0",
-    "css-loader": "5",
+    "css-loader": "^6.6.0",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.16",
     "cypress": "8.7",
     "cypress-wait-until": "^1.7.1",
     "dotenv-webpack": "^7.0.3",
@@ -207,7 +208,6 @@
     "grunt-contrib-copy": "^1.0.0",
     "grunt-env": "^0.4.4",
     "grunt-filerev": "^2.3.1",
-    "grunt-postcss": "^0.8.0",
     "grunt-replace": "^1.0.1",
     "grunt-shell-spawn": "^0.4.0",
     "grunt-usemin": "^3.1.1",
@@ -220,18 +220,18 @@
     "lint-staged": ">=10",
     "load-grunt-tasks": "^3.5.2",
     "lodash-webpack-plugin": "^0.11.6",
-    "mini-css-extract-plugin": "1",
+    "mini-css-extract-plugin": "^2.5.3",
     "msw-storybook-addon": "^1.5.0",
     "ngtemplate-loader": "^2.1.0",
     "plop": "^2.6.0",
-    "postcss": "7",
+    "postcss": "^8.4.6",
-    "postcss-loader": "4",
+    "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "react-test-renderer": "^17.0.2",
     "source-map-loader": "^3.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
     "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "2",
+    "style-loader": "^3.3.1",
     "swagger2openapi": "^7.0.8",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.2",
@@ -251,12 +251,13 @@
     "http-proxy": "^1.18.1",
     "**/@uirouter/react": "^1.0.7",
     "**/@uirouter/angularjs": "1.0.11",
-    "**/css-loader": "5",
+    "**/css-loader": "^6.6.0",
     "**/moment": "^2.21.0"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "browserslist": "last 2 versions"
 }

postcss.config.js

@@ -1,8 +1,9 @@
 module.exports = ({ env }) => ({
-  plugins: {
+  plugins: [
     // add vendor prefixes
-    autoprefixer: { browsers: 'last 2 versions' },
+    require('autoprefixer'),
     // minify the result
-    cssnano: env !== 'development' ? {} : false,
+    env !== 'development' && require('cssnano'),
-  },
+    require('tailwindcss'),
+  ],
 });

tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  content: ['./app/**/*.{html,tsx}'],
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    colors: {},
+  },
+};

webpack/webpack.common.js

@@ -78,7 +78,9 @@ module.exports = {
               },
             },
           },
-          'postcss-loader',
+          {
+            loader: 'postcss-loader',
+          },
         ],
       },
     ],