feat(chat): implement unpublish dialog (Issue epam#318) (epam#1449)

apps/chat/src/components/Chat/Publish/PublicationItemsList.tsx

@@ -0,0 +1,138 @@
+import { useTranslation } from 'next-i18next';
+
+import classNames from 'classnames';
+
+import { constructPath } from '@/src/utils/app/file';
+import { splitEntityId } from '@/src/utils/app/folders';
+
+import { ConversationInfo } from '@/src/types/chat';
+import { ApiKeys, Entity } from '@/src/types/common';
+import { DialFile } from '@/src/types/files';
+import { PublishActions } from '@/src/types/publication';
+import { SharingType } from '@/src/types/share';
+import { Translation } from '@/src/types/translation';
+
+import CollapsibleSection from '@/src/components/Common/CollapsibleSection';
+import {
+  ConversationRow,
+  PromptsRow,
+} from '@/src/components/Common/ReplaceConfirmationModal/Components';
+
+import {
+  ConversationPublicationResources,
+  FilePublicationResources,
+  PromptPublicationResources,
+} from './PublicationResources';
+
+interface Props {
+  type: SharingType;
+  entity: Entity;
+  entities: Entity[];
+  path: string;
+  files: DialFile[];
+  containerClassNames?: string;
+  collapsibleSectionClassNames?: string;
+}
+
+export function PublicationItemsList({
+  type,
+  entities,
+  entity,
+  path,
+  files,
+  containerClassNames,
+  collapsibleSectionClassNames,
+}: Props) {
+  const { t } = useTranslation(Translation.Chat);
+
+  return (
+    <div
+      className={classNames(
+        'flex w-full flex-col gap-[2px] md:max-w-[550px]',
+        containerClassNames,
+      )}
+    >
+      {(type === SharingType.Conversation ||
+        type === SharingType.ConversationFolder) && (
+        <CollapsibleSection
+          name={t('Conversations')}
+          openByDefault
+          className={collapsibleSectionClassNames}
+          dataQa="conversations-to-send-request"
+        >
+          {type === SharingType.Conversation ? (
+            <ConversationRow
+              itemComponentClassNames="cursor-pointer"
+              item={entity as ConversationInfo}
+              level={0}
+            />
+          ) : (
+            <ConversationPublicationResources
+              rootFolder={entity}
+              resources={entities.map((entity) => ({
+                action: PublishActions.ADD,
+                sourceUrl: entity.id,
+                targetUrl: constructPath(
+                  ApiKeys.Conversations,
+                  'public',
+                  path,
+                  splitEntityId(entity.id).name,
+                ),
+                reviewUrl: entity.id,
+              }))}
+              forViewOnly
+            />
+          )}
+        </CollapsibleSection>
+      )}
+      {!!files.length && (
+        <CollapsibleSection
+          name={t('Files')}
+          openByDefault
+          dataQa="files-to-send-request"
+          className={collapsibleSectionClassNames}
+        >
+          <FilePublicationResources
+            uploadedFiles={files}
+            resources={[]}
+            forViewOnly
+          />
+        </CollapsibleSection>
+      )}
+      {(type === SharingType.Prompt || type === SharingType.PromptFolder) && (
+        <CollapsibleSection
+          name={t('Prompts')}
+          openByDefault
+          dataQa="prompts-to-send-request"
+          className={collapsibleSectionClassNames}
+        >
+          {type === SharingType.Prompt ? (
+            <PromptsRow
+              itemComponentClassNames="cursor-pointer"
+              item={entity}
+              level={0}
+            />
+          ) : (
+            <PromptPublicationResources
+              rootFolder={entity}
+              resources={[
+                {
+                  action: PublishActions.ADD,
+                  sourceUrl: entity.id,
+                  targetUrl: constructPath(
+                    ApiKeys.Prompts,
+                    'public',
+                    path,
+                    entity.name,
+                  ),
+                  reviewUrl: entity.id,
+                },
+              ]}
+              forViewOnly
+            />
+          )}
+        </CollapsibleSection>
+      )}
+    </div>
+  );
+}

apps/chat/src/components/Chat/Publish/PublishWizard.tsx

@@ -13,17 +13,15 @@ import { useTranslation } from 'next-i18next';
 import classNames from 'classnames';
 
 import { constructPath } from '@/src/utils/app/file';
-import { splitEntityId } from '@/src/utils/app/folders';
 import { getRootId } from '@/src/utils/app/id';
-import { EnumMapper } from '@/src/utils/app/mappers';
 import { createTargetUrl } from '@/src/utils/app/publications';
 import { getAttachments } from '@/src/utils/app/share';
 import { ApiUtils } from '@/src/utils/server/api';
 
-import { Conversation, ConversationInfo } from '@/src/types/chat';
+import { Conversation } from '@/src/types/chat';
 import { FeatureType, ShareEntity } from '@/src/types/common';
 import { ModalState } from '@/src/types/modal';
-import { PublishActions, TargetAudienceFilter } from '@/src/types/publication';
+import { TargetAudienceFilter } from '@/src/types/publication';
 import { SharingType } from '@/src/types/share';
 import { Translation } from '@/src/types/translation';
 
@@ -41,15 +39,7 @@ import CollapsibleSection from '@/src/components/Common/CollapsibleSection';
 import Modal from '@/src/components/Common/Modal';
 import Tooltip from '@/src/components/Common/Tooltip';
 
-import {
-  ConversationRow,
-  PromptsRow,
-} from '../../Common/ReplaceConfirmationModal/Components';
-import {
-  ConversationPublicationResources,
-  FilePublicationResources,
-  PromptPublicationResources,
-} from './PublicationResources';
+import { PublicationItemsList } from './PublicationItemsList';
 import { TargetAudienceFilterComponent } from './TargetAudienceFilter';
 
 import compact from 'lodash-es/compact';
@@ -415,85 +405,14 @@ export function PublishModal({
               />
             </section>
           </div>
-          <div className="flex w-full flex-col gap-[2px] px-5 py-4 md:max-w-[550px]">
-            {(type === SharingType.Conversation ||
-              type === SharingType.ConversationFolder) && (
-              <CollapsibleSection
-                name={t('Conversations')}
-                openByDefault
-                dataQa="conversations-to-send-request"
-              >
-                {type === SharingType.Conversation ? (
-                  <ConversationRow
-                    itemComponentClassNames="cursor-pointer"
-                    item={entity as ConversationInfo}
-                    level={0}
-                  />
-                ) : (
-                  <ConversationPublicationResources
-                    rootFolder={entity}
-                    resources={entities.map((entity) => ({
-                      action: PublishActions.ADD,
-                      sourceUrl: entity.id,
-                      targetUrl: constructPath(
-                        EnumMapper.getApiKeyByFeatureType(FeatureType.Chat),
-                        'public',
-                        path,
-                        splitEntityId(entity.id).name,
-                      ),
-                      reviewUrl: entity.id,
-                    }))}
-                    forViewOnly
-                  />
-                )}
-              </CollapsibleSection>
-            )}
-            {!!files.length && (
-              <CollapsibleSection
-                name={t('Files')}
-                openByDefault
-                dataQa="files-to-send-request"
-              >
-                <FilePublicationResources
-                  uploadedFiles={files}
-                  resources={[]}
-                  forViewOnly
-                />
-              </CollapsibleSection>
-            )}
-            {(type === SharingType.Prompt ||
-              type === SharingType.PromptFolder) && (
-              <CollapsibleSection
-                name={t('Prompts')}
-                openByDefault
-                dataQa="prompts-to-send-request"
-              >
-                {type === SharingType.Prompt ? (
-                  <PromptsRow
-                    itemComponentClassNames="cursor-pointer"
-                    item={entity}
-                    level={0}
-                  />
-                ) : (
-                  <PromptPublicationResources
-                    rootFolder={entity}
-                    resources={entities.map((entity) => ({
-                      action: PublishActions.ADD,
-                      sourceUrl: entity.id,
-                      targetUrl: constructPath(
-                        EnumMapper.getApiKeyByFeatureType(FeatureType.Prompt),
-                        'public',
-                        path,
-                        splitEntityId(entity.id).name,
-                      ),
-                      reviewUrl: entity.id,
-                    }))}
-                    forViewOnly
-                  />
-                )}
-              </CollapsibleSection>
-            )}
-          </div>
+          <PublicationItemsList
+            type={type}
+            entity={entity}
+            entities={entities}
+            path={path}
+            files={files}
+            containerClassNames="px-5 py-4"
+          />
         </div>
 
         <div className="flex justify-end gap-3 p-4">

apps/chat/src/components/Chat/UnpublishModal.tsx → apps/chat/src/components/Chat/Publish/UnpublishModal.tsx

@@ -13,20 +13,25 @@ import { Translation } from '@/src/types/translation';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { PublicationActions } from '@/src/store/publication/publication.reducers';
 
-import Modal from '../Common/Modal';
+import Modal from '../../Common/Modal';
+import { PublicationItemsList } from './PublicationItemsList';
 
 interface Props {
+  subtitle: string;
   entity: Entity;
+  entities: Entity[];
   isOpen: boolean;
   type: SharingType;
   onClose: () => void;
 }
 
-export default function UnpublishModal({
+export function UnpublishModal({
   entity,
+  entities,
   isOpen,
   onClose,
   type,
+  subtitle,
 }: Props) {
   const { t } = useTranslation(Translation.SideBar);
 
@@ -55,7 +60,7 @@ export default function UnpublishModal({
         PublicationActions.deletePublication({
           targetFolder: `${getFolderIdFromEntityId(entity.id).split('/').slice(1).join('/')}/`,
           resources: [
-            { targetUrl: entity.id },
+            ...entities.map((entity) => ({ targetUrl: entity.id })),
             ...files.map((f) => ({
               targetUrl: f.id,
             })),
@@ -65,39 +70,53 @@ export default function UnpublishModal({
 
       onClose();
     },
-    [dispatch, entity.id, files, onClose],
+    [dispatch, entities, entity.id, files, onClose],
   );
 
   return (
     <Modal
       portalId="theme-main"
-      containerClassName="inline-block h-[434px] sm:w-[424px] p-6 w-full"
+      containerClassName="h-full py-4 align-bottom transition-all !max-h-[434px] sm:w-[424px] w-full"
       dataQa="unpublish-modal"
       state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={onClose}
     >
-      <div className="flex h-full flex-col justify-between gap-2">
-        <h4 className=" max-h-[50px] text-base font-semibold">
+      <div className="flex h-full flex-col">
+        <h4 className="px-6 text-base font-semibold">
           <span className="line-clamp-2 break-words">
             {`${t('Unpublish')}: ${entity.name.trim()}`}
           </span>
         </h4>
-        <div className="flex justify-end gap-3">
-          <button
-            className="button button-secondary"
-            onClick={handleClose}
-            data-qa="cancel"
-          >
-            {t('Cancel')}
-          </button>
-          <button
-            className="button button-primary"
-            onClick={handleUnpublish}
-            data-qa="unpublish"
-            autoFocus
-          >
-            {t('Unpublish')}
-          </button>
+        <h5 className="mb-4 mt-2 px-6 text-secondary">{subtitle}</h5>
+        <div className="flex h-full flex-col justify-between gap-4 divide-y divide-tertiary">
+          <div className="max-h-[250px] overflow-scroll">
+            <PublicationItemsList
+              collapsibleSectionClassNames="!px-0"
+              containerClassNames="px-6"
+              type={type}
+              entity={entity}
+              entities={entities}
+              path={''}
+              files={files}
+            />
+          </div>
+          <div className="flex justify-end gap-3 px-6 pt-4">
+            <button
+              className="button button-secondary"
+              onClick={handleClose}
+              data-qa="cancel"
+            >
+              {t('Cancel')}
+            </button>
+            <button
+              className="button button-primary"
+              onClick={handleUnpublish}
+              data-qa="unpublish"
+              autoFocus
+            >
+              {t('Unpublish')}
+            </button>
+          </div>
         </div>
       </div>
     </Modal>