- {itemsToDisplay.map((i) => {
- if (isPlugin(i)) {
- return (
-
- );
- }
-
- return (
-
- );
- })
- }
-
+ return (listing.length === 0 ? (
+
+
+
+ {getNoResultsMessage()}
- );
- }
-}
+ {noResultsAction && (
+
+ {noResultsAction.label}
+
+ )}
+
+ ) : (
+
+ {pageItems}
+
+ ));
+};
+
+export default MarketplaceList;
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/__snapshots__/navigation_row.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/__snapshots__/navigation_row.test.tsx.snap
deleted file mode 100644
index f08718159d..0000000000
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/__snapshots__/navigation_row.test.tsx.snap
+++ /dev/null
@@ -1,157 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/marketplace/navigation_row should not render any buttons 1`] = `
-
-`;
-
-exports[`components/marketplace/navigation_row should render next and previous buttons 1`] = `
-
-`;
-
-exports[`components/marketplace/navigation_row should render only next button 1`] = `
-
-`;
-
-exports[`components/marketplace/navigation_row should render only previous button 1`] = `
-
-`;
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/index.ts b/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/index.ts
deleted file mode 100644
index 320c07dca9..0000000000
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-import {GlobalState} from '@mattermost/types/store';
-
-import NavigationRow from './navigation_row';
-
-function mapStateToProps(state: GlobalState) {
- return {
- theme: getTheme(state),
- };
-}
-
-export default connect(mapStateToProps)(NavigationRow);
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_button.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_button.tsx
deleted file mode 100644
index 8433739030..0000000000
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_button.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
-
-type NavigationButtonProps = {
- onClick: (event: React.MouseEvent
) => void;
- messageId: string;
- defaultMessage: string;
-};
-
-export default class NavigationButton extends React.PureComponent {
- onClick = (event: React.MouseEvent): void => {
- event.preventDefault();
- this.props.onClick(event);
- };
-
- render(): JSX.Element {
- const {onClick, messageId, defaultMessage} = this.props;
- return (
-
-
- );
- }
-}
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_row.test.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_row.test.tsx
deleted file mode 100644
index 4633263c55..0000000000
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_list/navigation_row/navigation_row.test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import {Theme} from 'mattermost-redux/selectors/entities/preferences';
-
-import NavigationRow, {NavigationRowProps} from './navigation_row';
-
-describe('components/marketplace/navigation_row', () => {
- const baseProps: NavigationRowProps = {
- page: 0,
- total: 32,
- maximumPerPage: 15,
- onNextPageButtonClick: jest.fn(),
- onPreviousPageButtonClick: jest.fn(),
- theme: {centerChannelColor: '#fff'} as Theme,
- };
-
- it('should render only next button', () => {
- const wrapper = shallow(
- (
- (
- (
- ) => void;
- onPreviousPageButtonClick: (event: React.MouseEvent) => void;
- theme: Theme;
-};
-
-export default class NavigationRow extends React.PureComponent {
- canShowNextButton = (): boolean => {
- const {page, maximumPerPage, total} = this.props;
- const totalPages = Math.trunc((total - 1) / maximumPerPage);
-
- return totalPages > page;
- };
-
- renderCount = (): JSX.Element => {
- const {page, total, maximumPerPage} = this.props;
- const startCount = page * maximumPerPage;
- const endCount = Math.min(startCount + maximumPerPage, total);
-
- return (
-
-
- {(this.props.page > 0) && (
-
-
- {this.renderCount()}
-
-
- {this.canShowNextButton() && (
-
-
,
- );
- expect(wrapper).toMatchSnapshot();
- });
+ const defaultProps = {
+ openedFrom: 'actions_menu' as OpenedFromType,
+ };
- it('should render with one plugin', () => {
- const wrapper = shallow(
- ,
- );
- expect(wrapper).toMatchSnapshot();
- });
-
- it('should render with plugins', () => {
- const wrapper = shallow(
- (
- (
- ((
- (
- (
- ;
-};
-
-// AllListing renders the contents of the all listing tab.
-export const AllListing = ({listing}: AllListingProps): JSX.Element => {
- if (listing.length === 0) {
- return (
-
- );
- }
-
- return ;
-};
-
-type InstalledListingProps = {
- installedItems: Array;
- changeTab: SelectCallback;
-};
-
-// InstalledListing renders the contents of the installed listing tab.
-export const InstalledListing = ({installedItems, changeTab}: InstalledListingProps): JSX.Element => {
- if (installedItems.length === 0) {
- return (
-
-
-
-
-
-
changeTab(MarketplaceTabs.ALL_LISTING)}
- data-testid='Install-Plugins-button'
- >
-
-
;
-};
-
-export type MarketplaceModalProps = {
- show: boolean;
- listing: Array;
- installedListing: Array;
- siteURL: string;
- pluginStatuses?: Record;
- firstAdminVisitMarketplaceStatus: boolean;
+type MarketplaceModalProps = {
openedFrom: OpenedFromType;
- actions: {
- closeModal: () => void;
- fetchListing(localOnly?: boolean): Promise<{error?: Error}>;
- filterListing(filter: string): Promise<{error?: Error}>;
- setFirstAdminVisitMarketplaceStatus(): Promise;
- getPluginStatuses(): Promise;
- };
-};
-
-type MarketplaceModalState = {
- tabKey: unknown;
- loading: boolean;
- serverError?: Error;
- filter: string;
-};
-
-// MarketplaceModal is the marketplace modal.
-export default class MarketplaceModal extends React.PureComponent {
- private filterRef: React.RefObject;
-
- constructor(props: MarketplaceModalProps) {
- super(props);
-
- this.state = {
- tabKey: MarketplaceTabs.ALL_LISTING,
- loading: true,
- serverError: undefined,
- filter: '',
- };
-
- this.filterRef = React.createRef();
- }
-
- componentDidMount(): void {
- trackEvent('plugins', 'ui_marketplace_opened', {from: this.props.openedFrom});
-
- this.fetchListing();
- this.props.actions.getPluginStatuses();
- if (!this.props.firstAdminVisitMarketplaceStatus) {
- trackEvent('plugins', 'ui_first_admin_visit_marketplace_status');
-
- this.props.actions.setFirstAdminVisitMarketplaceStatus();
- }
-
- this.filterRef.current?.focus();
- }
-
- componentDidUpdate(prevProps: MarketplaceModalProps): void {
- // Automatically refresh the component when a plugin is installed or uninstalled.
- if (this.props.pluginStatuses !== prevProps.pluginStatuses) {
- this.fetchListing();
- }
- }
-
- fetchListing = async (): Promise => {
- const {error} = await this.props.actions.fetchListing();
- this.setState({loading: false, serverError: error});
- }
-
- close = (): void => {
- trackEvent('plugins', 'ui_marketplace_closed');
- this.props.actions.closeModal();
- }
-
- changeTab: SelectCallback = (tabKey: any): void => {
- this.setState({tabKey});
- }
-
- onInput = (): void => {
- if (this.filterRef.current) {
- this.setState({filter: this.filterRef.current.value});
-
- this.debouncedSearch();
- }
- }
-
- handleClearSearch = (): void => {
- if (this.filterRef.current) {
- this.filterRef.current.value = '';
- this.setState({filter: this.filterRef.current.value}, this.doSearch);
- }
- }
-
- doSearch = async (): Promise => {
- trackEvent('plugins', 'ui_marketplace_search', {filter: this.state.filter});
-
- const {error} = await this.props.actions.filterListing(this.state.filter);
-
- this.setState({serverError: error});
- }
-
- debouncedSearch = debounce(this.doSearch, SEARCH_TIMEOUT_MILLISECONDS);
-
- render(): JSX.Element {
- const input = (
-
- );
-
- let errorBanner = null;
- if (this.state.serverError) {
- errorBanner = (
-
- );
- }
-
- return (
-
-
- {errorBanner}
-
-
-
-
-
- {input}
-
-
- {this.state.loading ? }
-
-
-
-
-
-
- );
- }
}
+
+const MarketplaceModal = ({
+ openedFrom,
+}: MarketplaceModalProps) => {
+ const dispatch = useDispatch();
+ const {formatMessage} = useIntl();
+ const listRef = useRef(null);
+
+ const show = useSelector((state: GlobalState) => isModalOpen(state, ModalIdentifiers.PLUGIN_MARKETPLACE));
+ const listing = useSelector(getListing);
+ const installedListing = useSelector(getInstalledListing);
+ const pluginStatuses = useSelector((state: GlobalState) => state.entities.admin.pluginStatuses);
+ const hasFirstAdminVisitedMarketplace = useSelector(getFirstAdminVisitMarketplaceStatus);
+
+ const [tabKey, setTabKey] = useState(MarketplaceTabs.ALL_LISTING);
+ const [filter, setFilter] = useState('');
+ const [page, setPage] = useState(0);
+ const [hasLoaded, setHasLoaded] = useState(false);
+ const [loading, setLoading] = React.useState(true);
+ const [serverError, setServerError] = React.useState(false);
+
+ const doFetchListing = useCallback(async () => {
+ const {error} = await dispatch(fetchListing()) as ActionResult;
+
+ if (error) {
+ setServerError(true);
+ }
+
+ setLoading(false);
+ }, []);
+
+ const doSearch = useCallback(async () => {
+ trackEvent('plugins', 'ui_marketplace_search', {filter});
+
+ const {error} = await dispatch(filterListing(filter)) as ActionResult;
+
+ if (error) {
+ setServerError(true);
+ }
+ }, [filter]);
+
+ const debouncedSearch = debounce(doSearch, SEARCH_TIMEOUT_MILLISECONDS);
+
+ useEffect(() => {
+ async function doFetch() {
+ await dispatch(getPluginStatuses());
+ await doFetchListing();
+ setHasLoaded(true);
+ }
+
+ trackEvent('plugins', 'ui_marketplace_opened', {from: openedFrom});
+
+ if (!hasFirstAdminVisitedMarketplace) {
+ trackEvent('plugins', 'ui_first_admin_visit_marketplace_status');
+ dispatch(setFirstAdminVisitMarketplaceStatus());
+ }
+
+ doFetch();
+ }, []);
+
+ useEffect(() => {
+ if (hasLoaded) {
+ doFetchListing();
+ }
+ }, [pluginStatuses]);
+
+ useEffect(() => {
+ if (hasLoaded) {
+ debouncedSearch();
+ setPage(0);
+ }
+ }, [filter]);
+
+ const scrollListToTop = useCallback(() => {
+ if (listRef.current) {
+ listRef.current.scrollTop = 0;
+ }
+ }, []);
+
+ const handleOnClose = () => {
+ trackEvent('plugins', 'ui_marketplace_closed');
+ dispatch(closeModal(ModalIdentifiers.PLUGIN_MARKETPLACE));
+ };
+
+ const handleChangeTab: SelectCallback = useCallback((tabKey) => {
+ setTabKey(tabKey);
+ setPage(0);
+ scrollListToTop();
+ }, [scrollListToTop]);
+
+ const handleOnChange = useCallback((event: React.ChangeEvent) => {
+ setFilter(event.target.value);
+ }, []);
+
+ const handleOnClear = useCallback(() => {
+ setFilter('');
+ }, []);
+
+ const handleOnNextPage = useCallback(() => {
+ setPage(page + 1);
+ scrollListToTop();
+ }, [page, scrollListToTop]);
+
+ const handleOnPreviousPage = useCallback(() => {
+ setPage(page - 1);
+ scrollListToTop();
+ }, [page, scrollListToTop]);
+
+ const handleNoResultsButtonClick = useCallback(() => {
+ handleChangeTab(MarketplaceTabs.ALL_LISTING);
+ }, [handleChangeTab]);
+
+ const getHeaderInput = useCallback(() => (
+ System Console.',
+ },
+ {linkConsole},
+ )
+ ) : undefined}
+ show={show}
+ compassDesign={true}
+ bodyPadding={false}
+ footerDivider={true}
+ onExited={handleOnClose}
+ footerContent={getFooterContent()}
+ headerInput={getHeaderInput()}
+ >
+
+
+ {loading ? (
+
+
+
+
+
+ );
+};
+
+export default MarketplaceModal;
diff --git a/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap b/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap
index abebd8539b..5252df431b 100644
--- a/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap
+++ b/webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
+
+
+
+
+