[Workspace] Fix fit&finish for workspace overview page

changelogs/fragments/8139.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix fit & finish for workspace overview getting started and assets section ([#8139](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8139))

src/core/public/doc_links/doc_links_service.ts

@@ -424,7 +424,13 @@ export class DocLinksService {
           },
           visualize: {
             // https://opensearch.org/docs/latest/dashboards/visualize/viz-index/
-            guide: `${OPENSEARCH_WEBSITE_DOCS}visualize/viz-index/`,
+            guide: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}visualize/viz-index/`,
+          },
+          dashboards: {
+            // https://opensearch.org/docs/latest/dashboards/quickstart/
+            quickStart: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}quickstart/`,
+            // https://opensearch.org/docs/latest/dashboards/dashboard/index/
+            createDashboards: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}dashboard/index/`,
           },
           management: {
             // https://opensearch.org/docs/latest/dashboards/management/advanced-settings/
@@ -826,6 +832,7 @@ export interface DocLinksStart {
         readonly s3DataSource: string;
       };
       readonly visualize: Record<string, string>;
+      readonly dashboards: Record<string, string>;
       readonly management: Record<string, string>;
     };
     readonly noDocumentation: {

src/core/utils/default_nav_groups.ts

@@ -52,7 +52,7 @@ const defaultNavGroups = {
       defaultMessage: 'Observability',
     }),
     description: i18n.translate('core.ui.group.observability.description', {
-      defaultMessage: 'Gain visibility into your application and infrastructure',
+      defaultMessage: 'Gain visibility into your applications and infrastructure.',
     }),
     order: 4000,
     icon: 'wsObservability',
@@ -63,7 +63,7 @@ const defaultNavGroups = {
       defaultMessage: 'Security Analytics',
     }),
     description: i18n.translate('core.ui.group.security.analytics.description', {
-      defaultMessage: 'Enhance your security posture with advanced analytics',
+      defaultMessage: 'Enhance your security posture with advanced analytics.',
     }),
     order: 5000,
     icon: 'wsSecurityAnalytics',
@@ -86,7 +86,7 @@ const defaultNavGroups = {
       defaultMessage: 'Search',
     }),
     description: i18n.translate('core.ui.group.search.description', {
-      defaultMessage: 'Discover and query your data with ease',
+      defaultMessage: 'Discover and query your data with ease.',
     }),
     order: 6000,
     icon: 'wsSearch',

src/plugins/content_management/public/components/card_container/card_embeddable.tsx

@@ -36,7 +36,7 @@ export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
 
     const cardProps: EuiCardProps = {
       ...this.input.cardProps,
-      title: (this.input?.getTitle?.() || this.input?.title) ?? '',
+      title: this.input?.getTitle?.() || this.input?.title || '',
       description: (
         <EuiToolTip position="top" content={this.input?.toolTipContent}>
           <>{this.input.description}</>

src/plugins/content_management/public/components/card_container/card_list.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { CardList } from './card_list';
 import { CardContainer } from './card_container';

src/plugins/content_management/public/components/card_container/card_list.tsx

@@ -42,7 +42,7 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
       <EuiFlexGroup
         wrap={!!input.wrap}
         style={input.wrap ? {} : { overflowX: 'auto' }}
-        gutterSize="s"
+        gutterSize="m"
       >
         {cards}
       </EuiFlexGroup>
@@ -65,14 +65,14 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
 
   if (input.grid && input.columns) {
     return (
-      <EuiFlexGrid columns={input.columns as FlexGridColumns} gutterSize="s">
+      <EuiFlexGrid columns={input.columns as FlexGridColumns} gutterSize="m">
         {cards}
       </EuiFlexGrid>
     );
   }
 
   return (
-    <EuiFlexGroup wrap={input.wrap} gutterSize="s">
+    <EuiFlexGroup wrap={input.wrap} gutterSize="m">
       {cards}
     </EuiFlexGroup>
   );

src/plugins/content_management/public/components/section_render.tsx

@@ -62,24 +62,27 @@
   const factory = embeddable.getEmbeddableFactory(CARD_CONTAINER);
 
   if (section.kind === 'card' && factory && input) {
+    const isCardCollapsible = section.collapsible;
     return (
       <>
         {section.title ? (
           <EuiTitle size="s">
             <h2>
-              <EuiButtonIcon
-                iconType={isCardVisible ? 'arrowDown' : 'arrowUp'}
-                onClick={() => setIsCardVisible(!isCardVisible)}
-                color="text"
-                aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
-              />
+              {isCardCollapsible ? (
+                <EuiButtonIcon
+                  iconType={isCardVisible ? 'arrowDown' : 'arrowRight'}
+                  onClick={() => setIsCardVisible(!isCardVisible)}
+                  color="text"
+                  aria-label={isCardVisible ? 'Show panel' : 'Hide panel'}
+                />
+              ) : null}
               {section.title}
             </h2>
           </EuiTitle>
         ) : null}
         {isCardVisible && (
           <>
-            <EuiSpacer size="s" /> <EmbeddableRenderer factory={factory} input={input} />
+            <EuiSpacer size="m" /> <EmbeddableRenderer factory={factory} input={input} />
           </>
         )}
       </>

src/plugins/content_management/public/services/content_management/types.ts

@@ -36,6 +36,7 @@ export type Section =
       id: string;
       order: number;
       title?: string;
+      collapsible?: boolean;
       input?: CardContainerExplicitInput;
       columns?: number;
       wrap?: boolean;