enhancement: Global service view enhancements (#1927)

pluralsh · Feb 20, 2025 · b8d1fbe · b8d1fbe
1 parent bee7e5c
commit b8d1fbe
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -0,0 +1 @@
+assets/* @pluralsh/frontend
diff --git a/assets/src/components/cd/globalServices/GlobalService.tsx b/assets/src/components/cd/globalServices/GlobalService.tsx
@@ -30,7 +30,8 @@ export const columns = [
   ColLastActivity,
   ColActions,
 ]
-const crumbs = [
+
+export const crumbs = [
   ...CD_BASE_CRUMBS,
   {
     label: 'global services',

diff --git a/assets/src/components/cd/globalServices/details/GlobalService.tsx b/assets/src/components/cd/globalServices/details/GlobalService.tsx
@@ -4,6 +4,7 @@ import {
   ListBoxItem,
   ReloadIcon,
   Select,
+  useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
 import {
@@ -29,6 +30,8 @@ import { PluralErrorBoundary } from '../../PluralErrorBoundary'
 import { GlobalServiceServices } from './GlobalServiceServices.tsx'
 import GlobalServiceSidecar from './GlobalServiceSidecar.tsx'
 import { ResponsiveLayoutPage } from '../../../utils/layout/ResponsiveLayoutPage.tsx'
+import { crumbs } from '../GlobalService.tsx'
+import { RESPONSIVE_LAYOUT_CONTENT_WIDTH } from '../../../utils/layout/ResponsiveLayoutContentContainer.tsx'
 
 export default function GlobalService() {
   const theme = useTheme()
@@ -41,6 +44,13 @@ export default function GlobalService() {
 
   const globalService = data?.globalService
 
+  useSetBreadcrumbs(
+    useMemo(
+      () => [...crumbs, { label: globalService?.name ?? globalServiceId }],
+      [globalService?.name, globalServiceId]
+    )
+  )
+
   const { data: globalServicesData, error: globalServicesError } =
     useFetchPaginatedData(
       {
@@ -79,6 +89,9 @@ export default function GlobalService() {
             <Flex
               direction={'column'}
               gap={'large'}
+              flexGrow={1}
+              flexShrink={1}
+              width={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
             >
               <GlobalServiceSelect
                 selectedGlobalService={globalService}

diff --git a/assets/src/components/cd/globalServices/details/GlobalServiceSidecar.tsx b/assets/src/components/cd/globalServices/details/GlobalServiceSidecar.tsx
@@ -38,6 +38,7 @@ export default function GlobalServiceSidecar({
     <Flex
       direction={'column'}
       gap={'medium'}
+      width={220}
     >
       <Sidecar heading="Source">
         <SidecarItem heading="Type">
@@ -63,7 +64,7 @@ export default function GlobalServiceSidecar({
                 )
               }
             >
-              Go to root service
+              Root service
             </Button>
           ) : (
             <Button

diff --git a/assets/src/components/cd/services/ServicesColumns.tsx b/assets/src/components/cd/services/ServicesColumns.tsx
@@ -224,7 +224,7 @@ export const ColErrors = columnHelper.accessor(
         original: { node },
       },
     }) => (
-      <div css={{ minWidth: 160 }}>
+      <div>
         <ServicesTableErrors service={node} />
         <ServiceDeprecations service={node} />
       </div>