Skip to content

Commit

Permalink
Add Installed badge and update the alert content for upgrading task
Browse files Browse the repository at this point in the history
  • Loading branch information
karthikjeeyar committed Aug 24, 2021
1 parent 0183e3b commit 412c2b6
Show file tree
Hide file tree
Showing 9 changed files with 348 additions and 77 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -256,14 +256,17 @@
"Create Pipeline": "Create Pipeline",
"by name": "by name",
"Select a Project to view its details or <2>create a Project</2>.": "Select a Project to view its details or <2>create a Project</2>.",
"Install and Add": "Install and Add",
"Update and Add": "Update and Add",
"Install and add": "Install and add",
"Update and add": "Update and add",
"View all tekton tasks ({{itemCount, number}})": "View all tekton tasks ({{itemCount, number}})",
"This version is not installed": "This version is not installed",
"Adding this task may take a few moments.": "Adding this task may take a few moments.",
"Upgrading this task may take a few moments.": "Upgrading this task may take a few moments.",
"Installed": "Installed",
"Categories": "Categories",
"Tags": "Tags",
"This task is not installed": "This task is not installed",
"Adding this task may take a few moments.": "Adding this task may take a few moments.",
"Task version will be updated across all instances": "Task version will be updated across all instances",
"Only update this task's version if you'd like to replace all of its references in the namespace.": "Only update this task's version if you'd like to replace all of its references in the namespace.",
"(latest)": "(latest)",
"Event type": "Event type",
"Last run duration": "Last run duration",
"Repository details": "Repository details",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
isTaskSearchable,
updateTask,
} from './pipeline-quicksearch-utils';
import PipelineQuickSearchDetails from './PiplineQuickSearchDetails';
import PipelineQuickSearchDetails from './PipelineQuickSearchDetails';

interface QuickSearchProps {
namespace: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
.opp-quick-search-details {
padding-top: var(--pf-global--spacer--md);

&__form-button {
&__form-button,
&__version-dropdown {
margin: var(--pf-global--spacer--md) 0px !important;
width: max-content;
}

&__version-dropdown-item {
min-width: 7em;
display: flex;
justify-content: space-between;
align-items: center;
}

&__provider {
color: var(--pf-global--Color--200);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import {
Alert,
Button,
ButtonVariant,
Label,
Expand All @@ -14,17 +13,19 @@ import {
TextContent,
Title,
} from '@patternfly/react-core';
import { CheckCircleIcon } from '@patternfly/react-icons';
import { useTranslation } from 'react-i18next';
import { Dropdown } from '@console/internal/components/utils';
import { handleCta } from '@console/shared';
import { QuickSearchDetailsRendererProps } from '@console/shared/src/components/quick-search/QuickSearchDetails';
import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
import { CTALabel } from './const';
import {
getCtaButtonText,
getTaskCtaType,
isOneVersionInstalled,
isTaskVersionInstalled,
} from './pipeline-quicksearch-utils';
import PipelineQuickSearchTaskAlert from './PipelineQuickSearchTaskAlert';
import PipelineQuickSearchVersionDropdown from './PipelineQuickSearchVersionDropdown';

import './PipelineQuickSearchDetails.scss';

Expand All @@ -35,43 +36,7 @@ const PipelineQuickSearchDetails: React.FC<QuickSearchDetailsRendererProps> = ({
const { t } = useTranslation();
const fireTelemetryEvent = useTelemetry();
const [selectedVersion, setSelectedVersion] = React.useState<string>();
const [ctaType, setCtaType] = React.useState<string>();
const [buttonText, setButtonText] = React.useState<string>();
const versions = selectedItem?.attributes?.versions ?? [];
const versionItems = versions.reduce((acc, { version, id }) => {
acc[id.toString()] =
id === selectedItem.data?.latestVersion?.id ? `${version} (latest)` : version;
return acc;
}, {});

const getTaskAlert = React.useMemo(() => {
switch (ctaType) {
case CTALabel.Install:
return (
<Alert
className="co-alert"
variant="info"
title={t('pipelines-plugin~This version is not installed')}
isInline
>
<p>{t('pipelines-plugin~Adding this task may take a few moments.')}</p>
</Alert>
);
case CTALabel.Update:
return (
<Alert className="co-alert" title="Update and Add" variant="warning" isInline>
<p>{t('pipelines-plugin~Upgrading this task may take a few moments.')}</p>
</Alert>
);
default:
return null;
}
}, [ctaType, t]);

React.useEffect(() => {
setButtonText(getCtaButtonText(selectedItem, selectedVersion));
setCtaType(getTaskCtaType(selectedItem, selectedVersion));
}, [selectedVersion, selectedItem]);

React.useEffect(() => {
if (isTaskVersionInstalled(selectedItem)) {
Expand All @@ -93,36 +58,41 @@ const PipelineQuickSearchDetails: React.FC<QuickSearchDetailsRendererProps> = ({
<Label data-test={'task-provider'}>{selectedItem.provider}</Label>
</LevelItem>
</Level>
<Split hasGutter>
<SplitItem>
<Button
data-test={'task-cta'}
variant={ButtonVariant.primary}
className="opp-quick-search-details__form-button"
onClick={(e) => {
handleCta(e, selectedItem, closeModal, fireTelemetryEvent, { selectedVersion });
}}
>
{buttonText}
</Button>
</SplitItem>
{versions.length > 0 && (
<SplitItem>
<Dropdown
data-test={'task-version'}
className="opp-quick-search-details__form-button"
items={versionItems}
selectedKey={selectedVersion}
id="dropdown-selectbox"
dataTest="dropdown-selectbox"
onChange={(deploymentName) => {
setSelectedVersion(deploymentName);
}}
/>
</SplitItem>
<Level hasGutter>
<LevelItem>
<Split hasGutter>
<SplitItem>
<Button
data-test={'task-cta'}
variant={ButtonVariant.primary}
className="opp-quick-search-details__form-button"
onClick={(e) => {
handleCta(e, selectedItem, closeModal, fireTelemetryEvent, { selectedVersion });
}}
>
{getCtaButtonText(selectedItem, selectedVersion)}
</Button>
</SplitItem>
{versions.length > 0 && (
<SplitItem data-test="task-version-dropdown">
<PipelineQuickSearchVersionDropdown
item={selectedItem}
selectedVersion={selectedVersion}
onChange={(key) => setSelectedVersion(key)}
/>
</SplitItem>
)}
</Split>
</LevelItem>
{isOneVersionInstalled(selectedItem) && (
<LevelItem>
<Label color="green" icon={<CheckCircleIcon />} data-test={'task-installed-badge'}>
{t('pipelines-plugin~Installed')}
</Label>
</LevelItem>
)}
</Split>
{getTaskAlert}
</Level>
{<PipelineQuickSearchTaskAlert ctaType={getTaskCtaType(selectedItem, selectedVersion)} />}
<TextContent className="opp-quick-search-details__description" data-test={'task-description'}>
{selectedItem.description}
</TextContent>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import { Alert } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';
import { CTALabel } from './const';

interface PipelineQuickSearchTaskAlertProps {
ctaType: string;
}

const PipelineQuickSearchTaskAlert: React.FC<PipelineQuickSearchTaskAlertProps> = ({ ctaType }) => {
const { t } = useTranslation();
switch (ctaType) {
case CTALabel.Install:
return (
<Alert
className="co-alert"
variant="info"
title={t('pipelines-plugin~This task is not installed')}
isInline
>
<p>{t('pipelines-plugin~Adding this task may take a few moments.')}</p>
</Alert>
);
case CTALabel.Update:
return (
<Alert
className="co-alert"
title={t('pipelines-plugin~Task version will be updated across all instances')}
variant="warning"
isInline
>
<p>
{t(
`pipelines-plugin~Only update this task's version if you'd like to replace all of its references in the namespace.`,
)}
</p>
</Alert>
);
default:
return null;
}
};

export default PipelineQuickSearchTaskAlert;
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import * as React from 'react';
import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
import { CheckCircleIcon } from '@patternfly/react-icons';
import { global_palette_green_500 as greenColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
import i18n from 'i18next';
import { CatalogItem } from 'packages/console-dynamic-plugin-sdk/src';
import { isSelectedVersionInstalled } from './pipeline-quicksearch-utils';

interface PipelineQuickSearchVersionDropdownProps {
selectedVersion: string;
item: CatalogItem;
onChange: (key: string) => void;
}

const PipelineQuickSearchVersionDropdown: React.FC<PipelineQuickSearchVersionDropdownProps> = ({
item,
onChange,
selectedVersion,
}) => {
const [isOpen, setOpen] = React.useState(false);
const toggleIsOpen = React.useCallback(() => setOpen((v) => !v), []);
const versions = item?.attributes?.versions ?? [];
const versionItems = versions.reduce((acc, { version, id }) => {
acc[id.toString()] =
id === item.data?.latestVersion?.id
? `${version} ${i18n.t('pipelines-plugin~(latest)')}`
: version;
return acc;
}, {});

return versions.length === 0 ? null : (
<Dropdown
data-test={'task-version'}
className="opp-quick-search-details__version-dropdown"
dropdownItems={Object.keys(versionItems).map((key) => (
<DropdownItem
component="button"
key={key}
label={versionItems[key]}
onClick={(e) => {
e.stopPropagation();
onChange(key);
setOpen(false);
}}
>
<div className="opp-quick-search-details__version-dropdown-item">
{versionItems[key]}
{isSelectedVersionInstalled(item, key) && <CheckCircleIcon color={greenColor.value} />}
</div>
</DropdownItem>
))}
isOpen={isOpen}
toggle={
<DropdownToggle
isDisabled={versions.length === 1}
data-test={'task-version-toggle'}
onToggle={toggleIsOpen}
>
{versionItems[selectedVersion]}
</DropdownToggle>
}
/>
);
};

export default PipelineQuickSearchVersionDropdown;
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from 'react';
import { render, cleanup, waitFor, configure } from '@testing-library/react';
import { omit } from 'lodash';
import PipelineQuickSearchVersionDropdown from '../PipelineQuickSearchVersionDropdown';
import { sampleClusterTaskCatalogItem } from './pipeline-quicksearch-data';

configure({ testIdAttribute: 'data-test' });

describe('pipelineQuickSearchVersionDropdown', () => {
const versionDropdownProps = {
item: sampleClusterTaskCatalogItem,
selectedVersion: '0.1',
onChange: jest.fn(),
};

afterEach(() => cleanup());

it('should not show version dropdown if there are no versions available', async () => {
const { queryByTestId } = render(
<PipelineQuickSearchVersionDropdown
{...versionDropdownProps}
item={omit(sampleClusterTaskCatalogItem, 'attributes.versions')}
/>,
);
await waitFor(() => {
expect(queryByTestId('task-version')).toBeNull();
});
});

it('should show the version dropdown if there are versions available', async () => {
const { queryByTestId } = render(
<PipelineQuickSearchVersionDropdown {...versionDropdownProps} />,
);
await waitFor(() => {
expect(queryByTestId('task-version')).not.toBeNull();
});
});
});

0 comments on commit 412c2b6

Please sign in to comment.