+
}
+ size="small"
+ type="text"
+ onClick={prevSlide}
+ />
+
setCurrentSlide(current)}
+ dots={false}
+ slidesToShow={avatarList.length < 3 ? avatarList.length : 3}>
+ {avatarList.map((avatar, index) => (
+
+
+
+ ))}
+
+
}
+ size="small"
+ type="text"
+ onClick={nextSlide}
+ />
+
+ );
+};
+
+export default AvatarCarousel;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/avatar-carousel.less b/openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/avatar-carousel.less
new file mode 100644
index 00000000000..ff03595271c
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/avatar-carousel.less
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import url('../../../styles/variables.less');
+
+.avatar-item {
+ opacity: 0.4;
+ &.active {
+ opacity: 1;
+ }
+ &:hover {
+ border-color: @border-color !important;
+ }
+ &:focus {
+ border-color: @border-color !important;
+ }
+}
+
+.avatar-carousel-container {
+ .slick-slide {
+ width: 32px !important;
+ }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx
index 0bf8e34842d..1407bc638d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/DescriptionV1.tsx
@@ -31,7 +31,11 @@ import {
TASK_ENTITIES,
} from '../../../utils/TasksUtils';
import { ModalWithMarkdownEditor } from '../../Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
+import SuggestionsAlert from '../../Suggestions/SuggestionsAlert/SuggestionsAlert';
+import { useSuggestionsContext } from '../../Suggestions/SuggestionsProvider/SuggestionsProvider';
+import SuggestionsSlider from '../../Suggestions/SuggestionsSlider/SuggestionsSlider';
import RichTextEditorPreviewer from '../RichTextEditor/RichTextEditorPreviewer';
+
const { Text } = Typography;
interface Props {
@@ -76,6 +80,9 @@ const DescriptionV1 = ({
reduceDescription,
}: Props) => {
const history = useHistory();
+ const { suggestions = [], selectedUserSuggestions = [] } =
+ useSuggestionsContext();
+
const handleRequestDescription = useCallback(() => {
history.push(
getRequestDescriptionPath(entityType as string, entityFqn as string)
@@ -88,8 +95,18 @@ const DescriptionV1 = ({
);
}, [entityType, entityFqn]);
- const entityLink = useMemo(() => {
- return getEntityFeedLink(entityType, entityFqn, EntityField.DESCRIPTION);
+ const { entityLink, entityLinkWithoutField } = useMemo(() => {
+ const entityLink = getEntityFeedLink(
+ entityType,
+ entityFqn,
+ EntityField.DESCRIPTION
+ );
+ const entityLinkWithoutField = getEntityFeedLink(entityType, entityFqn);
+
+ return {
+ entityLink,
+ entityLinkWithoutField,
+ };
}, [entityType, entityFqn]);
const taskActionButton = useMemo(() => {
@@ -170,26 +187,55 @@ const DescriptionV1 = ({
]
);
+ const suggestionData = useMemo(() => {
+ const activeSuggestion = selectedUserSuggestions.find(
+ (suggestion) => suggestion.entityLink === entityLinkWithoutField
+ );
+
+ if (activeSuggestion?.entityLink === entityLinkWithoutField) {
+ return (
+