chore: Migrate sub components into Plugin Action Editor

app/client/src/PluginActionEditor/PluginActionEditor.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { useLocation } from "react-router";
-import { identifyEntityFromPath } from "../navigation/FocusEntity";
 import { useSelector } from "react-redux";
 import {
   getActionByBaseId,
@@ -20,15 +18,15 @@ import { useActionSettingsConfig } from "./hooks";
 
 interface ChildrenProps {
   children: React.ReactNode | React.ReactNode[];
+  actionId: string;
 }
 
 const PluginActionEditor = (props: ChildrenProps) => {
-  const { pathname } = useLocation();
-
   const isEditorInitialized = useIsEditorInitialised();
 
-  const entity = identifyEntityFromPath(pathname);
-  const action = useSelector((state) => getActionByBaseId(state, entity.id));
+  const action = useSelector((state) =>
+    getActionByBaseId(state, props.actionId),
+  );
 
   const pluginId = get(action, "pluginId", "");
   const plugin = useSelector((state) => getPlugin(state, pluginId));

app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import APIEditorForm from "./components/APIEditorForm";
 import { Flex } from "@appsmith/ads";
 import { useChangeActionCall } from "./hooks/useChangeActionCall";
 import { usePluginActionContext } from "../../PluginActionContext";
 import { UIComponentTypes } from "api/PluginApi";
-import GraphQLEditorForm from "./components/GraphQLEditor/GraphQLEditorForm";
-import UQIEditorForm from "./components/UQIEditorForm";
+import APIEditorForm from "./components/ApiEditor";
+import GraphQLEditorForm from "./components/GraphQLEditor";
+import UQIEditorForm from "./components/UQIEditor";
 
 const PluginActionForm = () => {
   useChangeActionCall();

app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import CommonEditorForm from "./CommonEditorForm";
-import { usePluginActionContext } from "PluginActionEditor";
+import CommonEditorForm from "../CommonEditorForm";
+import { usePluginActionContext } from "../../../../PluginActionContext";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
-import { HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/CommonApiConstants";
-import PostBodyData from "pages/Editor/APIEditor/PostBodyData";
+import { HTTP_METHOD_OPTIONS } from "../../../../constants/CommonApiConstants";
+import PostBodyData from "./PostBodyData";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
-import Pagination from "pages/Editor/APIEditor/Pagination";
+import Pagination from "./Pagination";
 import { reduxForm } from "redux-form";
 import {
   useHandleRunClick,

app/client/src/pages/Editor/APIEditor/Pagination.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/Pagination.tsx

@@ -7,8 +7,10 @@ import { PaginationType } from "entities/Action";
 import RadioFieldGroup from "components/editorComponents/form/fields/RadioGroupField";
 import { Classes, Text, TextType } from "@appsmith/ads-old";
 import { Button } from "@appsmith/ads";
-import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import { CodeEditorBorder } from "components/editorComponents/CodeEditor/EditorConfig";
+import {
+  CodeEditorBorder,
+  type EditorTheme,
+} from "components/editorComponents/CodeEditor/EditorConfig";
 import { GifPlayer } from "@appsmith/ads-old";
 import thumbnail from "assets/icons/gifs/thumbnail.png";
 import configPagination from "assets/icons/gifs/config_pagination.gif";

app/client/src/pages/Editor/APIEditor/PostBodyData.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx

@@ -5,7 +5,7 @@ import { formValueSelector } from "redux-form";
 import {
   POST_BODY_FORMAT_OPTIONS,
   POST_BODY_FORMAT_TITLES,
-} from "constants/ApiEditorConstants/CommonApiConstants";
+} from "../../../../constants/CommonApiConstants";
 import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
 import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
 import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
@@ -22,7 +22,7 @@ import { Classes } from "@appsmith/ads-old";
 import {
   getPostBodyFormat,
   updatePostBodyContentType,
-} from "PluginActionEditor/store";
+} from "../../../../store";
 import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
 import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
 import { createMessage, API_PANE_NO_BODY } from "ee/constants/messages";

app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/index.ts

@@ -0,0 +1 @@
+export { default } from "./APIEditorForm";

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import RequestDropdownField from "components/editorComponents/form/fields/RequestDropdownField";
 import { replayHighlightClass } from "globalStyles/portals";
-import EmbeddedDatasourcePathField from "components/editorComponents/form/fields/EmbeddedDatasourcePathField";
+import EmbeddedDatasourcePathField from "./components/EmbeddedDatasourcePathField";
 import styled from "styled-components";
 import { Flex } from "@appsmith/ads";
 

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx

@@ -4,10 +4,10 @@ import FormLabel from "components/editorComponents/FormLabel";
 import type { AutoGeneratedHeader } from "pages/Editor/APIEditor/helpers";
 import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import React from "react";
-import { API_EDITOR_TABS } from "constants/ApiEditorConstants/CommonApiConstants";
+import { API_EDITOR_TABS } from "../../../../constants/CommonApiConstants";
 import { DatasourceConfig } from "./components/DatasourceConfig";
 import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
-import ApiAuthentication from "pages/Editor/APIEditor/ApiAuthentication";
+import ApiAuthentication from "./components/ApiAuthentication";
 import ActionSettings from "pages/Editor/ActionSettings";
 import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
 import { useSelectedFormTab } from "./hooks/useSelectedFormTab";

app/client/src/pages/Editor/APIEditor/ApiAuthentication.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/ApiAuthentication.tsx

@@ -13,7 +13,7 @@ import {
   SAVE_DATASOURCE_MESSAGE,
   createMessage,
 } from "ee/constants/messages";
-import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
+import StoreAsDatasource from "./StoreAsDatasource";
 import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
 import { Icon, Text } from "@appsmith/ads";
 import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";

app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx

@@ -23,7 +23,7 @@ import {
 
 import { entityMarker } from "components/editorComponents/CodeEditor/MarkHelpers/entityMarker";
 import { bindingHintHelper } from "components/editorComponents/CodeEditor/hintHelpers";
-import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
+import StoreAsDatasource from "./StoreAsDatasource";
 import { DATASOURCE_URL_EXACT_MATCH_REGEX } from "constants/AppsmithActionConstants/ActionConstants";
 import styled from "styled-components";
 import * as FontFamilies from "constants/Fonts";
@@ -42,15 +42,15 @@ import {
   getDatasource,
   getDatasourcesByPluginId,
 } from "ee/selectors/entitiesSelector";
-import { extractApiUrlPath } from "transformers/RestActionTransformer";
+import { extractApiUrlPath } from "../../../../../transformers/RestActionTransformer";
 import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
 import { Text } from "@appsmith/ads";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
 import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
 import { getCodeMirrorNamespaceFromEditor } from "utils/getCodeMirrorNamespace";
 import { isDynamicValue } from "utils/DynamicBindingUtils";
 import { isEnvironmentValid } from "ee/utils/Environments";
-import { DEFAULT_DATASOURCE_NAME } from "constants/ApiEditorConstants/ApiEditorConstants";
+import { DEFAULT_DATASOURCE_NAME } from "../../../../../constants/ApiEditorConstants";
 import { isString } from "lodash";
 import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";
 import {
@@ -59,7 +59,7 @@ import {
 } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { isGACEnabled } from "ee/utils/planHelpers";
 import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors";
-import { getDatasourceInfo } from "PluginActionEditor/components/PluginActionForm/utils/getDatasourceInfo";
+import { getDatasourceInfo } from "../utils/getDatasourceInfo";
 
 interface ReduxStateProps {
   workspaceId: string;

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useSelectedFormTab.ts

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   getPluginActionConfigSelectedTab,
   setPluginActionEditorSelectedTab,
-} from "PluginActionEditor/store";
+} from "../../../../../store";
 
 export function useSelectedFormTab(): [
   string | undefined,

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/index.ts

@@ -1,5 +1 @@
 export { default } from "./CommonEditorForm";
-
-export { HintMessages } from "./HintMessages";
-export { InfoFields } from "./InfoFields";
-export { RequestTabs } from "./RequestTabs";

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { reduxForm } from "redux-form";
 import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
 import CommonEditorForm from "../CommonEditorForm";
-import Pagination from "pages/Editor/APIEditor/GraphQL/Pagination";
-import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants";
+import Pagination from "./Pagination";
+import { GRAPHQL_HTTP_METHOD_OPTIONS } from "../../../../constants/GraphQLEditorConstants";
 import PostBodyData from "./PostBodyData";
-import { usePluginActionContext } from "PluginActionEditor";
+import { usePluginActionContext } from "../../../../PluginActionContext";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";

app/client/src/pages/Editor/APIEditor/GraphQL/Pagination.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/Pagination.tsx

@@ -12,7 +12,7 @@ import { connect } from "react-redux";
 import type { AppState } from "ee/reducers";
 import { FormLabel } from "components/editorComponents/form/fields/StyledFormComponents";
 import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
-import type { GRAPHQL_PAGINATION_TYPE } from "constants/ApiEditorConstants/GraphQLEditorConstants";
+import type { GRAPHQL_PAGINATION_TYPE } from "../../../../constants/GraphQLEditorConstants";
 import {
   LIMITBASED_PREFIX,
   CURSORBASED_PREFIX,

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx

@@ -8,7 +8,7 @@ import {
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
 import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
-import { Section, Zone } from "pages/Editor/ActionForm";
+import { Section, Zone } from "../ActionForm";
 import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
 import FormLabel from "components/editorComponents/FormLabel";
 

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/index.ts

@@ -0,0 +1 @@
+export { default } from "./GraphQLEditorForm";

app/client/src/pages/Editor/QueryEditor/FormRender.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/FormRender.tsx

@@ -20,7 +20,7 @@ import {
   updateEvaluatedSectionConfig,
 } from "components/formControls/utils";
 import { isValidFormConfig } from "reducers/evaluationReducers/formEvaluationReducer";
-import FormControl from "../FormControl";
+import FormControl from "pages/Editor/FormControl";
 import type { ControlProps } from "components/formControls/BaseControl";
 import { Spinner } from "@appsmith/ads";
 import type { QueryAction, SaaSAction } from "entities/Action";

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditorForm.tsx → app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import FormRender from "pages/Editor/QueryEditor/FormRender";
-import { usePluginActionContext } from "../../../PluginActionContext";
+import FormRender from "./FormRender";
+import { usePluginActionContext } from "../../../../PluginActionContext";
 import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
 import { getFormValues, reduxForm } from "redux-form";
 import type { QueryAction, SaaSAction } from "entities/Action";

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/index.ts

@@ -0,0 +1 @@
+export { default } from "./UQIEditorForm";

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from "@testing-library/react-hooks/dom";
 import { useDispatch } from "react-redux";
 import { PluginType } from "entities/Action";
-import { usePluginActionContext } from "PluginActionEditor";
+import { usePluginActionContext } from "../../../PluginActionContext";
 import { changeApi, changeQuery } from "../../../store";
 import usePrevious from "utils/hooks/usePrevious";
 import { useChangeActionCall } from "./useChangeActionCall";
@@ -15,7 +15,7 @@ jest.mock("../../../store", () => ({
   changeQuery: jest.fn(),
 }));
 
-jest.mock("PluginActionEditor", () => ({
+jest.mock("../../../PluginActionContext", () => ({
   usePluginActionContext: jest.fn(),
 }));
 

app/client/src/PluginActionEditor/components/PluginActionForm/hooks/useChangeActionCall.ts

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { PluginType } from "entities/Action";
-import { usePluginActionContext } from "PluginActionEditor";
-import { changeApi, changeQuery } from "PluginActionEditor/store";
+import { usePluginActionContext } from "../../../PluginActionContext";
+import { changeApi, changeQuery } from "../../../store";
 import usePrevious from "utils/hooks/usePrevious";
 
 export const useChangeActionCall = () => {

app/client/src/PluginActionEditor/components/PluginActionNameEditor.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import ActionNameEditor from "components/editorComponents/ActionNameEditor";
-import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import { usePluginActionContext } from "../PluginActionContext";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";

app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { IDEBottomView, ViewHideBehaviour } from "IDE";
-import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants";
+import { ActionExecutionResizerHeight } from "./constants";
 import EntityBottomTabs from "components/editorComponents/EntityBottomTabs";
 import { useDispatch, useSelector } from "react-redux";
 import { setPluginActionEditorDebuggerState } from "../../store";

app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiFormatSegmentedResponse.tsx

@@ -7,7 +7,7 @@ import { Flex, SegmentedControl } from "@appsmith/ads";
 import type { ActionResponse } from "api/ActionAPI";
 import { setActionResponseDisplayFormat } from "actions/pluginActionActions";
 import { actionResponseDisplayDataFormats } from "pages/Editor/utils";
-import { ResponseDisplayFormats } from "constants/ApiEditorConstants/CommonApiConstants";
+import { ResponseDisplayFormats } from "../../../constants/CommonApiConstants";
 import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { ResponseFormatTabs } from "./ResponseFormatTabs";

app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponse.tsx

@@ -10,7 +10,7 @@ import {
 import type { ActionResponse } from "api/ActionAPI";
 import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import type { SourceEntity } from "entities/AppsmithConsole";
-import ApiResponseMeta from "components/editorComponents/ApiResponseMeta";
+import ApiResponseMeta from "./ApiResponseMeta";
 import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView";
 import LogAdditionalInfo from "components/editorComponents/Debugger/ErrorLogs/components/LogAdditionalInfo";
 import LogHelper from "components/editorComponents/Debugger/ErrorLogs/components/LogHelper";

app/client/src/components/editorComponents/ApiResponseMeta.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/ApiResponseMeta.tsx

@@ -2,12 +2,12 @@ import type { PropsWithChildren } from "react";
 import React from "react";
 import { Flex } from "@appsmith/ads";
 import { Text, TextType } from "@appsmith/ads-old";
-import { formatBytes } from "../../utils/helpers";
 import { isEmpty } from "lodash";
-import BindDataButton from "pages/Editor/QueryEditor/BindDataButton";
+import BindDataButton from "./BindDataButton";
 import styled from "styled-components";
 import type { ActionResponse } from "api/ActionAPI";
 import { Text as BlueprintText } from "@blueprintjs/core/lib/esm/components/text/text";
+import { formatBytes } from "../utils/formatBytes";
 
 interface TextStyleProps {
   accent: "primary" | "secondary" | "error";

app/client/src/pages/Editor/QueryEditor/QueryResponseTab.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab.tsx

@@ -6,9 +6,9 @@ import {
   ResponseTabErrorContainer,
   ResponseTabErrorContent,
   ResponseTabErrorDefaultMessage,
-} from "PluginActionEditor/components/PluginActionResponse/components/ApiResponse";
-import { ResponseFormatTabs } from "PluginActionEditor/components/PluginActionResponse/components/ResponseFormatTabs";
-import { NoResponse } from "PluginActionEditor/components/PluginActionResponse/components/NoResponse";
+} from "./ApiResponse";
+import { ResponseFormatTabs } from "./ResponseFormatTabs";
+import { NoResponse } from "./NoResponse";
 import LogAdditionalInfo from "components/editorComponents/Debugger/ErrorLogs/components/LogAdditionalInfo";
 import LogHelper from "components/editorComponents/Debugger/ErrorLogs/components/LogHelper";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
@@ -27,7 +27,7 @@ import { getUpdateTimestamp } from "components/editorComponents/Debugger/ErrorLo
 import type { SourceEntity } from "entities/AppsmithConsole";
 import type { Action } from "entities/Action";
 import { getActionData } from "ee/selectors/entitiesSelector";
-import { actionResponseDisplayDataFormats } from "../utils";
+import { actionResponseDisplayDataFormats } from "pages/Editor/utils";
 import { getErrorAsString } from "sagas/ActionExecution/errorUtils";
 import { isString } from "lodash";
 import ActionExecutionInProgressView from "components/editorComponents/ActionExecutionInProgressView";
@@ -36,7 +36,7 @@ import BindDataButton from "./BindDataButton";
 import {
   getPluginActionDebuggerState,
   setPluginActionEditorSelectedTab,
-} from "PluginActionEditor/store";
+} from "../../../store";
 import { EDITOR_TABS } from "constants/QueryEditorConstants";
 import {
   createMessage,

app/client/src/PluginActionEditor/components/PluginActionResponse/components/ResponseFormatTabs.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { ResponseDisplayFormats } from "constants/ApiEditorConstants/CommonApiConstants";
+import { ResponseDisplayFormats } from "../../../constants/CommonApiConstants";
 import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
 import { isString } from "lodash";
-import Table from "pages/Editor/QueryEditor/Table";
+import Table from "./Table";
 
 type ResponseData = string | Record<string, unknown>[];
 

app/client/src/components/editorComponents/Debugger/Schema.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx

@@ -1,7 +1,10 @@
 import { Flex } from "@appsmith/ads";
 import React, { useEffect, useState } from "react";
-import type { DatasourceColumns, DatasourceKeys } from "entities/Datasource";
-import { DatasourceStructureContext } from "entities/Datasource";
+import {
+  DatasourceStructureContext,
+  type DatasourceColumns,
+  type DatasourceKeys,
+} from "entities/Datasource";
 import { DatasourceStructureContainer as DatasourceStructureList } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer";
 import { useSelector } from "react-redux";
 import {
@@ -12,7 +15,7 @@ import DatasourceField from "pages/Editor/DatasourceInfo/DatasourceField";
 import { find } from "lodash";
 import type { AppState } from "ee/reducers";
 import RenderInterimDataState from "pages/Editor/DatasourceInfo/RenderInterimDataState";
-import { getPluginActionDebuggerState } from "PluginActionEditor/store";
+import { getPluginActionDebuggerState } from "../../../store";
 
 interface Props {
   datasourceId: string;

app/client/src/PluginActionEditor/components/PluginActionResponse/utils/formatBytes.ts

@@ -0,0 +1,14 @@
+export const formatBytes = (bytes: string | number) => {
+  if (!bytes) return;
+
+  const value = typeof bytes === "string" ? parseInt(bytes) : bytes;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+
+  if (value === 0) return "0 bytes";
+
+  const i = parseInt(String(Math.floor(Math.log(value) / Math.log(1024))));
+
+  if (i === 0) return bytes + " " + sizes[i];
+
+  return (value / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
+};