Skip to content

Commit

Permalink
feat: implement publishing wizard (Issue #317, #458) (#449)
Browse files Browse the repository at this point in the history
  • Loading branch information
@IlyaBondar
IlyaBondar authored Jan 4, 2024
1 parent da42c24 commit a0c64d5
Show file tree
Hide file tree
Showing 9 changed files with 468 additions and 510 deletions.
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/components/Chat/NotAllowedModel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const NotAllowedModel = ({ type = EntityType.Model }) => {
return (
<div
className={classNames(
'absolute bottom-0 flex w-full flex-col items-center justify-center',
'absolute bottom-0 left-0 flex w-full flex-col items-center justify-center border-transparent bg-gradient-to-b from-transparent via-layer-1 to-layer-1 pt-6 md:pt-2',
{ 'lg:pl-20 lg:pr-[84px]': isChatFullWidth },
)}
>
Expand Down
100 changes: 33 additions & 67 deletions src/components/Chat/PublishModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
import {
FloatingFocusManager,
FloatingOverlay,
FloatingPortal,
useDismiss,
useFloating,
useInteractions,
} from '@floating-ui/react';
import { IconX } from '@tabler/icons-react';
import { ClipboardEvent, MouseEvent, useCallback, useRef } from 'react';

import { useTranslation } from 'next-i18next';
Expand All @@ -19,6 +10,8 @@ import { Translation } from '@/src/types/translation';

import { useAppDispatch } from '@/src/store/hooks';

import Modal from '../Common/Modal';

import { v4 as uuidv4 } from 'uuid';

interface Props {
Expand All @@ -34,15 +27,6 @@ export default function PublishModal({ entity, isOpen, onClose, type }: Props) {
const publishAction = getPublishActionByType(type);
const shareId = useRef(uuidv4());

const { refs, context } = useFloating({
open: isOpen,
onOpenChange: () => {
onClose();
},
});
const dismiss = useDismiss(context);
const { getFloatingProps } = useInteractions([dismiss]);

const handleClose = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
Expand All @@ -67,55 +51,37 @@ export default function PublishModal({ entity, isOpen, onClose, type }: Props) {
);

return (
<FloatingPortal id="theme-main">
<FloatingOverlay
lockScroll
className="z-50 flex items-center justify-center bg-blackout p-3 md:p-5"
data-floating-overlay
>
<FloatingFocusManager context={context}>
<form
noValidate
className="relative inline-block h-[747px] max-h-full min-w-[550px] max-w-[1100px] rounded bg-layer-3 p-6 text-left"
role="dialog"
ref={refs.setFloating}
{...getFloatingProps()}
data-qa="publish-modal"
<Modal
portalId="theme-main"
containerClassName="inline-block h-[747px] min-w-[550px] max-w-[1100px] p-6"
dataQa="publish-modal"
isOpen={isOpen}
onClose={onClose}
>
<div className="flex h-full flex-col justify-between gap-2">
<h4 className=" max-h-[50px] text-base font-semibold">
<span className="line-clamp-2 break-words">
{`${t('Publication request for')}: ${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={handlePublish}
data-qa="publish"
autoFocus
>
<button
type="button"
role="button"
className="absolute right-2 top-2 rounded text-secondary hover:text-accent-primary"
onClick={handleClose}
>
<IconX height={24} width={24} />
</button>
<div className="flex h-full flex-col justify-between gap-2">
<h4 className=" max-h-[50px] text-base font-semibold">
<span className="line-clamp-2 break-words">
{`${t('Publication request for')}: ${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={handlePublish}
data-qa="publish"
>
{t('Send request')}
</button>
</div>
</div>
</form>
</FloatingFocusManager>
</FloatingOverlay>
</FloatingPortal>
{t('Send request')}
</button>
</div>
</div>
</Modal>
);
}
165 changes: 60 additions & 105 deletions src/components/Chat/ShareModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import {
FloatingFocusManager,
FloatingOverlay,
FloatingPortal,
useDismiss,
useFloating,
useInteractions,
} from '@floating-ui/react';
import { IconCheck, IconCopy, IconX } from '@tabler/icons-react';
import { IconCheck, IconCopy } from '@tabler/icons-react';
import {
ClipboardEvent,
MouseEvent,
Expand All @@ -26,6 +18,7 @@ import { Translation } from '@/src/types/translation';

import { useAppDispatch } from '@/src/store/hooks';

import Modal from '../Common/Modal';
import Tooltip from '../Common/Tooltip';

import { v4 as uuidv4 } from 'uuid';
Expand All @@ -48,25 +41,6 @@ export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
const url = `${window?.location.origin}/share/${shareId.current}`;
const timeoutRef = useRef<ReturnType<typeof setTimeout>>();

const { refs, context } = useFloating({
open: isOpen,
onOpenChange: () => {
onClose();
},
});
const dismiss = useDismiss(context);
const { getFloatingProps } = useInteractions([dismiss]);

const handleClose = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();

onClose();
},
[onClose],
);

const handleCopy = useCallback(
(e: MouseEvent<HTMLButtonElement> | ClipboardEvent<HTMLInputElement>) => {
e.preventDefault();
Expand All @@ -93,84 +67,65 @@ export default function ShareModal({ entity, isOpen, onClose, type }: Props) {
useEffect(() => () => clearTimeout(timeoutRef.current), []);

return (
<FloatingPortal id="theme-main">
<FloatingOverlay
lockScroll
className="z-50 flex items-center justify-center bg-blackout p-3 md:p-5"
data-floating-overlay
>
<FloatingFocusManager context={context} initialFocus={copyButtonRef}>
<form
noValidate
className="relative inline-block max-h-full w-full max-w-[424px] rounded bg-layer-3 p-6 text-left"
role="dialog"
ref={refs.setFloating}
{...getFloatingProps()}
data-qa="share-modal"
>
<button
type="button"
role="button"
className="absolute right-2 top-2 rounded text-secondary hover:text-accent-primary"
onClick={handleClose}
<Modal
portalId="theme-main"
containerClassName="inline-block w-full max-w-[424px] p-6"
dataQa="share-modal"
isOpen={isOpen}
onClose={onClose}
>
<div className="flex flex-col justify-between gap-2">
<h4 className=" max-h-[50px] text-base font-semibold">
<Tooltip tooltip={entity.name.trim()}>
<span
className="line-clamp-2 break-words"
data-qa="share-chat-name"
>
<IconX height={24} width={24} />
</button>
<div className="flex flex-col justify-between gap-2">
<h4 className=" max-h-[50px] text-base font-semibold">
<Tooltip tooltip={entity.name.trim()}>
<span
className="line-clamp-2 break-words"
data-qa="share-chat-name"
>
{`${t('Share')}: ${entity.name.trim()}`}
</span>
</Tooltip>
</h4>
<p className="text-sm text-secondary">
{t('share.modal.link.description')}
</p>
<p className="text-sm text-secondary">
{t('share.modal.link', { context: type })}
</p>
<div className="relative mt-2">
<Tooltip tooltip={url}>
<input
type="text"
readOnly
className="w-full gap-2 truncate rounded border border-primary bg-layer-3 p-3 pr-10 outline-none"
onCopyCapture={handleCopy}
value={url}
data-qa="share-link"
{`${t('Share')}: ${entity.name.trim()}`}
</span>
</Tooltip>
</h4>
<p className="text-sm text-secondary">
{t('share.modal.link.description')}
</p>
<p className="text-sm text-secondary">
{t('share.modal.link', { context: type })}
</p>
<div className="relative mt-2">
<Tooltip tooltip={url}>
<input
type="text"
readOnly
className="w-full gap-2 truncate rounded border border-primary bg-layer-3 p-3 pr-10 outline-none"
onCopyCapture={handleCopy}
value={url}
data-qa="share-link"
/>
</Tooltip>
<div className="absolute right-3 top-3">
{urlCopied ? (
<Tooltip tooltip={t('Copied!')}>
<IconCheck size={20} className="text-secondary" />
</Tooltip>
) : (
<Tooltip tooltip={t('Copy URL')}>
<button
className="outline-none"
onClick={handleCopy}
ref={copyButtonRef}
data-qa="copy-link"
>
<IconCopy
height={20}
width={20}
className="text-secondary hover:text-accent-primary"
/>
</Tooltip>
<div className="absolute right-3 top-3">
{urlCopied ? (
<Tooltip tooltip={t('Copied!')}>
<IconCheck size={20} className="text-secondary" />
</Tooltip>
) : (
<Tooltip tooltip={t('Copy URL')}>
<button
className="outline-none"
onClick={handleCopy}
ref={copyButtonRef}
data-qa="copy-link"
>
<IconCopy
height={20}
width={20}
className="text-secondary hover:text-accent-primary"
/>
</button>
</Tooltip>
)}
</div>
</div>
</div>
</form>
</FloatingFocusManager>
</FloatingOverlay>
</FloatingPortal>
</button>
</Tooltip>
)}
</div>
</div>
</div>
</Modal>
);
}
Loading

0 comments on commit a0c64d5

Please sign in to comment.