Whats new (#462)

* added whats new feature

* added Changes log feature in whats new modal

* small fix

* samll fixe

* fixed parsing error issue and carousal dots issue

* excluded node_modules from parsing in webpack

* add support for video and make change log data optional

catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/ChangeLogs.tsx

@@ -22,33 +22,43 @@ import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEdito
 
 type Props = {
   data: {
-    highlight: string;
-    bugFix: string;
-    miscellaneous: string;
+    highlight?: string;
+    bugFix?: string;
+    miscellaneous?: string;
   };
 };
 
 const ChangeLogs = ({ data }: Props) => {
   return (
     <div>
-      <div className="tw-mb-4">
-        <div className="tw-border-b tw-mb-2.5 tw-border-text">
-          <p className="tw-text-base tw-font-medium tw-mb-2.5">Highlights</p>
+      {data.highlight && (
+        <div className="tw-mb-4">
+          <div className="tw-border-b tw-mb-2.5 tw-border-text">
+            <p className="tw-text-base tw-font-medium tw-mb-2.5">Highlights</p>
+          </div>
+          <RichTextEditorPreviewer markdown={data.highlight} />
         </div>
-        <RichTextEditorPreviewer markdown={data.highlight} />
-      </div>
-      <div className="tw-mb-4">
-        <div className="tw-border-b tw-mb-2.5 tw-border-text">
-          <p className="tw-text-base tw-font-medium tw-mb-2.5">Bug fixes</p>
+      )}
+
+      {data.bugFix && (
+        <div className="tw-mb-4">
+          <div className="tw-border-b tw-mb-2.5 tw-border-text">
+            <p className="tw-text-base tw-font-medium tw-mb-2.5">Bug fixes</p>
+          </div>
+          <RichTextEditorPreviewer markdown={data.bugFix} />
         </div>
-        <RichTextEditorPreviewer markdown={data.bugFix} />
-      </div>
-      <div className="tw-mb-4">
-        <div className="tw-border-b tw-mb-2.5 tw-border-text">
-          <p className="tw-text-base tw-font-medium tw-mb-2.5">Miscellaneous</p>
+      )}
+
+      {data.miscellaneous && (
+        <div className="tw-mb-4">
+          <div className="tw-border-b tw-mb-2.5 tw-border-text">
+            <p className="tw-text-base tw-font-medium tw-mb-2.5">
+              Miscellaneous
+            </p>
+          </div>
+          <RichTextEditorPreviewer markdown={data.miscellaneous} />
         </div>
-        <RichTextEditorPreviewer markdown={data.miscellaneous} />
-      </div>
+      )}
     </div>
   );
 };

catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx

@@ -22,7 +22,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import Slider from 'react-slick';
 
 type Props = {
-  data: { title: string; description: string; image: string }[];
+  data: {
+    title: string;
+    description: string;
+    isImage: boolean;
+    path: string;
+  }[];
 };
 
 const FeaturesCarousel = ({ data }: Props) => {
@@ -51,11 +56,21 @@ const FeaturesCarousel = ({ data }: Props) => {
     <>
       <Slider ref={sliderRef} {...settings}>
         {data.map((d) => (
-          <div className="tw-pr-2" key={uniqueId()}>
+          <div className="tw-px-1" key={uniqueId()}>
             <p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
             <p className="tw-text-sm tw-mb-3">{d.description}</p>
             <div className="tw-max-w-3xl">
-              <img alt="feature" className="tw-w-full" src={d.image} />
+              {d.isImage ? (
+                <img alt="feature" className="tw-w-full" src={d.path} />
+              ) : (
+                <iframe
+                  allowFullScreen
+                  className="tw-w-full"
+                  frameBorder={0}
+                  height={278}
+                  src={`https://www.youtube.com/embed/${d.path}`}
+                />
+              )}
             </div>
           </div>
         ))}

catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts

@@ -19,7 +19,10 @@
 
 export const LATEST_VERSION_ID = 2;
 
-const dummyImg = 'https://via.placeholder.com/720x270';
+const dummyImg = 'https://via.placeholder.com/725x278';
+
+// for youtube video make isImage = false and path = {video embed id}
+// embed:- youtube video => share => click on embed and take id of it
 
 export const WHATS_NEW = [
   {
@@ -35,7 +38,8 @@ export const WHATS_NEW = [
             here', making it look like readable English. Many desktop publishing packages and web
              page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
              ipsum' will uncover many web sites still in their infancy.`,
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
       {
         title: 'lorem ipsum v4.00',
@@ -45,7 +49,8 @@ export const WHATS_NEW = [
             here', making it look like readable English. Many desktop publishing packages and web
              page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
              ipsum' will uncover many web sites still in their infancy.`,
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
     ],
     changeLogs: {
@@ -65,25 +70,29 @@ export const WHATS_NEW = [
         title: 'lorem ipsum v4.50',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
       {
         title: 'lorem ipsum v4.50',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
       {
         title: 'lorem ipsum v4.50',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
       {
         title: 'lorem ipsum v4.50',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
     ],
     changeLogs: {
@@ -103,19 +112,22 @@ export const WHATS_NEW = [
         title: 'lorem ipsum v5.01 slide 1',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
       {
         title: 'lorem ipsum v5.01 slide 2',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: false,
+        path: 'jssO8-5qmag',
       },
       {
         title: 'lorem ipsum v5.01 slide 3',
         description:
           "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. ",
-        image: dummyImg,
+        isImage: true,
+        path: dummyImg,
       },
     ],
     changeLogs: {