Merge branch 'mk/service-accounts-ui' into feat/service-accounts

Author: skipi

.semaphore/daily-builds.yml

@@ -725,11 +725,11 @@ blocks:
       jobs:
         - name: JS - dependencies
           commands:
-            - make check.js.deps APP_DIRECTORY=assets
+            - make check.js.deps APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: JS - code
           commands:
             - export PATH=$PATH:/home/semaphore/.local/bin
-            - make check.js.code APP_DIRECTORY=assets
+            - make check.js.code APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: Elixir - dependencies
           commands:
             - make check.ex.deps CHECK_DEPS_OPTS='--ignore-packages phoenix'

.semaphore/semaphore.yml

@@ -789,11 +789,11 @@ blocks:
       jobs:
         - name: JS - dependencies
           commands:
-            - make check.js.deps APP_DIRECTORY=assets
+            - make check.js.deps APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: JS - code
           commands:
             - export PATH=$PATH:/home/semaphore/.local/bin
-            - make check.js.code APP_DIRECTORY=assets
+            - make check.js.code APP_DIRECTORY=assets SCAN_RESULT_DIR=../out
         - name: Elixir - dependencies
           commands:
             - make check.ex.deps CHECK_DEPS_OPTS='--ignore-packages phoenix'

Makefile

@@ -76,6 +76,7 @@ DOCKER_BUILD_PATH=.
 EX_CATCH_WARRNINGS_FLAG=--warnings-as-errors
 CHECK_DEPS_EXTRA_OPTS?=-w feature_provider,grpc_health_check,tentacat,util,watchman,fun_registry,sentry_grpc,traceman,cacheman,log_tee,spec,proto,sys2app,looper,job_matrix,definition_validator,gofer_client,open_api_spex,when,uuid,esaml,openid_connect,block
 ROOT_MAKEFILE_PATH := $(shell dirname $(abspath $(lastword $(MAKEFILE_LIST))))
+SCAN_RESULT_DIR?=out
 
 #
 # Security checks
@@ -111,10 +112,10 @@ ifeq ($(CI),)
 		-v $$(pwd):/app \
 		-v $(ROOT_MAKEFILE_PATH)/security-toolbox:$(SECURITY_TOOLBOX_TMP_DIR) \
 		registry.semaphoreci.com/ruby:3 \
-		bash -c 'cd $(APP_DIRECTORY) && $(SECURITY_TOOLBOX_TMP_DIR)/dependencies --language $(LANGUAGE) -d $(CHECK_DEPS_OPTS)'
+		bash -c 'cd $(APP_DIRECTORY) && $(SECURITY_TOOLBOX_TMP_DIR)/dependencies --language $(LANGUAGE) -d --output-dir $(SCAN_RESULT_DIR) $(CHECK_DEPS_OPTS)'
 else
 	# ruby version is set in prologue
-	cd $(APP_DIRECTORY) && $(ROOT_MAKEFILE_PATH)/security-toolbox/dependencies --language $(LANGUAGE) -d $(CHECK_DEPS_OPTS)
+	cd $(APP_DIRECTORY) && $(ROOT_MAKEFILE_PATH)/security-toolbox/dependencies --language $(LANGUAGE) -d --output-dir $(SCAN_RESULT_DIR) $(CHECK_DEPS_OPTS)
 endif
 
 check.ex.deps:

ee/rbac/assets/permissions.yaml

@@ -70,6 +70,10 @@ permissions:
       description: "View the existing dashboards within the organization."
     - name: "organization.dashboards.manage"
       description: "Create new dashboard views."
+    - name: "organization.service_accounts.view"
+      description: "View service accounts within the organization."
+    - name: "organization.service_accounts.manage"
+      description: "Manage service accounts within the organization."
   project:
     - name: "project.view"
       description: "Access the project. This permission is needed to see any page within the project."

ee/rbac/assets/roles.yaml

@@ -39,6 +39,8 @@ roles:
         - "organization.custom_roles.view"
         - "organization.dashboards.view"
         - "organization.dashboards.manage"
+        - "organization.service_accounts.view"
+        - "organization.service_accounts.manage"
     - name: "Admin"
       description: "Admins can modify settings within the organization or any of its projects. However, they do not have access to billing information, and they cannot change general organization details, such as the organization name and URL."
       maps_to: "Admin"
@@ -77,6 +79,8 @@ roles:
         - "organization.dashboards.view"
         - "organization.dashboards.manage"
         - "project.delete"
+        - "organization.service_accounts.view"
+        - "organization.service_accounts.manage"
     - name: "Member"
       description: "Members can access the organization's homepage and the projects they are assigned to. However, they are not able to modify any settings."
       permissions:

front/Dockerfile

@@ -45,7 +45,7 @@ RUN mix sentry_recompile && mix compile --warnings-as-errors
 # -- elixir stage
 
 # -- node stage
-FROM node:16-alpine as node
+FROM node:16-alpine AS node
 WORKDIR /assets
 COPY front/assets/package.json front/assets/package-lock.json ./
 RUN npm set progress=false && npm install
@@ -56,15 +56,15 @@ COPY front/assets ./
 FROM elixir AS dev
 WORKDIR /app
 RUN apk update \
-    && apk add --no-cache chromium-chromedriver inotify-tools bash gnupg entr
+    && apk add --no-cache chromium-chromedriver inotify-tools bash gnupg
 
 COPY --from=elixir /elixir ./
 COPY --from=node /assets ./assets
 WORKDIR /app/assets
 RUN node build.js
 WORKDIR /app
 
-CMD ["sh", "-c", "find lib config | entr -n -r mix phx.server"]
+CMD ["sh", "-c", "elixir --name [email protected] --cookie mycookie -S mix phx.server"]
 # -- dev stage
 
 # -- builder stage - build artifacts are created here

front/Makefile

@@ -29,6 +29,11 @@ CACHE_PORT=6379
 CACHE_POOL_SIZE=5
 AMQP_URL=amqp://0.0.0.0:5672
 
+#
+# Internal API URLs env file
+#
+INTERNAL_API_ENV_FILE = env/.env.internal-apis
+
 CONTAINER_ENV_VARS = \
 	-e CI=$(CI) \
 	-e MIX_ENV=$(MIX_ENV) \
@@ -42,7 +47,8 @@ CONTAINER_ENV_VARS = \
 	-e SEED_PROJECTS="initializing_failed,zebra,guard,errored,test_results,test_results_debug,after_pipeline,bitbucket" \
 	-e SEED_CLOUD_MACHINES=true \
 	-e SECRET_KEY_BASE="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure" \
-	-e SESSION_SIGNING_SALT="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure"
+	-e SESSION_SIGNING_SALT="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure" \
+	--env-file $(INTERNAL_API_ENV_FILE)
 
 
 CONTAINER_CE_ENV_VARS =\
@@ -55,7 +61,8 @@ CONTAINER_CE_ENV_VARS =\
 	 -e WORKFLOW_TEMPLATES_YAMLS_PATH="/app/workflow_templates/ce" \
 	 -e EXCLUDE_STUBS="GoferMock" \
 	 -e SECRET_KEY_BASE="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure" \
-	 -e SESSION_SIGNING_SALT="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure"
+	 -e SESSION_SIGNING_SALT="keyboard-cat-please-use-this-only-for-dev-and-testing-it-is-insecure" \
+	 --env-file $(INTERNAL_API_ENV_FILE)
 
 test.ex.setup: export MIX_ENV=test
 test.ex.setup:

front/assets/build.js

@@ -1,26 +1,55 @@
 const esbuild = require('esbuild')
 const fs = require('fs-extra')
 const path = require('path')
+const { exec } = require('child_process')
+const { promisify } = require('util')
 
+const execAsync = promisify(exec)
 const bundle = true
 const logLevel = process.env.ESBUILD_LOG_LEVEL || 'silent'
 const watch = !!process.env.ESBUILD_WATCH
+const isProd = process.env.MIX_ENV === 'prod' || process.env.NODE_ENV === 'production'
 
 const plugins = [
   // Add and configure plugins here
 ]
 
 const outputDir = '../priv/static/assets'
 
+// Function to process CSS files
+const processCss = async () => {
+  console.log('Processing CSS files...')
+
+  try {
+    // Process main.css which imports all other CSS files
+    const inputFile = 'css/main.css'
+    const outputFile = path.join(outputDir, 'css/app.css')
+
+    // Set NODE_ENV for PostCSS to handle minification
+    const env = isProd ? 'NODE_ENV=production' : 'NODE_ENV=development'
+    const postcssCmd = `${env} npx postcss ${inputFile} -o ${outputFile}`
+
+    await execAsync(postcssCmd)
+    console.log(`CSS processed successfully (${isProd ? 'production' : 'development'} mode)`)
+
+  } catch (error) {
+    console.error('Error processing CSS:', error)
+    throw error
+  }
+}
+
 // Function to copy static assets
-const copyAssets = () => {
-  console.log('Copying original assets to output directory...')
+const copyAssets = async () => {
+  console.log('Copying static assets to output directory...')
 
   fs.ensureDirSync(path.join(outputDir, 'css'))
   fs.ensureDirSync(path.join(outputDir, 'fonts'))
   fs.ensureDirSync(path.join(outputDir, 'images'))
 
-  fs.copySync('css', path.join(outputDir, 'css'), { overwrite: true })
+  // Process CSS files
+  await processCss()
+
+  // Copy fonts and images
   fs.copySync('fonts', path.join(outputDir, 'fonts'), { overwrite: true })
   fs.copySync('images', path.join(outputDir, 'images'), { overwrite: true })
 
@@ -53,18 +82,53 @@ const buildOptions = {
 }
 
 if (watch) {
-  esbuild.context(buildOptions).then(context => {
+  esbuild.context(buildOptions).then(async context => {
     context.watch()
-    copyAssets()
+    await copyAssets()
+
+    const chokidar = require('chokidar')
+    const cssDir = path.join(__dirname, 'css')
+
+    const cssWatcher = chokidar.watch(cssDir, {
+      persistent: true,
+      ignoreInitial: true,
+      usePolling: true, // REQUIRED for macOS Docker
+      interval: 1000,
+      binaryInterval: 1000,
+      awaitWriteFinish: {
+        stabilityThreshold: 500,
+        pollInterval: 100
+      },
+      useFsEvents: false,
+      alwaysStat: true,
+      depth: 99,
+      atomic: false
+    })
+
+    cssWatcher
+      .on('change', async (path) => {
+        // Only process CSS files
+        if (path.endsWith('.css')) {
+          console.log('CSS file changed, reprocessing...')
+          try {
+            await processCss()
+          } catch (error) {
+            console.error('Error processing CSS:', error)
+          }
+        }
+      })
+      .on('ready', () => console.log('CSS watcher ready'))
+
     process.stdin.on('close', () => {
+      cssWatcher.close()
       context.dispose()
       process.exit(0)
     })
     process.stdin.resume()
   })
 } else {
-  esbuild.build(buildOptions).then(() => {
-    copyAssets()
+  esbuild.build(buildOptions).then(async () => {
+    await copyAssets()
   }).catch(error => {
     console.error('Build error:', error)
     process.exit(1)

front/assets/css/app-semaphore-min.css

@@ -2624,7 +2624,7 @@ template {
 }
 /* Modules */
 /*
- 
+
   BOX SIZING
 
 */
@@ -2656,7 +2656,7 @@ blockquote,
 figcaption,
 figure,
 textarea,
-table, 
+table,
 td,
 th,
 tr,
@@ -2795,6 +2795,8 @@ img { max-width: 100%; }
 .b--indigo { border-color: #1570ff; }
 .b--dark-indigo { border-color: #00359f; }
 .b--orange { border-color: #fd7e14; }
+.b--yellow { border-color: #FBC335; }
+.b--blue { border-color: #2196F3; }
 .b--purple { border-color: #8658d6; }
 .b--dark-purple { border-color: #5122a5; }
 .b--dark-brown { border-color: #974510; }
@@ -2895,7 +2897,7 @@ img { max-width: 100%; }
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
   }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
   .br1-ns {     border-radius: .125rem; }
@@ -3000,7 +3002,7 @@ img { max-width: 100%; }
 .b--dashed { border-style: dashed; }
 .b--solid {  border-style: solid; }
 .b--none {   border-style: none; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .b--dotted-ns { border-style: dotted; }
   .b--dashed-ns { border-style: dashed; }
@@ -3192,7 +3194,7 @@ img { max-width: 100%; }
   bottom: 0;
   left: 0;
 }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .top-0-ns     { top:   0; }
   .left-0-ns    { left:  0; }
@@ -3798,7 +3800,7 @@ code, .code, pre {
 */
 .i         { font-style: italic; }
 .fs-normal { font-style: normal; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .i-ns       { font-style: italic; }
   .fs-normal-ns     { font-style: normal; }
@@ -3850,7 +3852,7 @@ code, .code, pre {
 .fw7    { font-weight: 700; }
 .fw8    { font-weight: 800; }
 .fw9    { font-weight: 900; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .normal-ns { font-weight: normal; }
   .b-ns      { font-weight: bold; }
@@ -3896,7 +3898,7 @@ code, .code, pre {
 /*
 
    FORMS
-   
+
 */
 .input-reset {
   -webkit-appearance: none;
@@ -4037,7 +4039,7 @@ code, .code, pre {
 .tracked       { letter-spacing:  .1em; }
 .tracked-tight { letter-spacing: -.05em; }
 .tracked-mega  { letter-spacing:  .25em; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .tracked-ns       { letter-spacing:  .1em; }
   .tracked-tight-ns { letter-spacing: -.05em; }
@@ -4585,6 +4587,7 @@ code, .code, pre {
 .bg-washed-purple {   background-color: #f3ecff; }
 /* Yellows */
 .yellow               { color: #FBC335; }
+.gold                 { color: #FBC335; }
 .lightest-yellow      { color: #fff3bf; }
 .washed-yellow        { color: #fffae4; }
 .bg-yellow            { background-color: #FBC335; }
@@ -6326,7 +6329,7 @@ code, .code, pre {
 .ttl { text-transform: lowercase; }
 .ttu { text-transform: uppercase; }
 .ttn { text-transform: none; }
-/* 
+/*
 @media (--breakpoint-not-small) {
   .ttc-ns { text-transform: capitalize; }
   .ttl-ns { text-transform: lowercase; }
@@ -7063,4 +7066,4 @@ kbd {
   line-height: 1;
   padding: 2px 6px;
   white-space: nowrap;
-}
+}