From 695490a743346690a299c5dac286737e2de5a717 Mon Sep 17 00:00:00 2001
From: Siarhei Yelin <Siarhei_Yelin@epam.com>
Date: Tue, 19 Mar 2024 12:57:56 +0300
Subject: [PATCH] Add inline preview feature

---
 .../preview/componentPreview/utils/previewUtils.ts   | 12 ++++++------
 .../componentPreview/view/editPreviewModal.tsx       | 11 +++++++++--
 .../preview/componentPreview/view/previewToolbar.tsx |  7 ++-----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/src/preview/componentPreview/utils/previewUtils.ts b/app/src/preview/componentPreview/utils/previewUtils.ts
index ea31ac4d95..daf378335c 100644
--- a/app/src/preview/componentPreview/utils/previewUtils.ts
+++ b/app/src/preview/componentPreview/utils/previewUtils.ts
@@ -26,12 +26,12 @@ export const componentsPreviewMap = componentsStructure.reduce<Map<string, { pre
     const config = Comp?.config;
     if (config) {
         const previewIds = getPreviewOptions(config);
-        if (previewIds?.length) {
-            acc.set(entry.id, {
-                previewIds,
-                config,
-            });
-        }
+        // if (previewIds?.length) {
+        acc.set(entry.id, {
+            previewIds,
+            config,
+        });
+        // }
     }
     return acc;
 }, new Map());
diff --git a/app/src/preview/componentPreview/view/editPreviewModal.tsx b/app/src/preview/componentPreview/view/editPreviewModal.tsx
index 26aa84b494..7dcdd0cf0c 100644
--- a/app/src/preview/componentPreview/view/editPreviewModal.tsx
+++ b/app/src/preview/componentPreview/view/editPreviewModal.tsx
@@ -14,7 +14,7 @@ import {
 import { componentItems, componentsPreviewMap, getDefaultPreviewId } from '../utils/previewUtils';
 import { useArrayDataSource } from '@epam/uui-core';
 import { TTheme } from '../../../common/docs/docsConstants';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { isPreviewIdInline } from '../../../common/docs/componentEditor/previewLinkUtils';
 
 const title = 'Edit';
@@ -41,7 +41,14 @@ export function EditPreviewModal(modalProps: IModal<TComponentPreviewParams>) {
         previewItems = previewItems.concat([{ id: previewId, name: '<inline>' }]);
     }
 
-    const dsComponents = useArrayDataSource({ items: componentItems }, [componentItems]);
+    const componentItemsAll: { id: string, name: string }[] = useMemo(() => {
+        if (!componentItems.find(({ id }) => id === componentId)) {
+            return componentItems.concat([{ id: componentId, name: componentId }]);
+        }
+        return componentItems;
+    }, [componentId]);
+
+    const dsComponents = useArrayDataSource({ items: componentItemsAll }, [componentItemsAll]);
     const dsPreview = useArrayDataSource<{ id: string, name: string }, unknown, unknown>({ items: previewItems }, [previewItems]);
     const dsThemes = useArrayDataSource({ items: Object.values(TTheme).map((id) => ({ id, name: id })) }, []);
 
diff --git a/app/src/preview/componentPreview/view/previewToolbar.tsx b/app/src/preview/componentPreview/view/previewToolbar.tsx
index e563026966..03f0831d8e 100644
--- a/app/src/preview/componentPreview/view/previewToolbar.tsx
+++ b/app/src/preview/componentPreview/view/previewToolbar.tsx
@@ -8,7 +8,7 @@ import { useUuiContext } from '@epam/uui-core';
 import { useMemo, useState } from 'react';
 import { TComponentPreviewParams } from '../types';
 import { EditPreviewModal } from './editPreviewModal';
-import { componentItems, componentsPreviewMap } from '../utils/previewUtils';
+import { componentsPreviewMap } from '../utils/previewUtils';
 import { isPreviewIdInline } from '../../../common/docs/componentEditor/previewLinkUtils';
 
 interface IPreviewToolbar {
@@ -163,10 +163,7 @@ export function PreviewToolbar(props: IPreviewToolbar) {
 }
 
 function normalizeModalValue(propsValue: TComponentPreviewParams): TComponentPreviewParams {
-    let componentId: string;
-    if (propsValue.componentId && componentItems.find((i) => i.id === propsValue.componentId)) {
-        componentId = propsValue.componentId;
-    }
+    const componentId: string = propsValue.componentId;
     const previewItems = componentsPreviewMap.get(componentId)?.previewIds || [];
 
     let previewId: string;