refactor: move buttons under same dir in ui components

refactor: move a few components around

refactor: rename index.ts to badge.ts

src/components/Agents/Add/AddAgentForm.tsx

@@ -8,7 +8,7 @@ import {
   useUpdateAgentMutations
 } from "../../../api/query-hooks/mutations/useUpsertAgentMutations";
 import { GenerateAgent, GeneratedAgent } from "../../../api/services/agents";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import FormikAutocompleteDropdown from "../../Forms/Formik/FormikAutocompleteDropdown";
 import FormikKeyValueMapField from "../../Forms/Formik/FormikKeyValueMapField";

src/components/Agents/AgentName.tsx

@@ -1,8 +1,8 @@
+import { getAgentByID, Local } from "@flanksource-ui/api/services/agents";
+import { AgentItem } from "@flanksource-ui/api/types/common";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { useQuery } from "@tanstack/react-query";
 import { ComponentProps } from "react";
-import { getAgentByID, Local } from "../../api/services/agents";
-import { AgentItem } from "../../api/types/common";
-import { Badge } from "../../ui/Badge";
 
 type TopologyCardAgentProps = {
   agent?: AgentItem;

src/components/Agents/DeleteAgentButton.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { FaCircleNotch, FaTrash } from "react-icons/fa";
 import { useDeleteAgentMutations } from "../../api/query-hooks/mutations/useUpsertAgentMutations";
 import { ConfirmationPromptDialog } from "../../ui/AlertDialog/ConfirmationPromptDialog";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { toastError, toastSuccess } from "../Toast/toast";
 
 type DeleteAgentButtonProps = {

src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { GeneratedAgent } from "../../../api/services/agents";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import { Modal } from "../../../ui/Modal";
 import { Tab, Tabs } from "../../Tabs/Tabs";
 import { AgentFormValues } from "../Add/AddAgentForm";

src/components/Canary/CanaryPopup/CheckDetails.tsx

@@ -1,18 +1,18 @@
+import { useCanaryGraphQuery } from "@flanksource-ui/api/query-hooks/health";
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { isCanaryUI } from "@flanksource-ui/context/Environment";
+import { Age } from "@flanksource-ui/ui/Age";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { Stat } from "@flanksource-ui/ui/stats";
+import {
+  capitalizeFirstLetter,
+  toFixedIfNecessary
+} from "@flanksource-ui/utils/common";
+import mixins from "@flanksource-ui/utils/mixins.module.css";
 import { useAtom } from "jotai";
 import React, { Suspense, useEffect, useMemo, useRef } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useSearchParams } from "react-router-dom";
-import { useCanaryGraphQuery } from "../../../api/query-hooks/health";
-import { HealthCheck } from "../../../api/types/health";
-import { isCanaryUI } from "../../../context/Environment";
-import { Age } from "../../../ui/Age";
-import { Badge } from "../../../ui/Badge";
-import { Stat } from "../../../ui/stats";
-import {
-  capitalizeFirstLetter,
-  toFixedIfNecessary
-} from "../../../utils/common";
-import mixins from "../../../utils/mixins.module.css";
 import { DropdownStandaloneWrapper } from "../../Dropdown/StandaloneWrapper";
 import { TimeRange, timeRanges } from "../../Dropdown/TimeRange";
 import { Head } from "../../Head/Head";

src/components/Canary/CanaryPopup/CheckRunNow.tsx

@@ -4,7 +4,7 @@ import {
 } from "@flanksource-ui/api/services/topology";
 import { HealthCheck } from "@flanksource-ui/api/types/health";
 import { useUserAccessStateContext } from "@flanksource-ui/context/UserAccessContext/UserAccessContext";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useMutation } from "@tanstack/react-query";
 import { FaSpinner } from "react-icons/fa";
 import { VscDebugRerun } from "react-icons/vsc";

src/components/Canary/CanaryPopup/CheckTitle.tsx

@@ -1,7 +1,7 @@
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import React from "react";
-import { HealthCheck } from "../../../api/types/health";
-import { Badge } from "../../../ui/Badge";
 import AgentName from "../../Agents/AgentName";
 import { Icon } from "../../Icon";
 

src/components/Canary/Columns/index.tsx

@@ -1,8 +1,8 @@
+import { HealthCheck } from "@flanksource-ui/api/types/health";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CellContext } from "@tanstack/react-table";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import { HealthCheck } from "../../../api/types/health";
-import { Badge } from "../../../ui/Badge";
 import { Status } from "../../Status";
 import { GetName } from "../data";
 import style from "../index.module.css";

src/components/Configs/ConfigDetailsSelectedLinesControls.tsx

@@ -1,4 +1,4 @@
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 
 type Props = {
   selectedCount: number;

src/components/Configs/ConfigList/ConfigListColumn.tsx

@@ -1,5 +1,5 @@
 import { Status } from "@flanksource-ui/components/Status";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";
 import React from "react";
 import { FaTrash } from "react-icons/fa";

src/components/Configs/ConfigSummary/ConfigSummaryList.tsx

@@ -3,7 +3,7 @@ import {
   StatusInfo,
   StatusLine
 } from "@flanksource-ui/components/StatusLine/StatusLine";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CountBadge } from "@flanksource-ui/ui/Badge/CountBadge";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";

src/components/Configs/ConfigTabsLinks.tsx

@@ -1,4 +1,4 @@
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { useParams } from "react-router-dom";
 import { ConfigItem } from "../../api/types/configs";
 

src/components/Configs/Graph/ConfigIntermediaryNodeReactFlowNode.tsx

@@ -1,4 +1,4 @@
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import { HiOutlineMinusCircle, HiOutlinePlusCircle } from "react-icons/hi";
 import { Handle, NodeProps } from "reactflow";

src/components/Configs/Graph/ConfigItemReactFlowNode.tsx

@@ -1,5 +1,5 @@
 import { Status } from "@flanksource-ui/components/Status";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import clsx from "clsx";
 import { FaTrash } from "react-icons/fa";
 import { Link } from "react-router-dom";

src/components/Configs/Sidebar/ConfigActionBar.tsx

@@ -1,10 +1,10 @@
+import { useGetConfigByIdQuery } from "@flanksource-ui/api/query-hooks";
+import { EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { usePartialUpdateSearchParams } from "@flanksource-ui/hooks/usePartialUpdateSearchParams";
+import { ActionLink } from "@flanksource-ui/ui/Buttons/ActionLink";
 import clsx from "clsx";
 import React, { useEffect, useMemo, useState } from "react";
 import { MdAlarmAdd } from "react-icons/md";
-import { useGetConfigByIdQuery } from "../../../api/query-hooks";
-import { EvidenceType } from "../../../api/types/evidence";
-import { usePartialUpdateSearchParams } from "../../../hooks/usePartialUpdateSearchParams";
-import { ActionLink } from "../../../ui/ActionLink/ActionLink";
 import AttachAsEvidenceButton from "../../Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton";
 import PlaybooksDropdownMenu from "../../Playbooks/Runs/Submit/PlaybooksDropdownMenu";
 

src/components/Configs/Sidebar/ConfigSidebar.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import FloatableSlidingSideBar from "@flanksource-ui/ui/SlidingSideBar/FloatableSlidingSideBar";
 import { useState } from "react";
 import { MdMenu } from "react-icons/md";

src/components/Configs/Sidebar/ConfigsPanel.tsx

@@ -1,5 +1,5 @@
 import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
-import { Badge } from "@flanksource-ui/ui/Badge";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import CollapsiblePanel from "@flanksource-ui/ui/CollapsiblePanel/CollapsiblePanel";
 import clsx from "clsx";
 import { useAtom } from "jotai";
@@ -9,10 +9,10 @@ import { VscJson } from "react-icons/vsc";
 import { Tooltip } from "react-tooltip";
 import { useComponentConfigRelationshipQuery } from "../../../api/query-hooks/useComponentConfigRelationshipQuery";
 import { removeManualComponentConfigRelationship } from "../../../api/services/configs";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import TextSkeletonLoader from "../../../ui/SkeletonLoader/TextSkeletonLoader";
 import { refreshButtonClickedTrigger } from "../../../ui/SlidingSideBar/SlidingSideBar";
 import EmptyState from "../../EmptyState";
-import { IconButton } from "../../IconButton";
 import Title from "../../Title/title";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import TopologyConfigsActionsDropdown from "../../Topology/Sidebar/Utils/TopologyConfigsActionsDropdown";

src/components/Connections/ConnectionForm.tsx

@@ -3,7 +3,7 @@ import { Form, Formik } from "formik";
 import { mapValues, method } from "lodash";
 import { useMemo } from "react";
 import { FaSpinner, FaTrash } from "react-icons/fa";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import { Connection } from "./ConnectionFormModal";
 import RenderConnectionFormFields from "./RenderConnectionFormFields";
 import { TestConnection } from "./TestConnection";

src/components/FeatureFlags/FeatureFlagForm.tsx

@@ -1,5 +1,5 @@
 import { PropertyDBObject } from "@flanksource-ui/services/permissions/permissionsService";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { Modal } from "@flanksource-ui/ui/Modal";
 import clsx from "clsx";
 import { Form, Formik } from "formik";

src/components/Forms/Configs/ConfigRentionSpec.tsx

@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
 import FormikTextInput from "../Formik/FormikTextInput";
 

src/components/Forms/Formik/FormikConfigEnvVarFieldsArray.tsx

@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import FormikConfigEnvVarFields from "./FormikConfigEnvVarFields";
 
 type ConfigFormFieldProps = {

src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx

@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import React, { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type ConfigFormFieldProps = {
   label: string;

src/components/Forms/Formik/FormikConfigFormFormsArray.tsx

@@ -2,7 +2,7 @@ import { FieldArray, useFormikContext } from "formik";
 import { get } from "lodash";
 import React, { useMemo } from "react";
 import { FaPlus, FaTrash } from "react-icons/fa";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type FormikConfigFormFormsArrayProps = {
   name: string;

src/components/Forms/Formik/FormikKeyValueMapField.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { useFormikContext } from "formik";
 import { get, set } from "lodash";
 import { useCallback, useEffect, useState } from "react";

src/components/Forms/SpecEditorForm.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { Form, Formik } from "formik";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Button } from "../../ui/Button";
+import { Button } from "../../ui/Buttons/Button";
 import DeleteResource from "../SchemaResourcePage/Delete/DeleteResource";
 import {
   SchemaResourceType,

src/components/Incidents/AttachEvidenceDialog/AttachAsEvidenceDialogButton.tsx

@@ -2,7 +2,7 @@ import React, { ComponentProps, useMemo, useState } from "react";
 import { AttachEvidenceDialog } from ".";
 import { useFeatureFlagsContext } from "../../../context/FeatureFlagsContext";
 import { features } from "../../../services/permissions/features";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 
 type AttachAsEvidenceButtonProps = Omit<
   ComponentProps<typeof AttachEvidenceDialog>,

src/components/Incidents/Changelog/IncidentHistoryItemTypeContent.tsx

@@ -1,12 +1,12 @@
-import { FaComment } from "react-icons/fa";
 import {
   IncidentHistory,
   IncidentHistoryType,
   IncidentStatus
-} from "../../../api/types/incident";
-import { hypothesisStatusIconMap } from "../../../constants/hypothesisStatusOptions";
-import { Avatar } from "../../../ui/Avatar";
-import { Badge } from "../../../ui/Badge";
+} from "@flanksource-ui/api/types/incident";
+import { hypothesisStatusIconMap } from "@flanksource-ui/constants/hypothesisStatusOptions";
+import { Avatar } from "@flanksource-ui/ui/Avatar";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { FaComment } from "react-icons/fa";
 import { incidentStatusItems } from "../data";
 import EvidenceChangelogContent from "./EvidenceChangelogContent";
 

src/components/Incidents/Hypothesis/EvidenceSection/index.tsx

@@ -21,7 +21,7 @@ import { LogsTable } from "@flanksource-ui/components/Logs/Table/LogsTable";
 import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Age } from "@flanksource-ui/ui/Age";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { Modal } from "@flanksource-ui/ui/Modal";
 import {
   sanitizeHTMLContent,

src/components/Incidents/Hypothesis/HypothesisBarMenu/index.tsx

@@ -5,8 +5,8 @@ import { BsTrash } from "react-icons/bs";
 import { createIncidentQueryKey } from "../../../../api/query-hooks";
 import { deleteHypothesis } from "../../../../api/services/hypothesis";
 import { Hypothesis } from "../../../../api/types/hypothesis";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import { Menu } from "../../../../ui/Menu";
-import { IconButton } from "../../../IconButton";
 import { HypothesisDeleteDialog } from "../HypothesisDeleteDialog";
 
 interface IProps {

src/components/Incidents/Hypothesis/ResponseLine/index.tsx

@@ -8,10 +8,10 @@ import { Comment } from "../../../../api/types/incident";
 import { UserWithTeam } from "../../../../api/types/users";
 import { Age } from "../../../../ui/Age";
 import { Avatar } from "../../../../ui/Avatar";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import { Menu } from "../../../../ui/Menu";
 import { CommentText } from "../../../Comment";
 import { Icon } from "../../../Icon";
-import { IconButton } from "../../../IconButton";
 import { EvidenceItem } from "../EvidenceSection";
 
 interface IProps {

src/components/Incidents/IncidentCreate/index.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../../api/types/incident";
 import { useUser } from "../../../context";
 import { Events, sendAnalyticEvent } from "../../../services/analytics";
-import { Button } from "../../../ui/Button";
+import { Button } from "../../../ui/Buttons/Button";
 import SelectDropdown from "../../Dropdown/SelectDropdown";
 import { TextInput } from "../../TextInput";
 import { toastError } from "../../Toast/toast";

src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx

@@ -1,18 +1,18 @@
+import {
+  useComponentNameQuery,
+  useConfigNameQuery,
+  useTopologyQuery
+} from "@flanksource-ui/api/query-hooks";
+import { getCanaries } from "@flanksource-ui/api/services/topology";
+import { Evidence, EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { Size, ViewType } from "@flanksource-ui/types";
+import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { BsFillCircleFill, BsPersonFill } from "react-icons/bs";
 import { Link } from "react-router-dom";
-import {
-  useComponentNameQuery,
-  useConfigNameQuery,
-  useTopologyQuery
-} from "../../../../../api/query-hooks";
-import { getCanaries } from "../../../../../api/services/topology";
-import { Evidence, EvidenceType } from "../../../../../api/types/evidence";
-import { Size, ViewType } from "../../../../../types";
-import { Badge } from "../../../../../ui/Badge";
-import TextSkeletonLoader from "../../../../../ui/SkeletonLoader/TextSkeletonLoader";
 import { Icon } from "../../../../Icon";
 import { ConfigIcon } from "../../../../Icon/ConfigIcon";
 import { StatusStyles } from "../../../../Topology/TopologyCard";

src/components/Incidents/IncidentDetails/DefinitionOfDone/IncidentsDefinitionOfDoneItem.tsx

@@ -15,7 +15,7 @@ import { AiFillCheckCircle } from "react-icons/ai";
 import { BsHourglassSplit, BsTrash } from "react-icons/bs";
 import { FaEdit } from "react-icons/fa";
 import { MdRefresh } from "react-icons/md";
-import { IconButton } from "../../../IconButton";
+import { IconButton } from "../../../../ui/Buttons/IconButton";
 import EditEvidenceDefinitionOfDoneComment from "./EditEvidenceDefinitionOfDoneComment";
 import EditEvidenceDefinitionOfDoneScript from "./EditEvidenceDefinitionOfDoneScript";
 import { EvidenceView } from "./EvidenceView";

src/components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { MdModeEditOutline } from "react-icons/md";
 import { Incident } from "../../../api/types/incident";
-import { IconButton } from "../../IconButton";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import { EditIncidentTitleForm } from "./EditIncidentTitleForm";
 
 type EditableIncidentTitleBreadcrumbProps = {

src/components/Incidents/IncidentDetails/Responders.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaSpinner } from "react-icons/fa";
-import { IconButton } from "../../IconButton";
+import { IconButton } from "../../../ui/Buttons/IconButton";
 import { toastError, toastSuccess } from "../../Toast/toast";
 import { AddResponder } from "./AddResponders/AddResponder";
 import { IncidentDetailsRow } from "./IncidentDetailsRow";

src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx

@@ -1,5 +1,5 @@
 import { FormikCodeEditor } from "@flanksource-ui/components/Forms/Formik/FormikCodeEditor";
-import { Button } from "@flanksource-ui/ui/Button";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import clsx from "clsx";
 import { Form, Formik } from "formik";
 import FormikTextInput from "../../../Forms/Formik/FormikTextInput";