Add service account feature (#466)

## 📝 Description
Combines front/backend changes for service account functionality.

## ✅ Checklist
- [x] I have tested this change
- [x] This change requires documentation update

---------

Co-authored-by: Amir Hasanbasic <[email protected]>
Co-authored-by: Amir Hasanbasic <[email protected]>

Author: skipi

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:

ee/rbac/lib/internal_api/audit.pb.ex

@@ -67,6 +67,7 @@ defmodule InternalApi.Audit.Event.Resource do
   field(:Okta, 17)
   field(:FlakyTests, 18)
   field(:RBACRole, 19)
+  field(:ServiceAccount, 20)
 end
 
 defmodule InternalApi.Audit.Event.Operation do

ee/rbac/lib/internal_api/rbac.pb.ex

@@ -5,6 +5,7 @@ defmodule InternalApi.RBAC.SubjectType do
 
   field(:USER, 0)
   field(:GROUP, 1)
+  field(:SERVICE_ACCOUNT, 2)
 end
 
 defmodule InternalApi.RBAC.Scope do

ee/rbac/lib/internal_api/user.pb.ex

@@ -56,6 +56,7 @@ defmodule InternalApi.User.User.CreationSource do
 
   field(:NOT_SET, 0)
   field(:OKTA, 1)
+  field(:SERVICE_ACCOUNT, 2)
 end
 
 defmodule InternalApi.User.ListFavoritesRequest do

ee/rbac/lib/rbac/grpc_servers/rbac_server.ex

@@ -371,7 +371,7 @@ defmodule Rbac.GrpcServers.RbacServer do
       total_pages: total_pages,
       members:
         Enum.map(subject_role_bindings, fn binding ->
-          subject_type = if binding.type == "user", do: :USER, else: :GROUP
+          subject_type = binding.type |> String.upcase() |> String.to_existing_atom()
 
           %RBAC.ListMembersResponse.Member{
             subject: %RBAC.Subject{

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

front/assets/css/app-semaphore.css

@@ -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; }
@@ -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; }

front/assets/js/app.js

@@ -66,6 +66,7 @@ import { default as Agents} from "./agents";
 import { default as AddPeople } from "./people/add_people";
 import { default as EditPerson } from "./people/edit_person";
 import { default as SyncPeople } from "./people/sync_people";
+import { default as ServiceAccounts } from "./service_accounts";
 import { default as Report } from "./report";
 
 import { InitializingScreen } from "./project_onboarding/initializing";
@@ -294,12 +295,23 @@ export var App = {
     GroupManagement.init();
     new Star();
 
-    const addPeopleAppRoot = document.getElementById("add-people");
-    if (addPeopleAppRoot) {
-      AddPeople({
-        dom: addPeopleAppRoot,
-        config: addPeopleAppRoot.dataset,
-      });
+
+    // Initialize Preact apps
+    const serviceAccountsEl = document.getElementById("service-accounts");
+    if (serviceAccountsEl) {
+      const config = JSON.parse(serviceAccountsEl.dataset.config);
+      ServiceAccounts({ dom: serviceAccountsEl, config });
+    }
+
+    const addPeopleEl = document.getElementById("add-people");
+    if (addPeopleEl) {
+      AddPeople({ dom: addPeopleEl, config: addPeopleEl.dataset });
+    }
+
+    const syncPeopleEl = document.querySelector(".app-sync-people");
+    if (syncPeopleEl) {
+      const config = JSON.parse(syncPeopleEl.dataset.config);
+      SyncPeople({ dom: syncPeopleEl, config });
     }
 
     document.querySelectorAll(".app-edit-person").forEach((editPersonAppRoot) => {
@@ -516,6 +528,7 @@ export var App = {
 
     window.Notice.init();
 
+
     $(document).on("click", ".x-select-on-click", function (event) {
       event.currentTarget.setSelectionRange(0, event.currentTarget.value.length);
     });

front/assets/js/people/add_people/index.tsx

@@ -44,7 +44,7 @@ export const App = () => {
         <span className="material-symbols-outlined mr2">person_add</span>
         {`Add people`}
       </button>
-      <Modal isOpen={isOpen} close={() => close(false)} title="Add people">
+      <Modal isOpen={isOpen} close={() => close(false)} title="Add new people" width="w-70-m">
         <AddNewUsers close={close}/>
       </Modal>
     </Fragment>
@@ -85,7 +85,7 @@ const AddNewUsers = (props: { close: (reload: boolean) => void, }) => {
     const Link = (props: { icon: VNode, title: string, }) => {
       return (
         <ActiveShadowLink
-          className={`btn btn-secondary ${
+          className={`flex-grow-1 btn btn-secondary ${
             currentProvider === provider ? `active` : ``
           }`}
           disabled={loading}
@@ -134,16 +134,9 @@ const AddNewUsers = (props: { close: (reload: boolean) => void, }) => {
   };
 
   return (
-    <div
-      className="bg-white br3 shadow-1 w-90 w-70-m mw6 relative popup"
-      style={{ top: `200px`, transform: `translate(-50%, 0)` }}
-    >
-      <div className="flex items-center justify-between ph4 pt4 mb3">
-        <h2 className="f3 mb0">Add new people</h2>
-      </div>
-
+    <div className="pa4">
       {userProviders.length > 1 && (
-        <div className="mb3 button-group ph4 w-100 items-center justify-center">
+        <div className="mb3 button-group w-100 items-center">
           {userProviders.map(userProviderBox)}
         </div>
       )}
@@ -158,7 +151,7 @@ const AddNewUsers = (props: { close: (reload: boolean) => void, }) => {
           return (
             <Fragment key={idx}>
               {loading && (
-                <div className="ph4 pb4 tc">
+                <div className="pb4 tc">
                   <toolbox.Asset path="images/spinner.svg"/>
                 </div>
               )}
@@ -280,7 +273,7 @@ const ProvideVia = (props: ProvideViaProps) => {
     return (
       <Fragment>
         <div className="ph4 pb4">{message}</div>
-        <div className="flex justify-end items-center mt2 pb4 ph4">
+        <div className="flex justify-end items-center mt2">
           <button
             className="btn btn-primary ml3"
             onClick={() => props?.onCancel(anyInvites)}
@@ -294,11 +287,11 @@ const ProvideVia = (props: ProvideViaProps) => {
 
   return (
     <Fragment>
-      <div className="ph4">
+      <div className="">
         <label className="db mb2">Invite users to join your organization</label>
       </div>
       <div
-        className="ph4 pv1 w-100"
+        className="pv1 ph1 w-100"
         style={{ maxHeight: `400px`, overflow: `auto` }}
       >
         {!props.noManualInvite && (
@@ -370,7 +363,7 @@ const ProvideVia = (props: ProvideViaProps) => {
       </div>
 
       {collaborators.length != 0 && (
-        <div className="flex justify-end items-center mt2 pb4 ph4">
+        <div className="flex justify-end items-center mt2">
           <a
             className="gray underline pointer"
             onClick={() => setSelectedCollaborators(collaborators)}
@@ -513,7 +506,7 @@ const ProvideViaEmail = (props: ProvideViaEmailProps) => {
 
   return (
     <Fragment>
-      <div className="ph4" style={{ maxHeight: `400px`, overflow: `auto` }}>
+      <div className="ph1" style={{ maxHeight: `400px`, overflow: `auto` }}>
         {!arePeopleInvited && (
           <label className="db mb2">Email addresses and usernames</label>
         )}
@@ -593,7 +586,7 @@ const ProvideViaEmail = (props: ProvideViaEmailProps) => {
         ))}
       </div>
       {arePeopleInvited && (
-        <div className="flex justify-end pb4 ph4">
+        <div className="flex justify-end">
           <button
             className="btn btn-primary"
             onClick={() => props?.onCancel(true)}
@@ -603,7 +596,7 @@ const ProvideViaEmail = (props: ProvideViaEmailProps) => {
         </div>
       )}
       {!arePeopleInvited && (
-        <div className="flex justify-end pb4 ph4">
+        <div className="flex justify-end">
           <button
             className="btn btn-secondary mr3"
             onClick={() => props?.onCancel(false)}