fix: cluster name visible, missing stop action and git avatar (#434)

* feat(cluster): showing the name of cluster on services/app/db pages

* feat(services): deploy other commit now display avatar of author

* fix(actions): show stop button when status is stop error

libs/pages/application/src/lib/ui/container/container.tsx

@@ -1,11 +1,12 @@
 import { Environment, ServiceDeploymentStatusEnum } from 'qovery-typescript-axios'
 import { createContext, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { postApplicationActionsDeploy, postApplicationActionsRestart } from '@qovery/domains/application'
+import { selectClusterById } from '@qovery/domains/organization'
 import { ApplicationButtonsActions } from '@qovery/shared/console-shared'
 import { IconEnum, getServiceType, isCronJob, isLifeCycleJob } from '@qovery/shared/enums'
-import { ApplicationEntity } from '@qovery/shared/interfaces'
+import { ApplicationEntity, ClusterEntity } from '@qovery/shared/interfaces'
 import {
   Button,
   ButtonSize,
@@ -20,7 +21,7 @@ import {
   TagMode,
   TagSize,
 } from '@qovery/shared/ui'
-import { AppDispatch } from '@qovery/store'
+import { AppDispatch, RootState } from '@qovery/store'
 import TabsFeature from '../../feature/tabs-feature/tabs-feature'
 import NeedRedeployFlag from '../need-redeploy-flag/need-redeploy-flag'
 
@@ -43,6 +44,10 @@ export function Container(props: ContainerProps) {
   const { environmentId = '', applicationId = '' } = useParams()
   const [showHideAllEnvironmentVariablesValues, setShowHideAllEnvironmentVariablesValues] = useState<boolean>(false)
 
+  const cluster = useSelector<RootState, ClusterEntity | undefined>((state: RootState) =>
+    selectClusterById(state, environment?.cluster_id || '')
+  )
+
   const dispatch = useDispatch<AppDispatch>()
 
   const redeployApplication = () => {
@@ -120,10 +125,10 @@ export function Container(props: ContainerProps) {
           {application && <Icon name={getServiceType(application)} width="16" height="16" />}
         </div>
       </Skeleton>
-      <Skeleton width={100} height={32} show={!environment?.cloud_provider}>
+      <Skeleton width={120} height={32} show={!cluster}>
         <div className="border border-element-light-lighter-400 bg-white h-8 px-3 rounded text-xs items-center inline-flex font-medium gap-2">
           <Icon name={environment?.cloud_provider.provider as IconEnum} width="16" />
-          <p className="max-w-[54px] truncate">{environment?.cloud_provider.cluster}</p>
+          <p className="max-w-[120px] truncate">{cluster?.name}</p>
         </div>
       </Skeleton>
       <Tag className="bg-element-light-lighter-300 gap-2 hidden">

libs/pages/database/src/lib/ui/container/container.tsx

@@ -1,15 +1,18 @@
 import { Environment } from 'qovery-typescript-axios'
+import { useSelector } from 'react-redux'
 import { useLocation, useParams } from 'react-router-dom'
+import { selectClusterById } from '@qovery/domains/organization'
 import { DatabaseButtonsActions } from '@qovery/shared/console-shared'
 import { IconEnum, RunningStatus } from '@qovery/shared/enums'
-import { DatabaseEntity } from '@qovery/shared/interfaces'
+import { ClusterEntity, DatabaseEntity } from '@qovery/shared/interfaces'
 import {
   DATABASE_DEPLOYMENTS_URL,
   DATABASE_GENERAL_URL,
   DATABASE_SETTINGS_URL,
   DATABASE_URL,
 } from '@qovery/shared/router'
 import { Header, Icon, Skeleton, StatusChip, Tabs, Tag, TagMode, TagSize } from '@qovery/shared/ui'
+import { RootState } from '@qovery/store'
 
 export interface ContainerProps {
   database?: DatabaseEntity
@@ -23,6 +26,10 @@ export function Container(props: ContainerProps) {
   const { organizationId, projectId, environmentId, databaseId } = useParams()
   const location = useLocation()
 
+  const cluster = useSelector<RootState, ClusterEntity | undefined>((state: RootState) =>
+    selectClusterById(state, environment?.cluster_id || '')
+  )
+
   const headerActions = (
     <>
       <Skeleton width={150} height={32} show={!database?.status}>
@@ -40,10 +47,10 @@ export function Container(props: ContainerProps) {
           <TagMode status={environment?.mode} size={TagSize.BIG} />
         </Skeleton>
       )}
-      <Skeleton width={100} height={32} show={!environment?.cloud_provider}>
+      <Skeleton width={120} height={32} show={!cluster}>
         <div className="border border-element-light-lighter-400 bg-white h-8 px-3 rounded text-xs items-center inline-flex font-medium gap-2">
           <Icon name={environment?.cloud_provider.provider as IconEnum} width="16" />
-          <p className="max-w-[54px] truncate">{environment?.cloud_provider.cluster}</p>
+          <p className="max-w-[120px] truncate">{cluster?.name}</p>
         </div>
       </Skeleton>
       <Tag className="bg-element-light-lighter-300 gap-2 hidden">

libs/pages/services/src/lib/ui/container/container.tsx

@@ -3,9 +3,10 @@ import { useSelector } from 'react-redux'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { selectApplicationsEntitiesByEnvId } from '@qovery/domains/application'
 import { selectDatabasesEntitiesByEnvId } from '@qovery/domains/database'
+import { selectClusterById } from '@qovery/domains/organization'
 import { EnvironmentButtonsActions } from '@qovery/shared/console-shared'
 import { IconEnum, RunningStatus } from '@qovery/shared/enums'
-import { ApplicationEntity, DatabaseEntity, EnvironmentEntity } from '@qovery/shared/interfaces'
+import { ApplicationEntity, ClusterEntity, DatabaseEntity, EnvironmentEntity } from '@qovery/shared/interfaces'
 import {
   SERVICES_APPLICATION_CREATION_URL,
   SERVICES_CRONJOB_CREATION_URL,
@@ -53,6 +54,10 @@ export function Container(props: ContainerProps) {
     selectDatabasesEntitiesByEnvId(state, environment?.id || '')
   )
 
+  const cluster = useSelector<RootState, ClusterEntity | undefined>((state: RootState) =>
+    selectClusterById(state, environment?.cluster_id || '')
+  )
+
   const headerButtons = (
     <div>
       {/* <ButtonIcon
@@ -86,10 +91,10 @@ export function Container(props: ContainerProps) {
           <TagMode size={TagSize.BIG} status={environment?.mode} />
         </Skeleton>
       )}
-      <Skeleton width={100} height={32} show={!environment?.cloud_provider}>
+      <Skeleton width={120} height={32} show={!cluster}>
         <div className="border border-element-light-lighter-400 bg-white h-8 px-3 rounded text-xs items-center inline-flex font-medium gap-2">
           <Icon name={environment?.cloud_provider.provider as IconEnum} width="16" />
-          <p className="max-w-[54px] truncate">{environment?.cloud_provider.cluster}</p>
+          <p className="max-w-[120px] truncate">{cluster?.name}</p>
         </div>
       </Skeleton>
       <Tag className="bg-element-light-lighter-300 gap-2 hidden">

libs/shared/console-shared/src/lib/deploy-other-commit-modal/ui/deploy-other-commit-modal.tsx

@@ -1,5 +1,7 @@
 import { Commit } from 'qovery-typescript-axios'
 import {
+  Avatar,
+  AvatarStyle,
   Button,
   ButtonSize,
   ButtonStyle,
@@ -75,6 +77,7 @@ export function DeployOtherCommitModal(props: DeployOtherCommitModalProps) {
                             ? 'bg-brand-50 outline-brand-500 outline'
                             : ''
                         } ${commitsByDay[date].length - 1 === index ? '' : 'border-b'}
+                        ${selectedCommitId === commit.git_commit_id ? 'z-50' : ''}
                     ${currentCommitId === commit.git_commit_id ? 'bg-green-50' : ''}
                     ${index === 0 ? 'rounded-t-md' : ''} ${
                           index === commitsByDay[date].length - 1 ? 'rounded-b-md' : ''
@@ -93,7 +96,16 @@ export function DeployOtherCommitModal(props: DeployOtherCommitModalProps) {
                                 <Truncate truncateLimit={45} text={commit.message} />
                               </a>
                             </p>
-                            <TagCommit commitId={commit.git_commit_id} />
+                            <div className="flex items-center">
+                              <Avatar
+                                size={28}
+                                className="mr-2"
+                                style={AvatarStyle.STROKED}
+                                firstName={commit.author_name}
+                                url={commit.author_avatar_url}
+                              />
+                              <TagCommit commitId={commit.git_commit_id} />
+                            </div>
                           </div>
 
                           <div className="flex justify-between w-full">

libs/shared/ui/src/lib/components/avatar/avatar.tsx

@@ -37,7 +37,7 @@ export function Avatar(props: AvatarProps) {
     noTooltip = false,
   } = props
 
-  const defineClass = `${style === AvatarStyle.STROKED ? 'border-2 border-element-light-lighter-400' : ''} ${
+  const defineClass = `${style === AvatarStyle.STROKED ? 'border border-element-light-lighter-400' : ''} ${
     onClick ? 'cursor-pointer' : ''
   }`
 

libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx

@@ -49,7 +49,7 @@ export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
       data-testid="scroll-shadow-wrapper"
       ref={wrapperRef}
       style={style}
-      className={`relative overflow-auto ${className}`}
+      className={`relative overflow-y-auto pr-[1px] ${className}`}
       onScroll={onScrollHandler}
     >
       <div

libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx

@@ -28,7 +28,7 @@ export function TagCommit(props: TagCommitProps) {
   }, [])
 
   const contentTag = (
-    <Tag className="border border-element-light-lighter-500 text-text-400 font-medium h-7 hover:bg-element-light-lighter-400 w-[80px] flex items-center justify-center">
+    <Tag className="border border-element-light-lighter-500 text-text-400 font-medium hover:bg-element-light-lighter-400 w-[80px] flex items-center justify-center">
       {!hover ? (
         <div className="w-4 mr-1">
           <Icon name="icon-solid-code-commit" className="mr-1" />

libs/shared/ui/src/lib/components/tag/tag.tsx

@@ -13,7 +13,7 @@ export interface TagProps {
 export function Tag(props: TagProps) {
   const { children, className = '', size = TagSize.NORMAL, dataTestId = 'tag' } = props
 
-  const normalClassName = size === TagSize.NORMAL ? 'h-6 px-2' : ''
+  const normalClassName = size === TagSize.NORMAL ? 'h-7 px-2' : ''
   const bigClassName = size === TagSize.BIG ? 'h-8 px-3' : ''
 
   return (

libs/shared/utils/src/lib/tools/status-actions-available.tsx

@@ -39,6 +39,7 @@ export const isStopAvailable = (status: StateEnum): boolean => {
       status === StateEnum.RUNNING ||
       status === StateEnum.DEPLOYMENT_ERROR ||
       status === StateEnum.DEPLOYMENT_QUEUED ||
+      status === StateEnum.STOP_ERROR ||
       status === StateEnum.CANCELED) &&
     !isCancelBuildAvailable(status)
   )