Merge pull request #563 from devtron-labs/feat/pipeline-rbac

feat: add PipelineViewRBAC component in Logout card

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.7.8",
+    "version": "1.7.9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -99,6 +99,7 @@ export const ROUTES = {
     TELEMETRY_EVENT: 'telemetry/event',
     SERVER_INFO_API: 'server',
     ATTRIBUTES_USER: 'attributes/user',
+    GET: 'get',
     UPDATE: 'update',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',

src/Common/Constants.ts

@@ -29,6 +29,7 @@ const SegmentedControl = ({
     name,
     variant = SegmentedControlVariant.WHITE_ON_GRAY,
     size = ComponentSizeType.medium,
+    isControlled = false,
 }: SegmentedControlProps) => (
     <StyledRadioGroup
         className={`${variant} ${SEGMENTED_CONTROL_SIZE_TO_CLASS_MAP[size]} ${rootClassName}`}
@@ -45,6 +46,7 @@ const SegmentedControl = ({
                 showTippy={!!tooltips?.[index]}
                 tippyContent={tooltips?.[index] ?? ''}
                 dataTestId={`${name}-${tab.value}`}
+                canSelect={!isControlled}
             >
                 {tab.label}
             </StyledRadioGroup.Radio>

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -37,4 +37,8 @@ export interface SegmentedControlProps {
      * @default ComponentSizeType.medium
      */
     size?: ComponentSizeType.medium | ComponentSizeType.large
+    /**
+     * @default false
+     */
+    isControlled?: boolean
 }

src/Common/SegmentedControl/types.ts

@@ -16,7 +16,8 @@
 
 import React from 'react'
 import { useHistory } from 'react-router-dom'
-import { getRandomColor } from '../../Common'
+import { useMainContext } from '@Shared/Providers'
+import { getRandomColor, stopPropagation } from '../../Common'
 import { ThemeSwitcher } from './ThemeSwitcher'
 
 interface LogoutCardType {
@@ -28,6 +29,7 @@ interface LogoutCardType {
 
 const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutCard }: LogoutCardType) => {
     const history = useHistory()
+    const { viewIsPipelineRBACConfiguredNode } = useMainContext()
 
     const onLogout = () => {
         document.cookie = `argocd.token=; expires=Thu, 01-Jan-1970 00:00:01 GMT;path=/`
@@ -40,9 +42,9 @@ const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutC
 
     return (
         <div className="dc__transparent-div" onClick={toggleLogoutCard}>
-            <div className={`logout-card ${className}`}>
-                <div className="flexbox flex-justify p-16">
-                    <div className="logout-card-user ">
+            <div className={`logout-card ${className}`} onClick={stopPropagation}>
+                <div className="flexbox flex-justify py-16 px-12">
+                    <div className="logout-card-user">
                         <p className="logout-card__name dc__ellipsis-right">{userFirstLetter}</p>
                         <p className="logout-card__email dc__ellipsis-right">{userFirstLetter}</p>
                     </div>
@@ -55,8 +57,11 @@ const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutC
                 </div>
                 <div className="dc__border-top-n1 py-4">
                     <ThemeSwitcher onChange={toggleLogoutCard} />
+
+                    {viewIsPipelineRBACConfiguredNode}
+
                     <button
-                        className="dc__unset-button-styles px-8 py-6 fs-13 fw-4 lh-20 cr-5 dc__hover-n50 cursor w-100 flex left"
+                        className="dc__unset-button-styles px-12 py-6 fs-13 fw-4 lh-20 cr-5 dc__hover-n50 cursor w-100 flex left"
                         data-testid="logout-button"
                         onClick={onLogout}
                         type="button"

src/Shared/Components/LogoutCard.tsx

@@ -32,7 +32,7 @@ const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
         return {
             tabs: availableThemePreferences.map((value) => ({
                 label: (
-                    <span className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">
+                    <span className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">
                         {THEME_PREFERENCE_TO_ICON_MAP[value].icon}
                     </span>
                 ),
@@ -53,15 +53,15 @@ const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
     }
 
     return (
-        <div className="flex dc__content-space dc__gap-8 px-8 py-6" onClick={stopPropagation}>
+        <div className="flex dc__content-space dc__gap-8 px-12 py-6" onClick={stopPropagation}>
             <p className="m-0 fs-13 fw-4 lh-20 cn-9">Theme</p>
             <SegmentedControl
                 initialTab={themePreference}
                 name="theme-preference-selector"
                 onChange={handleThemeSwitch}
                 tabs={tabs}
                 tooltips={tooltips}
-                size={ComponentSizeType.large}
+                size={ComponentSizeType.medium}
                 variant={SegmentedControlVariant.GRAY_ON_WHITE}
             />
         </div>

src/Shared/Components/ThemeSwitcher/ThemeSwitcher.component.tsx

@@ -40,6 +40,8 @@ export interface MainContext {
     isAirgapped: boolean
     isSuperAdmin: boolean
     isManifestScanningEnabled: boolean
+    isOrgLevelRBACViewEnforced: boolean
+    viewIsPipelineRBACConfiguredNode: ReactNode
 }
 
 export interface MainContextProviderProps {

src/Shared/Providers/types.ts

@@ -14,8 +14,18 @@
  * limitations under the License.
  */
 
-import { getUrlWithSearchParams, post, ROUTES } from '../../Common'
-import { GetPolicyApiUrlProps, GetResourceApiUrlProps } from './types'
+import { ViewIsPipelineRBACConfiguredRadioTabs } from '@Shared/types'
+import { get, getUrlWithSearchParams, post, ROUTES, showError } from '../../Common'
+import { USER_PREFERENCES_ATTRIBUTE_KEY } from './constants'
+import {
+    GetPolicyApiUrlProps,
+    GetResourceApiUrlProps,
+    GetUserPreferencesParsedDTO,
+    GetUserPreferencesQueryParamsType,
+    UpdateUserPreferencesParsedValueType,
+    UpdateUserPreferencesPayloadType,
+    UserPreferencesType,
+} from './types'
 
 export const getResourceApiUrl = <T>({ baseUrl, kind, version, suffix, queryParams }: GetResourceApiUrlProps<T>) =>
     getUrlWithSearchParams(`${baseUrl}/${kind}/${version}${suffix ? `/${suffix}` : ''}`, queryParams)
@@ -24,3 +34,55 @@ export const getPolicyApiUrl = <T>({ kind, version, queryParams, suffix }: GetPo
     getUrlWithSearchParams(`global/policy/${kind}/${version}${suffix ? `/${suffix}` : ''}`, queryParams)
 
 export const saveCDPipeline = (request) => post(ROUTES.CD_CONFIG, request)
+
+export const getUserPreferences = async (): Promise<UserPreferencesType> => {
+    const queryParamsPayload: Pick<GetUserPreferencesQueryParamsType, 'key'> = {
+        key: USER_PREFERENCES_ATTRIBUTE_KEY,
+    }
+
+    const { result } = await get<{ value: string }>(
+        getUrlWithSearchParams(`${ROUTES.ATTRIBUTES_USER}/${ROUTES.GET}`, queryParamsPayload),
+    )
+
+    if (!result?.value) {
+        return null
+    }
+
+    const parsedResult: GetUserPreferencesParsedDTO = JSON.parse(result.value)
+
+    const pipelineRBACViewSelectedTab = parsedResult.viewPermittedEnvOnly
+        ? ViewIsPipelineRBACConfiguredRadioTabs.ACCESS_ONLY
+        : ViewIsPipelineRBACConfiguredRadioTabs.ALL_ENVIRONMENTS
+
+    return {
+        pipelineRBACViewSelectedTab,
+    }
+}
+
+export const updateUserPreferences = async (
+    updatedUserPreferences: UserPreferencesType,
+    shouldThrowError: boolean = false,
+): Promise<boolean> => {
+    try {
+        const value: UpdateUserPreferencesParsedValueType = {
+            viewPermittedEnvOnly:
+                updatedUserPreferences.pipelineRBACViewSelectedTab ===
+                ViewIsPipelineRBACConfiguredRadioTabs.ACCESS_ONLY,
+        }
+
+        const payload: UpdateUserPreferencesPayloadType = {
+            key: USER_PREFERENCES_ATTRIBUTE_KEY,
+            value: JSON.stringify(value),
+        }
+
+        await post(`${ROUTES.ATTRIBUTES_USER}/${ROUTES.UPDATE}`, payload)
+        return true
+    } catch (error) {
+        if (shouldThrowError) {
+            throw error
+        }
+
+        showError(error)
+        return false
+    }
+}

src/Shared/Services/common.service.ts

@@ -0,0 +1 @@
+export const USER_PREFERENCES_ATTRIBUTE_KEY = 'userPreferences'