chore(preview-dialog): Moved preview-dialog to the common folder (#4029)

Author: greg-in-a-box

src/elements/content-explorer/PreviewDialog.js.flow renamed to src/elements/common/preview-dialog/PreviewDialog.js.flow

@@ -9,13 +9,13 @@ import { useIntl } from 'react-intl';
 import Modal from 'react-modal';
 import cloneDeep from 'lodash/cloneDeep';
 
-import ContentPreview from '../content-preview';
-import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
-import type { ContentPreviewProps } from '../content-preview';
-import type { Token, BoxItem, Collection } from '../../common/types/core';
-import type APICache from '../../utils/Cache';
+import ContentPreview from '../../content-preview';
+import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
+import type { ContentPreviewProps } from '../../content-preview';
+import type { Token, BoxItem, Collection } from '../../../common/types/core';
+import type APICache from '../../../utils/Cache';
 
-import messages from '../common/messages';
+import messages from '../messages';
 
 type PreviewDialogProps = {
     apiHost: string,

src/elements/content-explorer/PreviewDialog.tsx renamed to src/elements/common/preview-dialog/PreviewDialog.tsx

@@ -4,12 +4,12 @@ import Modal from 'react-modal';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
-import ContentPreview, { ContentPreviewProps } from '../content-preview';
-import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
-import type { Token, BoxItem, Collection } from '../../common/types/core';
-import type APICache from '../../utils/Cache';
+import ContentPreview, { ContentPreviewProps } from '../../content-preview';
+import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
+import type { Token, BoxItem, Collection } from '../../../common/types/core';
+import type APICache from '../../../utils/Cache';
 
-import messages from '../common/messages';
+import messages from '../messages';
 
 export interface PreviewDialogProps {
     apiHost: string;

src/elements/content-explorer/__tests__/PreviewDialog.test.tsx renamed to src/elements/common/preview-dialog/__tests__/PreviewDialog.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor } from '../../../test-utils/testing-library';
-import APICache from '../../../utils/Cache';
+import { render, screen, waitFor } from '../../../../test-utils/testing-library';
+import APICache from '../../../../utils/Cache';
 
 import PreviewDialog, { PreviewDialogProps } from '../PreviewDialog';
 

src/elements/common/preview-dialog/index.ts

@@ -0,0 +1 @@
+export { default } from './PreviewDialog';

src/elements/content-explorer/stories/PreviewDialog.stories.tsx renamed to src/elements/common/stories/PreviewDialog.stories.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+
 import { useArgs } from '@storybook/preview-api';
 import { Button } from '@box/blueprint-web';
+import PreviewDialog from '../preview-dialog/PreviewDialog';
 
 import { addRootElement } from '../../../utils/storybook';
 
-import PreviewDialog from '../PreviewDialog';
-
 // need to import this into the story because it's usually in ContentExplorer
-import '../../common/modal.scss';
+import '../modal.scss';
 
 export const previewDialog = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -73,7 +73,7 @@ export const previewDialog = {
 };
 
 export default {
-    title: 'Elements/ContentExplorer',
+    title: 'Elements/Common/PreviewDialog',
     component: PreviewDialog,
     args: {
         isLoading: false,

src/elements/content-explorer/stories/tests/PreviewDialog-visual.stories.tsx renamed to src/elements/common/stories/__tests__/PreviewDialog-visual.stories.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
-import { Button } from '@box/blueprint-web';
+
 import { expect, screen, userEvent, within } from '@storybook/test';
+import { Button } from '@box/blueprint-web';
+import { useArgs } from '@storybook/preview-api';
+import PreviewDialog from '../../preview-dialog';
 
 import { addRootElement } from '../../../../utils/storybook';
 
-import PreviewDialog from '../../PreviewDialog';
-
 // need to import this into the story because it's usually in ContentExplorer
-import '../../../common/modal.scss';
+
+import '../../modal.scss';
 
 export const basic = {
     play: async ({ canvasElement }) => {
@@ -81,7 +82,7 @@ export const basic = {
 };
 
 export default {
-    title: 'Elements/ContentExplorer/tests/PreviewDialog/visual',
+    title: 'Elements/Common/tests/PreviewDialog/visual',
     component: PreviewDialog,
     args: {
         token: global.TOKEN,

src/elements/content-explorer/ContentExplorer.tsx

@@ -21,7 +21,7 @@ import ThemingStyles from '../common/theming';
 import API from '../../api';
 import MetadataQueryAPIHelper from '../../features/metadata-based-view/MetadataQueryAPIHelper';
 import Footer from './Footer';
-import PreviewDialog from './PreviewDialog';
+import PreviewDialog from '../common/preview-dialog/PreviewDialog';
 import ShareDialog from './ShareDialog';
 import RenameDialog from './RenameDialog';
 import DeleteConfirmationDialog from './DeleteConfirmationDialog';

src/elements/content-explorer/__tests__/ContentExplorer.test.tsx

@@ -63,7 +63,7 @@ jest.mock(
             children({ height: 600, width: 1200 }),
 );
 
-jest.mock('../PreviewDialog', () => props => {
+jest.mock('../../common/preview-dialog/PreviewDialog', () => props => {
     props.onPreview();
     return 'mock-content-preview';
 });