feat: ChartStore Details - revamp layout, add Readme, About section

Author: RohitRaj011

src/Pages/ChartStore/ChartDetails/ChartDetails.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Route, Switch, useRouteMatch } from 'react-router-dom'
+
+import {
+    APIResponseHandler,
+    BreadCrumb,
+    PageHeader,
+    SegmentedControl,
+    SegmentedControlProps,
+    SelectPickerProps,
+    useAsync,
+    useBreadcrumb,
+    useUrlFilters,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ChartSelector } from '@Components/AppSelector'
+import { URLS } from '@Config/routes'
+import { getAvailableCharts } from '@Services/service'
+
+import { ChartDetailsAbout } from './ChartDetailsAbout'
+import { ChartDetailsDeploy } from './ChartDetailsDeploy'
+import { ChartDetailsReadme } from './ChartDetailsReadme'
+import { CHART_DETAILS_SEGMENTS } from './constants'
+import { fetchChartDetails, fetchChartVersions } from './services'
+import { ChartDetailsSearchParams, ChartDetailsSegment } from './types'
+import { chartSelectorFilterOption, chartSelectorFormatOptionLabel, parseChartDetailsSearchParams } from './utils'
+
+import './chartDetails.scss'
+
+export const ChartDetails = () => {
+    // STATES
+    const [selectedChartVersion, setSelectedChartVersion] = useState<number>(null)
+
+    // HOOKS
+    const {
+        path,
+        params: { chartId },
+    } = useRouteMatch<{ chartId: string; chartSegment: ChartDetailsSegment }>()
+
+    const { tab, updateSearchParams } = useUrlFilters<void, ChartDetailsSearchParams>({
+        parseSearchParams: parseChartDetailsSearchParams,
+    })
+
+    // ASYNC CALLS
+    const [isFetchingChartVersions, chartVersions, chartVersionsErr, reloadChartVersions] = useAsync(
+        () => fetchChartVersions(chartId),
+        [chartId],
+    )
+
+    const [isFetchingChartDetails, chartDetails, chartDetailsErr, reloadChartDetails] = useAsync(
+        () => fetchChartDetails(selectedChartVersion),
+        [selectedChartVersion],
+        !!selectedChartVersion,
+        { resetOnChange: false },
+    )
+
+    useEffect(() => {
+        if (!isFetchingChartVersions && chartVersions) {
+            setSelectedChartVersion(chartVersions[0].id)
+        }
+    }, [isFetchingChartVersions, chartVersions])
+
+    // CONFIGS
+    const { breadcrumbs } = useBreadcrumb(
+        {
+            alias: {
+                ':chartSegment?': null,
+                ':chartId': {
+                    component: (
+                        <ChartSelector
+                            primaryKey="chartId"
+                            primaryValue="name"
+                            api={getAvailableCharts}
+                            matchedKeys={[]}
+                            apiPrimaryKey="id"
+                            formatOptionLabel={chartSelectorFormatOptionLabel}
+                            filterOption={chartSelectorFilterOption}
+                        />
+                    ),
+                    linked: false,
+                },
+                chart: null,
+                'chart-store': null,
+            },
+        },
+        [chartId],
+    )
+
+    const chartOptions = useMemo(
+        () =>
+            (chartVersions ?? []).map(({ id, version }) => ({
+                label: version.startsWith('v') ? version : `v${version}`,
+                value: id,
+            })),
+        [JSON.stringify(chartVersions)],
+    )
+
+    // HANDLERS
+    const handleSegmentChange: SegmentedControlProps['onChange'] = (selectedSegment) => {
+        updateSearchParams({ tab: selectedSegment.value as ChartDetailsSegment })
+    }
+
+    const handleChartChange: SelectPickerProps<number>['onChange'] = ({ value }) => {
+        setSelectedChartVersion(value)
+    }
+
+    // RENDERERS
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    const renderSegments = () => {
+        switch (tab) {
+            case ChartDetailsSegment.README:
+                return (
+                    <ChartDetailsReadme
+                        chartName={chartDetails?.name}
+                        readme={chartDetails?.readme}
+                        chartsOptions={chartOptions}
+                        selectedChartVersion={selectedChartVersion}
+                        onChartChange={handleChartChange}
+                        isLoading={isFetchingChartDetails}
+                        error={chartDetailsErr}
+                        reload={reloadChartDetails}
+                    />
+                )
+            case ChartDetailsSegment.PRESET_VALUES:
+                return <div>PRESET VALUES</div>
+            case ChartDetailsSegment.DEPLOYMENTS:
+                return <div>DEPLOYMENTS</div>
+            default:
+                return null
+        }
+    }
+
+    return (
+        <div className="flex-grow-1 flexbox-col bg__secondary dc__overflow-hidden">
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
+
+            <APIResponseHandler
+                isLoading={isFetchingChartVersions}
+                progressingProps={{ pageLoader: true }}
+                error={chartVersionsErr}
+                errorScreenManagerProps={{ code: chartVersionsErr?.code, reload: reloadChartVersions }}
+            >
+                <Switch>
+                    <Route path={`${path}${URLS.DEPLOY_CHART}/:presetValueId?`}>
+                        <ChartDetailsDeploy
+                            chartDetails={chartDetails}
+                            chartVersions={chartVersions}
+                            selectedChartVersion={selectedChartVersion}
+                        />
+                    </Route>
+                    <Route>
+                        <div className="chart-details flex-grow-1 p-20 dc__overflow-auto">
+                            <div className="flex column left top dc__gap-16 mw-none">
+                                <SegmentedControl
+                                    name="chart-details-segmented-control"
+                                    segments={CHART_DETAILS_SEGMENTS}
+                                    value={tab}
+                                    onChange={handleSegmentChange}
+                                />
+                                {renderSegments()}
+                            </div>
+                            <ChartDetailsAbout isLoading={isFetchingChartDetails} chartDetails={chartDetails} />
+                        </div>
+                    </Route>
+                </Switch>
+            </APIResponseHandler>
+        </div>
+    )
+}

src/Pages/ChartStore/ChartDetails/ChartDetailsAbout.tsx

@@ -0,0 +1,168 @@
+import { useMemo } from 'react'
+import { useRouteMatch } from 'react-router-dom'
+import moment from 'moment'
+
+import {
+    Button,
+    ButtonComponentType,
+    ComponentSizeType,
+    handleAnalyticsEvent,
+    Icon,
+    InfoBlock,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ChartDetailsAboutProps } from './types'
+import { getParsedChartYAML } from './utils'
+
+const AboutHeaderLoadingSkeleton = () => (
+    <div className="flexbox-col dc__gap-16">
+        <div className="shimmer-loading loading-icon" />
+        <div className="shimmer-loading w-150 h-20" />
+        <div className="flexbox-col dc__gap-8">
+            <div className="shimmer-loading w-250 h-16" />
+            <div className="shimmer-loading w-100 h-16" />
+        </div>
+    </div>
+)
+
+const AboutBodyLoadingSkeleton = () => (
+    <div className="flexbox-col dc__gap-12">
+        <div className="shimmer-loading w-250 h-16" />
+        <div className="shimmer-loading w-200 h-16" />
+        <div className="shimmer-loading w-100 h-16" />
+    </div>
+)
+
+const ChartMetaData = ({
+    title,
+    subtitle,
+    isLink,
+}: {
+    title: string
+    subtitle: string | string[]
+    isLink?: boolean
+}) => {
+    const renderSubtitle = () => {
+        if (Array.isArray(subtitle)) {
+            return subtitle.map((item) =>
+                isLink && item ? (
+                    <a className="m-0 fs-13 lh-20 fw-4 dc__break-word" href={item} target="_blank" rel="noreferrer">
+                        {item}
+                    </a>
+                ) : (
+                    <p key={item} className="m-0 fs-13 lh-20 fw-4 cn-9 dc__break-word">
+                        {item}
+                    </p>
+                ),
+            )
+        }
+
+        return isLink ? (
+            <a className="m-0 fs-13 lh-20 fw-4 dc__break-word" href={subtitle} target="_blank" rel="noreferrer">
+                {subtitle}
+            </a>
+        ) : (
+            <p className="m-0 fs-13 lh-20 fw-4 cn-9 dc__break-word">{subtitle}</p>
+        )
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-4">
+            <h5 className="m-0 fs-13 lh-20 fw-4 cn-7">{title}</h5>
+            {renderSubtitle()}
+        </div>
+    )
+}
+
+export const ChartDetailsAbout = ({ chartDetails, isLoading }: ChartDetailsAboutProps) => {
+    const { url } = useRouteMatch()
+
+    const {
+        icon,
+        name,
+        description,
+        chartName,
+        created,
+        appVersion,
+        deprecated,
+        digest,
+        home,
+        isOCICompliantChart,
+        chartYaml,
+    } = chartDetails ?? {}
+
+    const parsedChartYaml = useMemo(() => getParsedChartYAML(chartYaml), [chartYaml])
+
+    const handleDeploy = () => {
+        handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_CONFIGURE_&_DEPLOY' })
+    }
+
+    if (isLoading && !chartDetails) {
+        return (
+            <div className="flexbox-col dc__gap-20 mw-none">
+                <AboutHeaderLoadingSkeleton />
+                <div className="divider__secondary--horizontal" />
+                <AboutBodyLoadingSkeleton />
+            </div>
+        )
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-20 mw-none">
+            <div className="flexbox-col dc__gap-12">
+                {icon ? (
+                    <div className="icon-dim-48">
+                        <img src={icon} className="w-100" alt="chart-icon" data-testid="chart-type-image" />
+                    </div>
+                ) : (
+                    <Icon name="ic-helm" color="N700" size={48} />
+                )}
+                <h2 className="m-0 fs-16 lh-24 fw-6 cn-9">{name}</h2>
+                <p className="m-0 fs-13 lh-20 cn-9">{description}</p>
+            </div>
+            <div>
+                <Button
+                    dataTestId="deploy-chart-button"
+                    startIcon={<Icon name="ic-rocket-launch" color={null} />}
+                    text="Deploy Chart..."
+                    size={ComponentSizeType.medium}
+                    component={ButtonComponentType.link}
+                    linkProps={{
+                        to: `${url}/deploy-chart`,
+                    }}
+                    onClick={handleDeploy}
+                />
+            </div>
+            <div className="divider__secondary--horizontal" />
+            {isLoading ? (
+                <AboutBodyLoadingSkeleton />
+            ) : (
+                <>
+                    {deprecated && (
+                        <InfoBlock
+                            variant="warning"
+                            heading="Deprecated Chart"
+                            description="This chart is no longer maintained and may not receive updates or support from the publisher."
+                        />
+                    )}
+                    <div className="flexbox-col dc__gap-12">
+                        <ChartMetaData title="Chart repository" subtitle={chartName} />
+                        <ChartMetaData title="Home" subtitle={home} isLink />
+                        <ChartMetaData
+                            title="Application Version"
+                            subtitle={appVersion?.startsWith('v') ? appVersion.slice(1) : appVersion}
+                        />
+                        <ChartMetaData
+                            title="Created"
+                            subtitle={isOCICompliantChart ? '-' : moment(created).fromNow()}
+                        />
+                        <ChartMetaData title="Digest" subtitle={digest} />
+                        {!!parsedChartYaml && (
+                            <ChartMetaData title="Source" subtitle={parsedChartYaml.sources} isLink />
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}

src/Pages/ChartStore/ChartDetails/ChartDetailsDeploy.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+
+import { APIResponseHandler, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+
+import ChartValuesView from '@Components/v2/values/chartValuesDiff/ChartValuesView'
+import { ChartInstalledConfig } from '@Components/v2/values/chartValuesDiff/ChartValuesView.type'
+
+import { fetchChartValuesList } from './services'
+import { ChartDetailsDeployProps } from './types'
+
+export const ChartDetailsDeploy = ({ chartDetails, chartVersions, selectedChartVersion }: ChartDetailsDeployProps) => {
+    const { chartId } = useParams<{ chartId: string }>()
+
+    const [isFetchingChartValuesList, chartValuesList, chartValuesListErr, reloadChartValuesList] = useAsync(
+        () => fetchChartValuesList(chartId),
+        [chartId],
+    )
+
+    const chartValues = useMemo(
+        () =>
+            (chartValuesList ?? []).find(
+                (chartValue) => chartValue.kind === 'DEFAULT' && chartValue.id === selectedChartVersion,
+            ),
+        [selectedChartVersion, chartValuesList],
+    )
+
+    const isChartValuesViewLoading =
+        !chartDetails?.chartName || isFetchingChartValuesList || !chartValuesList.length || !chartVersions.length
+
+    return (
+        <APIResponseHandler
+            isLoading={isChartValuesViewLoading}
+            progressingProps={{ pageLoader: true }}
+            error={chartValuesListErr}
+            errorScreenManagerProps={{ code: chartValuesListErr?.code, reload: reloadChartValuesList }}
+        >
+            <ChartValuesView
+                isDeployChartView
+                installedConfigFromParent={chartDetails as unknown as ChartInstalledConfig}
+                chartValuesListFromParent={chartValuesList}
+                chartVersionsDataFromParent={chartVersions}
+                chartValuesFromParent={chartValues}
+                selectedVersionFromParent={selectedChartVersion}
+            />
+        </APIResponseHandler>
+    )
+}