✨ Regroup shared and common components along naming standardization

client/src/app/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter } from "react-router-dom";
 
 import { AppRoutes } from "./Routes";
 import { DefaultLayout } from "./layout";
-import { NotificationsProvider } from "./shared/notifications-context";
+import { NotificationsProvider } from "./components/NotificationsContext";
 
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/patternfly-addons.css";

client/src/app/Routes.tsx

@@ -1,17 +1,16 @@
 import React, { lazy, Suspense } from "react";
 import { Switch, Redirect, useLocation } from "react-router-dom";
 
-import { AppPlaceholder } from "@app/shared/components";
-
+import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { RepositoriesGit } from "./pages/repositories/Git";
 import { RepositoriesMvn } from "./pages/repositories/Mvn";
 import { RepositoriesSvn } from "./pages/repositories/Svn";
 import { Paths } from "@app/Paths";
 import { ApplicationAssessment } from "./pages/applications/application-assessment/application-assessment";
-import { RouteWrapper } from "./common/RouteWrapper";
+import { RouteWrapper } from "./components/RouteWrapper";
 import { adminRoles, devRoles } from "./rbac";
 import { ErrorBoundary } from "react-error-boundary";
-import { ErrorFallback } from "@app/common/ErrorFallback";
+import { ErrorFallback } from "@app/components/ErrorFallback";
 import { FEATURES_ENABLED } from "./FeatureFlags";
 
 const Applications = lazy(() => import("./pages/applications"));

client/src/app/api/rest.ts

@@ -52,7 +52,7 @@ import {
   HubFile,
 } from "./models";
 import { QueryKey } from "@tanstack/react-query";
-import { serializeRequestParamsForHub } from "@app/shared/hooks/table-controls";
+import { serializeRequestParamsForHub } from "@app/hooks/table-controls";
 
 // TACKLE_HUB
 export const HUB = "/hub";

client/src/app/shared/components/app-table/app-table.tsx → client/src/app/components/AppTable.tsx

@@ -8,12 +8,12 @@ import {
   TableProps,
 } from "@patternfly/react-table/deprecated";
 
-import { StateNoData } from "./state-no-data";
-import { StateNoResults } from "./state-no-results";
-import { StateError } from "./state-error";
-import "./app-table.css";
+import { StateNoData } from "./StateNoData";
+import { StateNoResults } from "./StateNoResults";
+import { StateError } from "./StateError";
 import { Application } from "@app/api/models";
-import { handlePropagatedRowClick } from "@app/shared/hooks/table-controls";
+import { handlePropagatedRowClick } from "@app/hooks/table-controls";
+import "./AppTable.css";
 
 const ENTITY_FIELD = "entity";
 

client/src/app/shared/components/app-table-action-buttons/app-table-action-buttons.tsx → client/src/app/components/AppTableActionButtons.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Flex, FlexItem } from "@patternfly/react-core";
 import { applicationsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
-import { ConditionalTooltip } from "../ConditionalTooltip";
+import { ConditionalTooltip } from "./ConditionalTooltip";
 
 export interface AppTableActionButtonsProps {
   isDeleteEnabled?: boolean;

client/src/app/shared/components/app-table-with-controls/app-table-with-controls.tsx → client/src/app/components/AppTableWithControls.tsx

@@ -8,9 +8,9 @@ import {
   ToolbarItemVariant,
 } from "@patternfly/react-core";
 
-import { AppTable, IAppTableProps } from "../app-table/app-table";
-import { PaginationStateProps } from "@app/shared/hooks/useLegacyPaginationState";
-import { SimplePagination } from "../simple-pagination";
+import { AppTable, IAppTableProps } from "./AppTable";
+import { PaginationStateProps } from "@app/hooks/useLegacyPaginationState";
+import { SimplePagination } from "./SimplePagination";
 
 export interface IAppTableWithControlsProps extends IAppTableProps {
   count: number;

client/src/app/shared/containers/application-dependencies-form/application-dependencies-form.tsx → client/src/app/components/ApplicationDependenciesFormContainer/ApplicationDependenciesForm.tsx

@@ -15,15 +15,15 @@ import {
   TextContent,
 } from "@patternfly/react-core";
 
-import { OptionWithValue } from "@app/shared/components";
+import { OptionWithValue } from "@app/components/SimpleSelect";
 
 import { Application, ApplicationDependency } from "@app/api/models";
 
-import { FormContext } from "./form-context";
-import { SelectDependency } from "./select-dependency";
+import { FormContext } from "./FormContext";
+import { SelectDependency } from "./SelectDependency";
 import { getAxiosErrorMessage } from "@app/utils/utils";
 import { useFetchApplications } from "@app/queries/applications";
-import useFetchApplicationDependencies from "@app/shared/hooks/useFetchApplicationDependencies/useFetchApplicationDependencies";
+import useFetchApplicationDependencies from "@app/hooks/useFetchApplicationDependencies/useFetchApplicationDependencies";
 
 const northToStringFn = (value: ApplicationDependency) => value.from.name;
 const southToStringFn = (value: ApplicationDependency) => value.to.name;

client/src/app/shared/containers/application-dependencies-form/select-dependency.tsx → client/src/app/components/ApplicationDependenciesFormContainer/SelectDependency.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { AxiosError } from "axios";
 
-import { OptionWithValue, SimpleSelect } from "@app/shared/components";
+import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
 
 import { DEFAULT_SELECT_MAX_HEIGHT } from "@app/Constants";
 import {

client/src/app/shared/containers/application-dependencies-form/index.tsx → client/src/app/components/ApplicationDependenciesFormContainer/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { FormContextProvider } from "./form-context";
+import { FormContextProvider } from "./FormContext";
 import {
   ApplicationDependenciesFormProps,
   ApplicationDependenciesForm,
-} from "./application-dependencies-form";
+} from "./ApplicationDependenciesForm";
 
 export const ApplicationDependenciesFormContainer: React.FC<
   ApplicationDependenciesFormProps

client/src/app/shared/components/color/color.tsx → client/src/app/components/Color.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Split, SplitItem } from "@patternfly/react-core";
 
 import { COLOR_NAMES_BY_HEX_VALUE } from "@app/Constants";
-import "./color.css";
+import "./Color.css";
 
 export interface ColorProps {
   hex: string;

client/src/app/common/ErrorFallback.tsx → client/src/app/components/ErrorFallback.tsx

@@ -9,7 +9,7 @@ import {
 } from "@patternfly/react-core";
 import React, { useEffect, useRef } from "react";
 import UserNinjaIcon from "@patternfly/react-icons/dist/esm/icons/user-ninja-icon";
-import { NotificationsContext } from "@app/shared/notifications-context";
+import { NotificationsContext } from "@app/components/NotificationsContext";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 

client/src/app/shared/components/hook-form-pf-fields/hook-form-pf-text-area.tsx → client/src/app/components/HookFormPFFields/HookFormPFTextArea.tsx

@@ -6,7 +6,7 @@ import {
   HookFormPFGroupController,
   BaseHookFormPFGroupControllerProps,
   extractGroupControllerProps,
-} from "./hook-form-pf-group-controller";
+} from "./HookFormPFGroupController";
 
 export type HookFormPFTextAreaProps<
   TFieldValues extends FieldValues,

client/src/app/shared/components/hook-form-pf-fields/hook-form-pf-text-input.tsx → client/src/app/components/HookFormPFFields/HookFormPFTextInput.tsx

@@ -6,7 +6,7 @@ import {
   extractGroupControllerProps,
   HookFormPFGroupController,
   BaseHookFormPFGroupControllerProps,
-} from "./hook-form-pf-group-controller";
+} from "./HookFormPFGroupController";
 
 export type HookFormPFTextInputProps<
   TFieldValues extends FieldValues,

client/src/app/components/HookFormPFFields/index.ts

@@ -0,0 +1,3 @@
+export * from "./HookFormPFGroupController";
+export * from "./HookFormPFTextInput";
+export * from "./HookFormPFTextArea";

client/src/app/common/KeycloakProvider.tsx → client/src/app/components/KeycloakProvider.tsx

@@ -3,7 +3,7 @@ import { isAuthRequired } from "@app/Constants";
 import i18n from "@app/i18n";
 import keycloak from "@app/keycloak";
 import { deleteCookie, getCookie, setCookie } from "@app/queries/cookies";
-import { AppPlaceholder } from "@app/shared/components";
+import { AppPlaceholder } from "./AppPlaceholder";
 import { Flex, FlexItem, Spinner } from "@patternfly/react-core";
 import { ReactKeycloakProvider } from "@react-keycloak/web";
 import React, { Suspense, useEffect } from "react";

client/src/app/shared/components/Notifications.tsx → client/src/app/components/Notifications.tsx

@@ -4,7 +4,7 @@ import {
   AlertActionCloseButton,
   AlertGroup,
 } from "@patternfly/react-core";
-import { NotificationsContext } from "../notifications-context";
+import { NotificationsContext } from "./NotificationsContext";
 
 export const Notifications: React.FunctionComponent = () => {
   const appContext = React.useContext(NotificationsContext);

client/src/app/shared/components/page-header/page-header.tsx → client/src/app/components/PageHeader.tsx

@@ -7,9 +7,9 @@ import {
   TextContent,
   Text,
 } from "@patternfly/react-core";
-import { BreadCrumbPath } from "../breadcrumb-path";
-import { MenuActions } from "../menu-actions";
-import { HorizontalNav } from "../horizontal-nav/horizontal-nav";
+import { BreadCrumbPath } from "./BreadCrumbPath";
+import { MenuActions } from "./MenuActions";
+import { HorizontalNav } from "./HorizontalNav";
 
 export interface PageHeaderProps {
   title: string;

client/src/app/common/RouteWrapper.tsx → client/src/app/components/RouteWrapper.tsx

@@ -2,7 +2,7 @@ import { isAuthRequired } from "@app/Constants";
 import keycloak from "@app/keycloak";
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
-import { checkAccess } from "./rbac-utils";
+import { checkAccess } from "../utils/rbac-utils";
 
 interface IRouteWrapperProps {
   comp: React.ComponentType<any>;

client/src/app/shared/components/simple-task-viewer/simple-document-viewer.tsx → client/src/app/components/SimpleDocumentViewer.tsx

@@ -21,7 +21,7 @@ import editorStyles from "@patternfly/react-styles/css/components/CodeEditor/cod
 import CodeIcon from "@patternfly/react-icons/dist/esm/icons/code-icon";
 import UndoIcon from "@patternfly/react-icons/dist/esm/icons/undo-icon";
 
-import "./viewer.css";
+import "./SimpleDocumentViewer.css";
 
 export { Language } from "@patternfly/react-code-editor";
 

client/src/app/shared/components/simple-pagination/simple-pagination.tsx → client/src/app/components/SimplePagination.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Pagination, PaginationVariant } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { PaginationStateProps } from "@app/shared/hooks/useLegacyPaginationState";
+import { PaginationStateProps } from "@app/hooks/useLegacyPaginationState";
 
 export interface SimplePaginationProps {
   paginationProps: PaginationStateProps;

client/src/app/shared/components/app-table/state-no-data.tsx → client/src/app/components/StateNoData.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { NoDataEmptyState } from "../no-data-empty-state";
+import { NoDataEmptyState } from "./NoDataEmptyState";
 
 export const StateNoData: React.FC = () => {
   const { t } = useTranslation();

client/src/app/components/StatusIcon.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SpinnerProps, TextContent } from "@patternfly/react-core";
+import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
+import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
+import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
+import { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";
+import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
+import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon";
+import {
+  global_disabled_color_200 as disabledColor,
+  global_success_color_100 as successColor,
+  global_Color_dark_200 as unknownColor,
+  global_info_color_200 as loadingColor,
+  global_danger_color_100 as errorColor,
+  global_info_color_100 as infoColor,
+} from "@patternfly/react-tokens";
+
+export type StatusIconType =
+  | "Canceled"
+  | "Completed"
+  | "Error"
+  | "Failed"
+  | "InProgress"
+  | "NotStarted"
+  | "Ok"
+  | "Scheduled"
+  | "Unknown";
+
+type IconListType = {
+  [key in StatusIconType]: {
+    Icon: React.ComponentClass<SVGIconProps> | React.FC<SpinnerProps>;
+    color: { name: string; value: string; var: string };
+  };
+};
+const iconList: IconListType = {
+  Canceled: {
+    Icon: TimesCircleIcon,
+    color: infoColor,
+  },
+  Completed: {
+    Icon: CheckCircleIcon,
+    color: successColor,
+  },
+  Error: {
+    Icon: ExclamationCircleIcon,
+    color: errorColor,
+  },
+  Failed: {
+    Icon: ExclamationCircleIcon,
+    color: errorColor,
+  },
+  InProgress: {
+    Icon: InProgressIcon,
+    color: loadingColor,
+  },
+  NotStarted: {
+    Icon: TimesCircleIcon,
+    color: unknownColor,
+  },
+  Ok: {
+    Icon: CheckCircleIcon,
+    color: successColor,
+  },
+  Scheduled: {
+    Icon: InProgressIcon,
+    color: infoColor,
+  },
+  Unknown: {
+    Icon: UnknownIcon,
+    color: unknownColor,
+  },
+};
+
+export interface IStatusIconProps {
+  status: StatusIconType;
+  isDisabled?: boolean;
+  className?: string;
+  label?: React.ReactNode | string;
+}
+
+export const StatusIcon: React.FC<IStatusIconProps> = ({
+  status,
+  isDisabled = false,
+  className = "",
+  label,
+}: IStatusIconProps) => {
+  const { t } = useTranslation();
+
+  const Icon = iconList[status].Icon;
+  const icon = (
+    <Icon
+      color={isDisabled ? disabledColor.value : iconList[status].color.value}
+      className={className}
+      isInline
+    />
+  );
+
+  if (!label) {
+    switch (status) {
+      case "Canceled":
+        label = t("terms.canceled");
+        break;
+      case "Completed":
+        label = t("terms.completed");
+        break;
+      case "Error":
+        label = t("terms.error");
+        break;
+      case "Failed":
+        label = t("terms.failed");
+        break;
+      case "InProgress":
+        label = t("terms.inProgress");
+        break;
+      case "NotStarted":
+        label = t("terms.notStarted");
+        break;
+      case "Scheduled":
+        label = t("terms.scheduled");
+        break;
+      default:
+        label = t("terms.unknown");
+        break;
+    }
+  }
+
+  return (
+    <TextContent>
+      {icon} {label}
+    </TextContent>
+  );
+};

client/src/app/shared/components/string-list-field/string-list-field.tsx → client/src/app/components/StringListField.tsx

@@ -7,7 +7,7 @@ import { InputGroup, TextInput, Button } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
 import { getValidatedFromErrors } from "@app/utils/utils";
-import { HookFormPFGroupController } from "../hook-form-pf-fields";
+import { HookFormPFGroupController } from "./HookFormPFFields";
 
 import { Table, Tbody, Td, Tr } from "@patternfly/react-table";
 

client/src/app/shared/components/table-controls/ConditionalTableBody.tsx → client/src/app/components/TableControls/ConditionalTableBody.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Bullseye, Spinner } from "@patternfly/react-core";
 import { Tbody, Tr, Td } from "@patternfly/react-table";
-import { StateError } from "../app-table";
-import { StateNoData } from "../app-table/state-no-data";
+import { StateError } from "../StateError";
+import { StateNoData } from "../StateNoData";
 
 export interface IConditionalTableBodyProps {
   numRenderedColumns: number;