🪟 File and exports cleanup for Connection Create/Edit (#17289)

* renames for connection form refactor * rename tabs as tabs, fix default exports * flatten the CreateConnection dir * remove component subfolders
airbytehq · Sep 29, 2022 · 55d27a5 · 55d27a5
1 parent 03b93b7
commit 55d27a5
Show file tree

Hide file tree

Showing 47 changed files with 78 additions and 102 deletions.
diff --git a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx b/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
@@ -5,8 +5,8 @@ import React from "react";
 
 import { Card } from "components/ui/Card";
 
-import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";
 import styles from "./ConnectionBlock.module.scss";
+import { ConnectionBlockItem, Content } from "./ConnectionBlockItem";
 
 interface IProps {
   itemFrom?: { name: string; icon?: string };

diff --git a/...nBlock/components/ConnectionBlockItem.tsx → ...s/ConnectionBlock/ConnectionBlockItem.tsx b/...nBlock/components/ConnectionBlockItem.tsx → ...s/ConnectionBlock/ConnectionBlockItem.tsx
diff --git a/...ntent/CreateConnectionContent.module.scss → ...teConnection/CreateConnection.module.scss b/...ntent/CreateConnectionContent.module.scss → ...teConnection/CreateConnection.module.scss
diff --git a/...ectionContent/CreateConnectionContent.tsx → ...nts/CreateConnection/CreateConnection.tsx b/...ectionContent/CreateConnectionContent.tsx → ...nts/CreateConnection/CreateConnection.tsx
@@ -9,27 +9,23 @@ import { JobItem } from "components/JobItem/JobItem";
 import LoadingSchema from "components/LoadingSchema";
 
 import { LogsRequestError } from "core/request/LogsRequestError";
-import { ConnectionFormServiceProvider } from "hooks/services/Connection/ConnectionFormService";
+import { ConnectionFormServiceProvider } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { useChangedFormsById, useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
 import { ConnectionForm } from "views/Connection/ConnectionForm";
 
 import { DestinationRead, SourceRead } from "../../core/request/AirbyteClient";
 import { useDiscoverSchema } from "../../hooks/services/useSourceHook";
-import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
-import styles from "./CreateConnectionContent.module.scss";
+import styles from "./CreateConnection.module.scss";
+import TryAfterErrorBlock from "./TryAfterErrorBlock";
 
-interface CreateConnectionContentProps {
+interface CreateConnectionProps {
   source: SourceRead;
   destination: DestinationRead;
   afterSubmitConnection?: () => void;
 }
 
-const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
-  source,
-  destination,
-  afterSubmitConnection,
-}) => {
+export const CreateConnection: React.FC<CreateConnectionProps> = ({ source, destination, afterSubmitConnection }) => {
   const { mutateAsync: createConnection } = useCreateConnection();
   const navigate = useNavigate();
 
@@ -113,5 +109,3 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
     </Suspense>
   );
 };
-
-export default CreateConnectionContent;
diff --git a/...components/TryAfterErrorBlock.module.scss → ...Connection/TryAfterErrorBlock.module.scss b/...components/TryAfterErrorBlock.module.scss → ...Connection/TryAfterErrorBlock.module.scss
@@ -1,4 +1,4 @@
-@use "../../../scss/variables";
+@use "../../scss/variables";
 
 .container {
   padding: 40px;

diff --git a/...Content/components/TryAfterErrorBlock.tsx → ...s/CreateConnection/TryAfterErrorBlock.tsx b/...Content/components/TryAfterErrorBlock.tsx → ...s/CreateConnection/TryAfterErrorBlock.tsx
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/index.tsx b/airbyte-webapp/src/components/CreateConnectionContent/index.tsx
diff --git a/airbyte-webapp/src/components/JobItem/JobItem.tsx b/airbyte-webapp/src/components/JobItem/JobItem.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { Spinner } from "components/ui/Spinner";
 
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/components/JobsList";
+import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "../../core/request/AirbyteClient";
 import { useAttemptLink } from "./attemptLinkUtils";

diff --git a/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx b/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation } from "react-router-dom";
 
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/components/JobsList";
+import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { useGetDebugInfoJob } from "services/job/JobService";
 
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "../../../core/request/AirbyteClient";

diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx b/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
@@ -8,7 +8,7 @@ import { StatusIcon } from "components";
 import { Cell, Row } from "components/SimpleTableComponents";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/components/JobsList";
+import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 
 import { getJobStatus } from "../JobItem";
 import AttemptDetails from "./AttemptDetails";

diff --git a/...Connection/ConnectionFormService.test.tsx → ...ectionForm/ConnectionFormService.test.tsx b/...Connection/ConnectionFormService.test.tsx → ...ectionForm/ConnectionFormService.test.tsx
diff --git a/...ices/Connection/ConnectionFormService.tsx → .../ConnectionForm/ConnectionFormService.tsx b/...ices/Connection/ConnectionFormService.tsx → .../ConnectionForm/ConnectionFormService.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx
@@ -8,7 +8,7 @@ import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 import { RoutePaths } from "../routePaths";
 import AllConnectionsPage from "./pages/AllConnectionsPage";
-import ConnectionItemPage from "./pages/ConnectionItemPage";
+import { ConnectionItemPage } from "./pages/ConnectionItemPage/ConnectionItemPage";
 import { CreationFormPage } from "./pages/CreationFormPage/CreationFormPage";
 
 export const ConnectionPage: React.FC = () => (

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
@@ -9,15 +9,15 @@ import { Action, Namespace } from "core/analytics";
 import { ConnectionStatus } from "core/request/AirbyteClient";
 import { useAnalyticsService, useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useGetConnection } from "hooks/services/useConnectionHook";
-import TransformationView from "pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView";
 
-import ConnectionPageTitle from "./components/ConnectionPageTitle";
-import { ReplicationView } from "./components/ReplicationView";
-import SettingsView from "./components/SettingsView";
-import StatusView from "./components/StatusView";
+import { ConnectionPageTitle } from "./ConnectionPageTitle";
+import { ConnectionReplicationTab } from "./ConnectionReplicationTab";
 import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
+import { ConnectionSettingsTab } from "./ConnectionSettingsTab";
+import { ConnectionStatusTab } from "./ConnectionStatusTab";
+import { ConnectionTransformationTab } from "./ConnectionTransformationTab";
 
-const ConnectionItemPage: React.FC = () => {
+export const ConnectionItemPage: React.FC = () => {
   const params = useParams<{
     connectionId: string;
     "*": ConnectionSettingsRoutes;
@@ -74,25 +74,25 @@ const ConnectionItemPage: React.FC = () => {
         <Routes>
           <Route
             path={ConnectionSettingsRoutes.STATUS}
-            element={<StatusView connection={connection} isStatusUpdating={isStatusUpdating} />}
+            element={<ConnectionStatusTab connection={connection} isStatusUpdating={isStatusUpdating} />}
           />
           <Route
             path={ConnectionSettingsRoutes.REPLICATION}
-            element={<ReplicationView onAfterSaveSchema={onAfterSaveSchema} connectionId={connectionId} />}
+            element={<ConnectionReplicationTab onAfterSaveSchema={onAfterSaveSchema} connectionId={connectionId} />}
           />
           <Route
             path={ConnectionSettingsRoutes.TRANSFORMATION}
-            element={<TransformationView connection={connection} />}
+            element={<ConnectionTransformationTab connection={connection} />}
           />
           <Route
             path={ConnectionSettingsRoutes.SETTINGS}
-            element={isConnectionDeleted ? <Navigate replace to=".." /> : <SettingsView connection={connection} />}
+            element={
+              isConnectionDeleted ? <Navigate replace to=".." /> : <ConnectionSettingsTab connection={connection} />
+            }
           />
           <Route index element={<Navigate to={ConnectionSettingsRoutes.STATUS} replace />} />
         </Routes>
       </Suspense>
     </MainPageWithScroll>
   );
 };
-
-export default ConnectionItemPage;
diff --git a/...age/components/ConnectionName.module.scss → ...ectionItemPage/ConnectionName.module.scss b/...age/components/ConnectionName.module.scss → ...ectionItemPage/ConnectionName.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../../scss/colors";
-@use "../../../../../scss/variables";
+@use "../../../../scss/colors";
+@use "../../../../scss/variables";
 
 .container {
   margin-top: variables.$spacing-md;

diff --git a/...ionItemPage/components/ConnectionName.tsx → ...ges/ConnectionItemPage/ConnectionName.tsx b/...ionItemPage/components/ConnectionName.tsx → ...ges/ConnectionItemPage/ConnectionName.tsx
@@ -17,7 +17,7 @@ interface ConnectionNameProps {
 
 const InputWithKeystroke = withKeystrokeHandler(Input);
 
-const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) => {
+export const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) => {
   const { name } = connection;
   const [editingState, setEditingState] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -93,5 +93,3 @@ const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) => {
     </div>
   );
 };
-
-export default ConnectionName;
diff --git a/...omponents/ConnectionPageTitle.module.scss → ...nItemPage/ConnectionPageTitle.module.scss b/...omponents/ConnectionPageTitle.module.scss → ...nItemPage/ConnectionPageTitle.module.scss
@@ -1,18 +1,18 @@
-@use "../../../../../scss/variables" as vars;
-@use "../../../../../scss/colors";
+@use "../../../../scss/colors";
+@use "../../../../scss/variables";
 
 .container {
   text-align: center;
-  padding: vars.$spacing-lg vars.$spacing-xl;
+  padding: variables.$spacing-lg variables.$spacing-xl;
 }
 
 .connectionTitle {
   color: colors.$orange;
 }
 
 .connectionDeleted {
-  max-width: vars.$width-modal-md;
-  margin: vars.$spacing-lg auto;
+  max-width: variables.$width-modal-md;
+  margin: variables.$spacing-lg auto;
 }
 
 .statusContainer {

diff --git a/...emPage/components/ConnectionPageTitle.tsx → ...onnectionItemPage/ConnectionPageTitle.tsx b/...emPage/components/ConnectionPageTitle.tsx → ...onnectionItemPage/ConnectionPageTitle.tsx
@@ -9,9 +9,9 @@ import { Text } from "components/ui/Text";
 
 import { ConnectionStatus, DestinationRead, SourceRead, WebBackendConnectionRead } from "core/request/AirbyteClient";
 
-import { ConnectionSettingsRoutes } from "../ConnectionSettingsRoutes";
-import ConnectionName from "./ConnectionName";
+import { ConnectionName } from "./ConnectionName";
 import styles from "./ConnectionPageTitle.module.scss";
+import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
 import { StatusMainInfo } from "./StatusMainInfo";
 
 interface ConnectionPageTitleProps {
@@ -22,7 +22,7 @@ interface ConnectionPageTitleProps {
   onStatusUpdating?: (updating: boolean) => void;
 }
 
-const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
+export const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
   source,
   destination,
   connection,
@@ -90,5 +90,3 @@ const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
     </div>
   );
 };
-
-export default ConnectionPageTitle;
diff --git a/...onItemPage/components/ReplicationView.tsx → ...tionItemPage/ConnectionReplicationTab.tsx b/...onItemPage/components/ReplicationView.tsx → ...tionItemPage/ConnectionReplicationTab.tsx
@@ -14,7 +14,7 @@ import { toWebBackendConnectionUpdate } from "core/domain/connection";
 import { ConnectionStateType, ConnectionStatus } from "core/request/AirbyteClient";
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { ConnectionFormServiceProvider } from "hooks/services/Connection/ConnectionFormService";
+import { ConnectionFormServiceProvider } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { useChangedFormsById, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { ModalCancel, useModalService } from "hooks/services/Modal";
 import {
@@ -27,7 +27,7 @@ import { equal, naturalComparatorBy } from "utils/objects";
 import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal";
 import { ConnectionForm } from "views/Connection/ConnectionForm";
 
-interface ReplicationViewProps {
+interface ConnectionReplicationTabProps {
   onAfterSaveSchema: () => void;
   connectionId: string;
 }
@@ -85,7 +85,10 @@ const TryArrow = styled(FontAwesomeIcon)`
   font-size: 14px;
 `;
 
-export const ReplicationView: React.FC<ReplicationViewProps> = ({ onAfterSaveSchema, connectionId }) => {
+export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> = ({
+  onAfterSaveSchema,
+  connectionId,
+}) => {
   const { formatMessage } = useIntl();
   const { openModal, closeModal } = useModalService();
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();

diff --git a/...mPage/components/SettingsView.module.scss → ...temPage/ConnectionSettingsTab.module.scss b/...mPage/components/SettingsView.module.scss → ...temPage/ConnectionSettingsTab.module.scss
diff --git a/...ItemPage/components/SettingsView.test.tsx → ...onItemPage/ConnectionSettingsTab.test.tsx b/...ItemPage/components/SettingsView.test.tsx → ...onItemPage/ConnectionSettingsTab.test.tsx
@@ -1,6 +1,6 @@
 import { render, mockConnection } from "test-utils/testutils";
 
-import SettingsView from "./SettingsView";
+import { ConnectionSettingsTab } from "./ConnectionSettingsTab";
 
 let mockIsAdvancedMode = false;
 const setMockIsAdvancedMode = (newSetting: boolean) => {
@@ -40,11 +40,11 @@ describe("<SettingsView />", () => {
     let container: HTMLElement;
 
     setMockIsAdvancedMode(false);
-    ({ container } = await render(<SettingsView connection={mockConnection} />));
+    ({ container } = await render(<ConnectionSettingsTab connection={mockConnection} />));
     expect(container.textContent).not.toContain("Connection State");
 
     setMockIsAdvancedMode(true);
-    ({ container } = await render(<SettingsView connection={mockConnection} />));
+    ({ container } = await render(<ConnectionSettingsTab connection={mockConnection} />));
     expect(container.textContent).toContain("Connection State");
   });
 });
diff --git a/...ctionItemPage/components/SettingsView.tsx → ...nectionItemPage/ConnectionSettingsTab.tsx b/...ctionItemPage/components/SettingsView.tsx → ...nectionItemPage/ConnectionSettingsTab.tsx
@@ -2,19 +2,19 @@ import React from "react";
 
 import DeleteBlock from "components/DeleteBlock";
 
+import { WebBackendConnectionRead } from "core/request/AirbyteClient";
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { useDeleteConnection } from "hooks/services/useConnectionHook";
 
-import { WebBackendConnectionRead } from "../../../../../core/request/AirbyteClient";
-import styles from "./SettingsView.module.scss";
+import styles from "./ConnectionSettingsTab.module.scss";
 import { StateBlock } from "./StateBlock";
 
-interface SettingsViewProps {
+interface ConnectionSettingsTabProps {
   connection: WebBackendConnectionRead;
 }
 
-const SettingsView: React.FC<SettingsViewProps> = ({ connection }) => {
+export const ConnectionSettingsTab: React.FC<ConnectionSettingsTabProps> = ({ connection }) => {
   const { mutateAsync: deleteConnection } = useDeleteConnection();
 
   const [isAdvancedMode] = useAdvancedModeSetting();
@@ -28,5 +28,3 @@ const SettingsView: React.FC<SettingsViewProps> = ({ connection }) => {
     </div>
   );
 };
-
-export default SettingsView;
diff --git a/...temPage/components/StatusView.module.scss → ...nItemPage/ConnectionStatusTab.module.scss b/...temPage/components/StatusView.module.scss → ...nItemPage/ConnectionStatusTab.module.scss
@@ -1,4 +1,4 @@
-@use "../../../../../scss/colors";
+@use "../../../../scss/colors";
 
 .statusView {
   margin: 0 10px;

diff --git a/...nectionItemPage/components/StatusView.tsx → ...onnectionItemPage/ConnectionStatusTab.tsx b/...nectionItemPage/components/StatusView.tsx → ...onnectionItemPage/ConnectionStatusTab.tsx
@@ -21,8 +21,8 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useResetConnection, useSyncConnection } from "hooks/services/useConnectionHook";
 import { useCancelJob, useListJobs } from "services/job/JobService";
 
+import styles from "./ConnectionStatusTab.module.scss";
 import JobsList from "./JobsList";
-import styles from "./StatusView.module.scss";
 
 const JOB_PAGE_SIZE_INCREMENT = 25;
 
@@ -37,7 +37,7 @@ interface ActiveJob {
   isCanceling: boolean;
 }
 
-interface StatusViewProps {
+interface ConnectionStatusTabProps {
   connection: WebBackendConnectionRead;
   isStatusUpdating?: boolean;
 }
@@ -49,7 +49,7 @@ const getJobRunningOrPending = (jobs: JobWithAttemptsRead[]) => {
   });
 };
 
-const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
+export const ConnectionStatusTab: React.FC<ConnectionStatusTabProps> = ({ connection }) => {
   useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM_STATUS);
   const [activeJob, setActiveJob] = useState<ActiveJob>();
   const [jobPageSize, setJobPageSize] = useState(JOB_PAGE_SIZE_INCREMENT);
@@ -225,5 +225,3 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
     </div>
   );
 };
-
-export default StatusView;
diff --git a/...temPage/components/TransformationView.tsx → ...nItemPage/ConnectionTransformationTab.tsx b/...temPage/components/TransformationView.tsx → ...nItemPage/ConnectionTransformationTab.tsx
@@ -31,7 +31,7 @@ import {
 } from "views/Connection/ConnectionForm/formConfig";
 import { FormCard } from "views/Connection/FormCard";
 
-interface TransformationViewProps {
+interface ConnectionTransformationTabProps {
   connection: WebBackendConnectionRead;
 }
 
@@ -118,7 +118,7 @@ const NormalizationCard: React.FC<{
   );
 };
 
-const TransformationView: React.FC<TransformationViewProps> = ({ connection }) => {
+export const ConnectionTransformationTab: React.FC<ConnectionTransformationTabProps> = ({ connection }) => {
   const definition = useGetDestinationDefinitionSpecification(connection.destination.destinationDefinitionId);
   const { mutateAsync: updateConnection } = useUpdateConnection();
   const workspace = useCurrentWorkspace();
@@ -181,5 +181,3 @@ const TransformationView: React.FC<TransformationViewProps> = ({ connection }) =
     </Content>
   );
 };
-
-export default TransformationView;
diff --git a/...ionItemPage/components/EnabledControl.tsx → ...ges/ConnectionItemPage/EnabledControl.tsx b/...ionItemPage/components/EnabledControl.tsx → ...ges/ConnectionItemPage/EnabledControl.tsx
@@ -7,11 +7,10 @@ import { Switch } from "components";
 
 import { Action, Namespace } from "core/analytics";
 import { buildConnectionUpdate } from "core/domain/connection";
+import { ConnectionStatus, WebBackendConnectionRead } from "core/request/AirbyteClient";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useUpdateConnection } from "hooks/services/useConnectionHook";
 
-import { ConnectionStatus, WebBackendConnectionRead } from "../../../../../core/request/AirbyteClient";
-
 const ToggleLabel = styled.label`
   text-transform: uppercase;
   font-size: 14px;

diff --git a/...onnectionItemPage/components/JobsList.tsx → ...age/pages/ConnectionItemPage/JobsList.tsx b/...onnectionItemPage/components/JobsList.tsx → ...age/pages/ConnectionItemPage/JobsList.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 
 import { JobItem } from "components/JobItem/JobItem";
 
-import { JobWithAttemptsRead } from "../../../../../core/request/AirbyteClient";
+import { JobWithAttemptsRead } from "core/request/AirbyteClient";
 
 interface JobsListProps {
   jobs: JobWithAttemptsRead[];

diff --git a/...nectionItemPage/components/StateBlock.tsx → ...e/pages/ConnectionItemPage/StateBlock.tsx b/...nectionItemPage/components/StateBlock.tsx → ...e/pages/ConnectionItemPage/StateBlock.tsx
diff --git a/...age/components/StatusMainInfo.module.scss → ...ectionItemPage/StatusMainInfo.module.scss b/...age/components/StatusMainInfo.module.scss → ...ectionItemPage/StatusMainInfo.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../../scss/colors";
-@use "../../../../../scss/variables";
+@use "../../../../scss/colors";
+@use "../../../../scss/variables";
 
 .connectorLink {
   cursor: pointer;

diff --git a/...ionItemPage/components/StatusMainInfo.tsx → ...ges/ConnectionItemPage/StatusMainInfo.tsx b/...ionItemPage/components/StatusMainInfo.tsx → ...ges/ConnectionItemPage/StatusMainInfo.tsx