Move components to components/common (#18728)

* Move ApiErrorboundary to components/common and cleanup

* Move PageViewContainer to common, cleanup imports, remove unused subtitle

* Move ConfirmationModal to components/common

* Move DeleteBlock to components/common

* Move ConnectorIcon and DefaultLogoCatalog to components/common

* Move DocumentationPanel to components/common

* Move EmtpyResource components to components/common

* Move FormChangeTracker to components/common

* Move HeadTitle to components/common

* Move link to components/common

* Move StatusIcon to components/common

* Move MainPageWithScroll to components/common

* Move Version to components/common

* Cleanup imports

* Cleanup imports in StatusIcon

* Move StatusIcon to components/ui

* Fix DeleteBlock mocking in ConnectionSettingsTab

airbyte-webapp/src/App.tsx

@@ -3,6 +3,8 @@ import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter as Router } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 
+import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
+
 import { ApiServices } from "core/ApiServices";
 import { I18nProvider } from "core/i18n";
 import { ServicesProvider } from "core/servicesProvider";
@@ -14,7 +16,6 @@ import NotificationService from "hooks/services/Notification";
 import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { StoreProvider } from "views/common/StoreProvider";
 
-import ApiErrorBoundary from "./components/ApiErrorBoundary";
 import LoadingPage from "./components/LoadingPage";
 import {
   Config,

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlockItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { ConnectorIcon } from "components/ConnectorIcon";
+import { ConnectorIcon } from "components/common/ConnectorIcon";
 
 interface IProps {
   name: string;

airbyte-webapp/src/components/CreateConnection/TryAfterErrorBlock.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { StatusIcon } from "components/StatusIcon";
 import { Button } from "components/ui/Button";
+import { StatusIcon } from "components/ui/StatusIcon";
 import { Text } from "components/ui/Text";
 
 import styles from "./TryAfterErrorBlock.module.scss";

airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 
-import StatusIcon from "components/StatusIcon";
-import { StatusIconStatus } from "components/StatusIcon/StatusIcon";
+import { StatusIcon } from "components/ui/StatusIcon";
+import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 
 import { Status } from "../types";
 

airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { ConnectorIcon } from "components/ConnectorIcon";
+import { ConnectorIcon } from "components/common/ConnectorIcon";
 
 interface IProps {
   value: string;

airbyte-webapp/src/components/EntityTable/components/NameCell.tsx

@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 import styled from "styled-components";
 
-import { ConnectorIcon } from "components/ConnectorIcon";
-import StatusIcon from "components/StatusIcon";
-import { StatusIconStatus } from "components/StatusIcon/StatusIcon";
+import { ConnectorIcon } from "components/common/ConnectorIcon";
+import { StatusIcon } from "components/ui/StatusIcon";
+import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 
 import { Status } from "../types";
 

airbyte-webapp/src/components/Indicator/Indicator.tsx

@@ -1,10 +1,8 @@
 import styled from "styled-components";
 
-const Indicator = styled.div`
+export const Indicator = styled.div`
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background: ${({ theme }) => theme.dangerColor};
 `;
-
-export default Indicator;

airbyte-webapp/src/components/Indicator/index.tsx

@@ -1,4 +1,4 @@
-import Indicator from "./Indicator";
+import { Indicator } from "./Indicator";
 
 export default Indicator;
 export { Indicator };

airbyte-webapp/src/components/JobItem/components/JobLogs.tsx

@@ -3,8 +3,8 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation } from "react-router-dom";
 
-import StatusIcon from "components/StatusIcon";
-import { StatusIconStatus } from "components/StatusIcon/StatusIcon";
+import { StatusIcon } from "components/ui/StatusIcon";
+import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 
 import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { useGetDebugInfoJob } from "services/job/JobService";

airbyte-webapp/src/components/JobItem/components/MainInfo.tsx

@@ -4,8 +4,8 @@ import classNames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedDateParts, FormattedMessage, FormattedTimeParts } from "react-intl";
 
-import { StatusIcon } from "components";
 import { Cell, Row } from "components/SimpleTableComponents";
+import { StatusIcon } from "components/ui/StatusIcon";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "core/request/AirbyteClient";
 import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";

airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx → airbyte-webapp/src/components/common/ApiErrorBoundary/ApiErrorBoundary.tsx

@@ -10,7 +10,7 @@ import { ErrorOccurredView } from "views/common/ErrorOccurredView";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 
-import ServerUnavailableView from "./components/ServerUnavailableView";
+import { ServerUnavailableView } from "./ServerUnavailableView";
 
 interface ApiErrorBoundaryState {
   errorId?: string;
@@ -37,7 +37,7 @@ interface ApiErrorBoundaryProps {
 
 const RETRY_DELAY = 2500;
 
-class ApiErrorBoundary extends React.Component<
+class ApiErrorBoundaryComponent extends React.Component<
   React.PropsWithChildren<ApiErrorBoundaryHookProps & ApiErrorBoundaryProps>,
   ApiErrorBoundaryState
 > {
@@ -107,19 +107,14 @@ class ApiErrorBoundary extends React.Component<
   }
 }
 
-const ApiErrorBoundaryWithHooks: React.FC<React.PropsWithChildren<ApiErrorBoundaryProps>> = ({
-  children,
-  ...props
-}) => {
+export const ApiErrorBoundary: React.FC<React.PropsWithChildren<ApiErrorBoundaryProps>> = ({ children, ...props }) => {
   const { reset } = useQueryErrorResetBoundary();
   const location = useLocation();
   const navigate = useNavigate();
 
   return (
-    <ApiErrorBoundary {...props} location={location} navigate={navigate} onRetry={reset}>
+    <ApiErrorBoundaryComponent {...props} location={location} navigate={navigate} onRetry={reset}>
       {children}
-    </ApiErrorBoundary>
+    </ApiErrorBoundaryComponent>
   );
 };
-
-export default ApiErrorBoundaryWithHooks;

airbyte-webapp/src/components/ApiErrorBoundary/components/ServerUnavailableView.tsx → airbyte-webapp/src/components/common/ApiErrorBoundary/ServerUnavailableView.tsx

@@ -8,7 +8,7 @@ interface ServerUnavailableViewProps {
   retryDelay: number;
 }
 
-const ServerUnavailableView: React.FC<ServerUnavailableViewProps> = ({ onRetryClick, retryDelay }) => {
+export const ServerUnavailableView: React.FC<ServerUnavailableViewProps> = ({ onRetryClick, retryDelay }) => {
   useEffect(() => {
     const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
       onRetryClick();
@@ -25,5 +25,3 @@ const ServerUnavailableView: React.FC<ServerUnavailableViewProps> = ({ onRetryCl
     />
   );
 };
-
-export default ServerUnavailableView;

airbyte-webapp/src/components/common/ApiErrorBoundary/index.ts

@@ -0,0 +1 @@
+export * from "./ApiErrorBoundary";

airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx → airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
 
-import useLoadingState from "../../hooks/useLoadingState";
+import useLoadingState from "../../../hooks/useLoadingState";
 import styles from "./ConfirmationModal.module.scss";
 
 const Content = styled.div`

airbyte-webapp/src/components/DefaultLogoCatalog/DefaultLogoCatalog.tsx → airbyte-webapp/src/components/common/DefaultLogoCatalog/DefaultLogoCatalog.tsx

@@ -1,10 +1,8 @@
-const DefaultLogoCatalog = (): JSX.Element => (
+export const DefaultLogoCatalog = (): JSX.Element => (
   <svg width="18" height="18" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M59.8281 46.2031L45.2969 31.5547C43.4219 29.7969 41.0781 28.8594 38.6172 28.8594C36.8594 28.8594 34.9844 29.3281 33.4609 30.3828L23.5 20.4219V11.75L8.5 0.5L1 8L12.25 23H20.8047L30.7656 33.0781C28.4219 36.7109 28.7734 41.6328 32.0547 44.9141L46.5859 59.4453C47.2891 60.1484 48.3438 60.6172 49.2812 60.6172C50.2188 60.6172 51.1562 60.1484 51.8594 59.4453L59.8281 51.4766C61.3516 50.0703 61.3516 47.6094 59.8281 46.2031ZM19.75 19.1328V19.25H14.125L5.92188 8.35156L8.85156 5.53906L19.75 13.625V19.1328ZM49.2812 56.75L34.6328 42.2188C33.5781 41.1641 32.9922 39.7578 32.9922 38.2344C32.9922 36.7109 33.5781 35.3047 34.6328 34.25C35.6875 33.1953 37.0938 32.6094 38.6172 32.6094C40.1406 32.6094 41.5469 33.1953 42.6016 34.25L57.25 48.8984L49.2812 56.75ZM8.5 51.125C8.5 52.1797 9.32031 53 10.375 53C11.3125 53 12.25 52.1797 12.25 51.125C12.25 50.1875 11.3125 49.25 10.375 49.25C9.32031 49.25 8.5 50.1875 8.5 51.125ZM33.3438 8.35156C36.0391 5.77344 39.5547 4.25 43.1875 4.25C44.0078 4.25 44.8281 4.36719 45.6484 4.48438L37.5625 12.6875L39.0859 22.4141L48.8125 23.9375L57.0156 15.8516C57.7188 20.3047 56.3125 24.875 53.1484 28.1562C52.0938 29.2109 50.9219 30.0312 49.6328 30.6172L52.3281 33.4297C53.6172 32.7266 54.6719 31.7891 55.7266 30.7344C60.1797 26.2812 61.9375 20.0703 60.4141 13.9766C60.1797 12.8047 59.2422 11.9844 58.1875 11.6328C57.0156 11.3984 55.8438 11.6328 55.0234 12.4531L47.5234 19.9531L42.3672 19.1328L41.5469 13.9766L49.0469 6.47656C49.75 5.65625 50.1016 4.48438 49.8672 3.3125C49.5156 2.25781 48.5781 1.32031 47.5234 1.08594C41.4297 -0.4375 35.2188 1.32031 30.7656 5.77344C29.2422 7.29688 28.0703 9.05469 27.25 10.9297V18.8984L29.8281 21.4766C28.6562 16.6719 29.9453 11.75 33.3438 8.35156ZM13.5391 55.3438C11.5469 57.2188 8.14844 57.2188 6.15625 55.3438C4.16406 53.2344 4.16406 49.9531 6.15625 47.9609L23.2656 30.8516L20.6875 28.2734L3.57812 45.3828C0.0625 48.7812 0.0625 54.5234 3.57812 57.9219C5.21875 59.6797 7.44531 60.5 9.78906 60.5C12.25 60.5 14.4766 59.6797 16.1172 57.9219L28.0703 45.9688C27.25 44.9141 26.6641 43.7422 26.1953 42.5703L13.5391 55.3438Z"
       fill="#DBDAFF"
     />
   </svg>
 );
-
-export default DefaultLogoCatalog;

airbyte-webapp/src/components/common/DefaultLogoCatalog/index.ts

@@ -0,0 +1 @@
+export * from "./DefaultLogoCatalog";

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx → airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.tsx

@@ -30,7 +30,7 @@ const Text = styled.div`
   white-space: pre-line;
 `;
 
-const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
+export const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const navigate = useNavigate();
 
@@ -62,5 +62,3 @@ const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
     </DeleteBlockComponent>
   );
 };
-
-export default DeleteBlock;

airbyte-webapp/src/components/common/DeleteBlock/index.ts

@@ -0,0 +1 @@
+export * from "./DeleteBlock";

airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.module.scss → airbyte-webapp/src/components/common/DocumentationPanel/DocumentationPanel.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/colors";
+@use "scss/colors";
 
 .container {
   min-height: 100vh;

airbyte-webapp/src/components/EmptyResourceBlock/EmptyResourceBlock.tsx → airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-interface IProps {
+interface EmptyResourceBlockProps {
   text: React.ReactNode;
   description?: React.ReactNode;
 }
@@ -32,7 +32,7 @@ const Description = styled.div`
   margin-top: 5px;
 `;
 
-const EmptyResourceBlock: React.FC<IProps> = ({ text, description }) => (
+export const EmptyResourceBlock: React.FC<EmptyResourceBlockProps> = ({ text, description }) => (
   <Content>
     <ImgBlock>
       <img src="/cactus.png" height={40} alt="cactus" />
@@ -41,5 +41,3 @@ const EmptyResourceBlock: React.FC<IProps> = ({ text, description }) => (
     <Description>{description}</Description>
   </Content>
 );
-
-export default EmptyResourceBlock;

airbyte-webapp/src/components/common/EmptyResourceBlock/index.ts

@@ -0,0 +1 @@
+export * from "./EmptyResourceBlock";

airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.module.scss → airbyte-webapp/src/components/common/EmptyResourceListView/EmptyResourceListView.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/colors";
+@use "scss/colors";
 
 .container {
   display: flex;

airbyte-webapp/src/components/HeadTitle/HeadTitle.tsx → airbyte-webapp/src/components/common/HeadTitle/HeadTitle.tsx

@@ -28,7 +28,7 @@ interface IProps {
  * Titles defined by {@link HeadTitleDefinition} will be
  * chained together with the {@link SEPARATOR}.
  */
-const HeadTitle: React.FC<IProps> = ({ titles }) => {
+export const HeadTitle: React.FC<IProps> = ({ titles }) => {
   const intl = useIntl();
 
   const getTitle = (d: HeadTitleDefinition): string => {
@@ -42,5 +42,3 @@ const HeadTitle: React.FC<IProps> = ({ titles }) => {
     </Helmet>
   );
 };
-
-export default HeadTitle;

airbyte-webapp/src/components/common/HeadTitle/index.ts

@@ -0,0 +1 @@
+export * from "./HeadTitle";

airbyte-webapp/src/components/Link/Link.tsx → airbyte-webapp/src/components/common/Link/Link.tsx

@@ -4,14 +4,14 @@ import {
 } from "react-router-dom";
 import styled from "styled-components";
 
-export interface ILinkProps {
+export interface LinkProps {
   bold?: boolean;
   $clear?: boolean;
   $light?: boolean;
 }
 
 // TODO: fix typings
-const Link = styled(ReactLink)<ILinkProps /* & ReactLinkProps */>`
+export const Link = styled(ReactLink)<LinkProps /* & ReactLinkProps */>`
   color: ${({ theme, $light }) => ($light ? theme.darkGreyColor : theme.primaryColor)};
 
   font-weight: ${({ bold }) => (bold ? "bold" : "normal")};
@@ -21,5 +21,3 @@ const Link = styled(ReactLink)<ILinkProps /* & ReactLinkProps */>`
     opacity: 0.8;
   }
 `;
-
-export default Link;

airbyte-webapp/src/components/common/Link/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss → airbyte-webapp/src/components/common/MainPageWithScroll/MainPageWithScroll.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "scss/variables";
 
 .page {
   overflow-y: hidden;