feat: changed behaviour of new button for search and settings modules

src/shell/creation-button.tsx

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 import { reduce, groupBy } from 'lodash';
-import { MultiButton } from '@zextras/carbonio-design-system';
+import { MultiButton, Button, Dropdown } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { useActions } from '../store/integrations/hooks';
@@ -43,16 +43,23 @@ export const CreationButton: FC<{ activeRoute?: AppRoute }> = ({ activeRoute })
 	const [t] = useTranslation();
 	const location = useLocation();
 	const actions = useActions({ activeRoute, location }, ACTION_TYPES.NEW);
+	const [open, setOpen] = useState(false);
 	const primaryAction = useMemo(
 		() =>
 			actions?.find?.(
 				(a) => (a.group === activeRoute?.id || a.group === activeRoute?.app) && a.primary
-			) ?? actions?.find?.((a) => a.primary),
+			),
 		[actions, activeRoute?.app, activeRoute?.id]
 	);
 	const secondaryActions = useSecondaryActions(actions, activeRoute);
 
-	return (
+	const onClose = useCallback(() => {
+		setOpen(false);
+	}, []);
+	const onOpen = useCallback(() => {
+		setOpen(true);
+	}, []);
+	return primaryAction ? (
 		<MultiButton
 			style={{ height: '42px' }}
 			background="primary"
@@ -61,5 +68,15 @@ export const CreationButton: FC<{ activeRoute?: AppRoute }> = ({ activeRoute })
 			items={secondaryActions}
 			disabled={!primaryAction || primaryAction?.disabled}
 		/>
+	) : (
+		<Dropdown items={secondaryActions} onClose={onClose} onOpen={onOpen}>
+			<Button
+				style={{ height: '42px' }}
+				background="primary"
+				items={secondaryActions}
+				label={t('new', 'New')}
+				icon={open ? 'ChevronUp' : 'ChevronDown'}
+			/>
+		</Dropdown>
 	);
 };