chore(ui): remove react-slick and use AntD carousel (#9586)

openmetadata-ui/src/main/resources/ui/package.json

@@ -82,7 +82,6 @@
     "react-oidc": "^1.0.3",
     "react-quill": "^2.0.0",
     "react-router-dom": "^5.2.0",
-    "react-slick": "^0.28.1",
     "react-tippy": "^1.4.0",
     "react-toastify": "^8.2.0",
     "reactflow": "^11.1.1",
@@ -163,7 +162,6 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-lazylog": "^4.5.1",
     "@types/react-router-dom": "^5.1.7",
-    "@types/react-slick": "^0.23.5",
     "@types/react-test-renderer": "^17.0.0",
     "@types/reactjs-localstorage": "^1.0.0",
     "@types/recharts": "^1.8.23",

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.interface.ts

@@ -0,0 +1,23 @@
+/*
+ *  Copyright 2022 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.
+ */
+
+export type CarousalData = {
+  title: string;
+  description: string;
+  isImage: boolean;
+  path: string;
+};
+
+export type FeaturesCarouselProps = {
+  data: CarousalData[];
+};

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx

@@ -11,58 +11,52 @@
  *  limitations under the License.
  */
 
-/* eslint-disable max-len */
+import { Carousel } from 'antd';
-
+import { CarouselProps, CarouselRef } from 'antd/lib/carousel';
 import { uniqueId } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Slider from 'react-slick';
 import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
+import { FeaturesCarouselProps } from './FeaturesCarousel.interface';
 
-type CarousalData = {
+const FeaturesCarousel = ({ data }: FeaturesCarouselProps) => {
-  title: string;
-  description: string;
-  isImage: boolean;
-  path: string;
-};
-
-type Props = {
-  data: CarousalData[];
-};
-
-const FeaturesCarousel = ({ data }: Props) => {
   const [isDataChange, setIsDataChange] = useState(false);
-  const sliderRef = useRef<Slider | null>(null);
+  const sliderRef = useRef<CarouselRef | null>(null);
 
-  const settings = {
+  const FEATURES_CAROUSEL_SETTINGS = useMemo(
-    dots: true,
+    () =>
-    dotsClass: 'slick-dots testid-dots-button',
+      ({
-    arrows: false,
+        dots: {
-    infinite: true,
+          className: 'carousel-dots testid-dots-button',
-    speed: 500,
+        },
-    slidesToShow: 1,
+        autoplay: true,
-    slidesToScroll: 1,
+        prefixCls: 'features-carousel',
-    beforeChange: (current: number) => {
+        infinite: true,
-      if (current >= data.length) {
+        slidesToShow: 1,
-        setIsDataChange(true);
+        slidesToScroll: 1,
-      } else {
+        beforeChange: (current: number) => {
-        setIsDataChange(false);
+          if (current >= data.length) {
-      }
+            setIsDataChange(true);
-    },
+          } else {
-    onReInit: () => {
+            setIsDataChange(false);
-      if (isDataChange) {
+          }
-        setTimeout(() => {
+        },
-          sliderRef?.current?.slickGoTo(0);
+        onReInit: () => {
-        }, 200);
+          if (isDataChange) {
-      }
+            setTimeout(() => {
-    },
+              sliderRef?.current?.goTo(0);
-  };
+            }, 200);
+          }
+        },
+      } as CarouselProps),
+    [sliderRef, setIsDataChange, data, isDataChange]
+  );
 
   useEffect(() => {
     setIsDataChange(true);
   }, [data]);
 
   return (
-    <Slider ref={sliderRef} {...settings}>
+    <Carousel ref={sliderRef} {...FEATURES_CAROUSEL_SETTINGS}>
       {data.map((d) => (
         <div className="tw-px-1" key={uniqueId()}>
           <p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
@@ -89,7 +83,7 @@ const FeaturesCarousel = ({ data }: Props) => {
           </div>
         </div>
       ))}
-    </Slider>
+    </Carousel>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/constants/Login.constants.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { CarouselProps } from 'antd';
 import lineage from '../assets/img/lineage.png';
 import screenShot2 from '../assets/img/screenShot1.png';
 import screenShot1 from '../assets/img/screenShot2.png';
@@ -40,13 +41,12 @@ export const LOGIN_SLIDE = [
   },
 ];
 
-export const LOGIN_SLIDER_SETTINGS = {
+export const LOGIN_CAROUSEL_SETTINGS = {
-  arrows: false,
   autoplay: true,
-  dots: true,
+  prefixCls: 'login-carousel',
-  dotsClass: 'login-slider slick-dots',
+  dots: {
-  infinite: true,
+    className: 'carousel-dots',
+  },
   slidesToShow: 1,
   slidesToScroll: 1,
-  speed: 500,
+} as CarouselProps;
-};

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -302,7 +302,7 @@
     "owner": "Owner",
     "owner-plural": "Owners",
     "page-views-by-data-asset-plural": "Page views by data assets",
-    "partitions": "Partitions",
+    "partition-plural": "Partitions",
     "passed": "Passed",
     "password": "Password",
     "password-not-match": "Password doesn't match",

openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.test.tsx

@@ -12,43 +12,53 @@
  */
 
 import { act, render, screen } from '@testing-library/react';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { LOGIN_SLIDE } from '../../constants/Login.constants';
 import LoginCarousel from './LoginCarousel';
 
-jest.mock('react-slick', () => {
-  return jest
-    .fn()
-    .mockImplementation(({ children }: { children: ReactNode }) => (
-      <div data-testid="react-slick">{children}</div>
-    ));
-});
-
-jest.mock('i18next', () => ({
-  t: jest.fn().mockImplementation((key) => key),
-}));
-
 describe('Test LoginCarousel component', () => {
-  it('LoginCarousel component should render properly', async () => {
+  it('renders the carousel container', () => {
+    render(<LoginCarousel />);
+
+    expect(screen.getByTestId('carousel-container')).toBeInTheDocument();
+  });
+
+  it('renders a carousel with the correct number of slides', async () => {
     await act(async () => {
       render(<LoginCarousel />, {
         wrapper: MemoryRouter,
       });
     });
 
-    const reactSlick = await screen.findByTestId('react-slick');
+    const sliderContainers = await screen.findAllByTestId('slider-container');
-    const carouselContainer = await screen.findByTestId('carousel-container');
+
-    const sliderContainer = await screen.findAllByTestId('slider-container');
+    const slides = sliderContainers.map(
-    const descriptions = await screen.findAllByTestId(
+      (slider) => slider.parentElement?.parentElement as HTMLElement
-      'carousel-slide-description'
     );
 
-    expect(reactSlick).toBeInTheDocument();
+    const slackList = slides.filter(
-    expect(carouselContainer).toBeInTheDocument();
+      (slide) => !slide.classList.contains('slick-cloned')
-    expect(sliderContainer).toHaveLength(LOGIN_SLIDE.length);
-    expect(descriptions.map((d) => d.textContent)).toEqual(
-      LOGIN_SLIDE.map((d) => `message.${d.descriptionKey}`)
     );
+
+    expect(slackList).toHaveLength(LOGIN_SLIDE.length);
+  });
+
+  it('renders the correct slide description for each slide', async () => {
+    await act(async () => {
+      render(<LoginCarousel />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    const slideDescriptions = await screen.findAllByTestId(
+      'carousel-slide-description'
+    );
+    const descriptions = LOGIN_SLIDE.map((d) => `message.${d.descriptionKey}`);
+    slideDescriptions.forEach((description) => {
+      expect(
+        descriptions.includes(description.textContent as string)
+      ).toBeTruthy();
+    });
   });
 });

openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx

@@ -11,19 +11,19 @@
  *  limitations under the License.
  */
 
+import { Carousel } from 'antd';
 import { t } from 'i18next';
 import { uniqueId } from 'lodash';
 import React from 'react';
-import Slider from 'react-slick';
 import {
+  LOGIN_CAROUSEL_SETTINGS,
   LOGIN_SLIDE,
-  LOGIN_SLIDER_SETTINGS,
 } from '../../constants/Login.constants';
 
 const LoginCarousel = () => {
   return (
     <div data-testid="carousel-container" style={{ width: '85%' }}>
-      <Slider {...LOGIN_SLIDER_SETTINGS}>
+      <Carousel {...LOGIN_CAROUSEL_SETTINGS}>
         {LOGIN_SLIDE.map((data) => (
           <div data-testid="slider-container" key={uniqueId()}>
             <div>
@@ -43,7 +43,7 @@ const LoginCarousel = () => {
             </div>
           </div>
         ))}
-      </Slider>
+      </Carousel>
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/yarn.lock

@@ -3776,13 +3776,6 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-slick@^0.23.5":
-  version "0.23.5"
-  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.5.tgz#e55fdc79bf19022ef77a6f22e9d64fd0f7463cc4"
-  integrity sha512-dQ/HwsLpnWXD5d+52WwXIQTfNCRpgd+0CKb+aA8g2CaIpA9T9COdjVYb9KI40Osb4rIgqR7u2AqtL2/HGbBMpg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-test-renderer@>=16.9.0", "@types/react-test-renderer@^17.0.0":
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
@@ -6772,11 +6765,6 @@ enhanced-resolve@^5.9.2:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquire.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
-  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
-
 enquirer@^2.3.5, enquirer@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -12248,17 +12236,6 @@ react-router@5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-slick@^0.28.1:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.28.1.tgz#12c18d991b59432df9c3757ba540a227b3fb85b9"
-  integrity sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==
-  dependencies:
-    classnames "^2.2.5"
-    enquire.js "^2.1.6"
-    json2mq "^0.2.0"
-    lodash.debounce "^4.0.8"
-    resize-observer-polyfill "^1.5.0"
-
 react-smooth@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.1.tgz#74c7309916d6ccca182c4b30c8992f179e6c5a05"
@@ -12671,7 +12648,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==