[WEB-5459] feat(codemods): add function declaration transformer with tests (#8137)

- Add jscodeshift-based codemod to convert arrow function components to function declarations
- Support React.FC, observer-wrapped, and forwardRef components
- Include comprehensive test suite covering edge cases
- Add npm script to run transformer across codebase
- Target only .tsx files in source directories, excluding node_modules and declaration files

* [WEB-5459] chore: updates after running codemod

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Aaron 2025-11-20 19:09:40 +07:00 committed by GitHub
parent 90866fb925
commit 83fdebf64d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1771 changed files with 17003 additions and 13856 deletions

View file

@ -20,7 +20,7 @@ type Props = {
onSubmit?: () => Promise<void>;
};
export const ArchiveIssueModal: React.FC<Props> = (props) => {
export function ArchiveIssueModal(props: Props) {
const { dataId, data, isOpen, handleClose, onSubmit } = props;
const { t } = useTranslation();
// states
@ -110,4 +110,4 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
</Dialog>
</Transition.Root>
);
};
}

View file

@ -15,7 +15,7 @@ import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-to
import { useIssues } from "@/hooks/store/use-issues";
import { useProject } from "@/hooks/store/use-project";
export const ArchivedIssuesHeader: FC = observer(() => {
export const ArchivedIssuesHeader = observer(function ArchivedIssuesHeader() {
// router
const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;

View file

@ -37,7 +37,7 @@ type TIssueAttachmentsDetail = {
disabled?: boolean;
};
export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((props) => {
export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(props: TIssueAttachmentsDetail) {
// props
const { attachmentId, attachmentHelpers, disabled } = props;
// store hooks

View file

@ -29,7 +29,7 @@ type TIssueAttachmentItemList = {
issueServiceType?: TIssueServiceType;
};
export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((props) => {
export const IssueAttachmentItemList = observer(function IssueAttachmentItemList(props: TIssueAttachmentItemList) {
const {
workspaceSlug,
projectId,

View file

@ -26,7 +26,7 @@ type TIssueAttachmentsListItem = {
issueServiceType?: TIssueServiceType;
};
export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer((props) => {
export const IssueAttachmentsListItem = observer(function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
const { t } = useTranslation();
// props
const { attachmentId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;

View file

@ -17,7 +17,7 @@ type Props = {
uploadStatus: TAttachmentUploadStatus;
};
export const IssueAttachmentsUploadItem: React.FC<Props> = observer((props) => {
export const IssueAttachmentsUploadItem = observer(function IssueAttachmentsUploadItem(props: Props) {
// props
const { uploadStatus } = props;
// derived values

View file

@ -17,7 +17,7 @@ type Props = {
uploadStatus: TAttachmentUploadStatus;
};
export const IssueAttachmentsUploadDetails: React.FC<Props> = observer((props) => {
export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsUploadDetails(props: Props) {
// props
const { uploadStatus } = props;
// derived values

View file

@ -14,7 +14,7 @@ type Props = {
attachmentOperations: TAttachmentOperationsModal;
};
export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(props: Props) {
const { workspaceSlug, disabled = false, attachmentOperations } = props;
// states
const [isLoading, setIsLoading] = useState(false);

View file

@ -14,7 +14,7 @@ type TIssueAttachmentsList = {
disabled?: boolean;
};
export const IssueAttachmentsList: FC<TIssueAttachmentsList> = observer((props) => {
export const IssueAttachmentsList = observer(function IssueAttachmentsList(props: TIssueAttachmentsList) {
const { issueId, attachmentHelpers, disabled } = props;
// store hooks
const {

View file

@ -25,7 +25,7 @@ type Props = {
issueServiceType?: TIssueServiceType;
};
export const IssueAttachmentDeleteModal: FC<Props> = observer((props) => {
export const IssueAttachmentDeleteModal = observer(function IssueAttachmentDeleteModal(props: Props) {
const { t } = useTranslation();
const { isOpen, onClose, attachmentId, attachmentOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
// states

View file

@ -15,7 +15,7 @@ export type TIssueAttachmentRoot = {
disabled?: boolean;
};
export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = observer((props) => {
export const IssueAttachmentRoot = observer(function IssueAttachmentRoot(props: TIssueAttachmentRoot) {
// props
const { workspaceSlug, projectId, issueId, disabled = false } = props;
// hooks

View file

@ -8,7 +8,7 @@ type Props = {
className?: string;
};
export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
export function BulkOperationsUpgradeBanner(props: Props) {
const { className } = props;
return (
@ -29,4 +29,4 @@ export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
</div>
</div>
);
};
}

View file

@ -14,7 +14,7 @@ type Props = {
onConfirm: () => Promise<void>;
};
export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
export function ConfirmIssueDiscard(props: Props) {
const { isOpen, handleClose, onDiscard, onConfirm } = props;
const [isLoading, setIsLoading] = useState(false);
@ -93,4 +93,4 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
</Dialog>
</Transition.Root>
);
};
}

View file

@ -16,7 +16,9 @@ type TCreateIssueToastActionItems = {
isEpic?: boolean;
};
export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = observer((props) => {
export const CreateIssueToastActionItems = observer(function CreateIssueToastActionItems(
props: TCreateIssueToastActionItems
) {
const { workspaceSlug, projectId, issueId, isEpic = false } = props;
// state
const [copied, setCopied] = useState(false);

View file

@ -27,7 +27,7 @@ type Props = {
isEpic?: boolean;
};
export const DeleteIssueModal: React.FC<Props> = observer((props) => {
export const DeleteIssueModal = observer(function DeleteIssueModal(props: Props) {
const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit, isEpic = false } = props;
// states
const [isDeleting, setIsDeleting] = useState(false);

View file

@ -38,7 +38,7 @@ const LAYOUTS = [
EIssueLayoutTypes.GANTT,
];
export const HeaderFilters = observer((props: Props) => {
export const HeaderFilters = observer(function HeaderFilters(props: Props) {
const {
currentProjectDetails,
projectId,

View file

@ -25,7 +25,7 @@ type Props = {
hideWidgets?: TWorkItemWidgets[];
};
export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
export function IssueDetailWidgetActionButtons(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
// translation
const { t } = useTranslation();
@ -99,4 +99,4 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
/>
</div>
);
};
}

View file

@ -16,7 +16,7 @@ type Props = {
issueServiceType?: TIssueServiceType;
};
export const IssueAttachmentsCollapsibleContent: FC<Props> = observer((props) => {
export const IssueAttachmentsCollapsibleContent = observer(function IssueAttachmentsCollapsibleContent(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
// helper
const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId, issueServiceType);

View file

@ -25,7 +25,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
export const IssueAttachmentActionButton = observer(function IssueAttachmentActionButton(props: Props) {
const { workspaceSlug, projectId, issueId, customButton, disabled = false, issueServiceType } = props;
// state
const [isLoading, setIsLoading] = useState(false);

View file

@ -19,7 +19,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const AttachmentsCollapsible: FC<Props> = observer((props) => {
export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(props: Props) {
const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
// store hooks
const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);

View file

@ -20,7 +20,7 @@ type Props = {
issueServiceType?: TIssueServiceType;
};
export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
const { t } = useTranslation();
// store hooks

View file

@ -24,7 +24,7 @@ type Props = {
hideWidgets?: TWorkItemWidgets[];
};
export const IssueDetailWidgetCollapsibles: FC<Props> = observer((props) => {
export const IssueDetailWidgetCollapsibles = observer(function IssueDetailWidgetCollapsibles(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
// store hooks
const {

View file

@ -24,7 +24,7 @@ type Props = {
hideWidgets?: TWorkItemWidgets[];
};
export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
export const IssueDetailWidgetModals = observer(function IssueDetailWidgetModals(props: Props) {
const { workspaceSlug, projectId, issueId, issueServiceType, hideWidgets } = props;
// store hooks
const {

View file

@ -15,7 +15,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const IssueLinksCollapsibleContent: FC<Props> = (props) => {
export function IssueLinksCollapsibleContent(props: Props) {
const { workspaceSlug, projectId, issueId, disabled, issueServiceType } = props;
// helper
@ -29,4 +29,4 @@ export const IssueLinksCollapsibleContent: FC<Props> = (props) => {
issueServiceType={issueServiceType}
/>
);
};
}

View file

@ -14,7 +14,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const IssueLinksActionButton: FC<Props> = observer((props) => {
export const IssueLinksActionButton = observer(function IssueLinksActionButton(props: Props) {
const { customButton, disabled = false, issueServiceType } = props;
// store hooks
const { toggleIssueLinkModal } = useIssueDetail(issueServiceType);

View file

@ -19,7 +19,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const LinksCollapsible: FC<Props> = observer((props) => {
export const LinksCollapsible = observer(function LinksCollapsible(props: Props) {
const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
// store hooks
const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);

View file

@ -18,7 +18,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
const { isOpen, issueId, disabled, issueServiceType } = props;
// translation
const { t } = useTranslation();

View file

@ -37,7 +37,7 @@ export type TRelationObject = {
placeholder: string;
};
export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
export const RelationsCollapsibleContent = observer(function RelationsCollapsibleContent(props: Props) {
const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
// plane hooks
const { t } = useTranslation();

View file

@ -20,7 +20,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const RelationActionButton: FC<Props> = observer((props) => {
export const RelationActionButton = observer(function RelationActionButton(props: Props) {
const { customButton, issueId, disabled = false, issueServiceType } = props;
const { t } = useTranslation();
// store hooks

View file

@ -18,7 +18,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const RelationsCollapsible: FC<Props> = observer((props) => {
export const RelationsCollapsible = observer(function RelationsCollapsible(props: Props) {
const { workspaceSlug, issueId, disabled = false, issueServiceType } = props;
// store hooks
const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);

View file

@ -20,7 +20,7 @@ type Props = {
issueServiceType?: TIssueServiceType;
};
export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
const { t } = useTranslation();
// store hook

View file

@ -19,7 +19,7 @@ type Props = {
hideWidgets?: TWorkItemWidgets[];
};
export const IssueDetailWidgets: FC<Props> = (props) => {
export function IssueDetailWidgets(props: Props) {
const {
workspaceSlug,
projectId,
@ -61,4 +61,4 @@ export const IssueDetailWidgets: FC<Props> = (props) => {
)}
</>
);
};
}

View file

@ -23,7 +23,7 @@ type Props = {
type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
export const SubIssuesCollapsibleContent = observer(function SubIssuesCollapsibleContent(props: Props) {
const { workspaceSlug, projectId, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
// state
const [issueCrudState, setIssueCrudState] = useState<{

View file

@ -23,7 +23,7 @@ type TSubIssueDisplayFiltersProps = {
isEpic?: boolean;
};
export const SubIssueDisplayFilters: FC<TSubIssueDisplayFiltersProps> = observer((props) => {
export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(props: TSubIssueDisplayFiltersProps) {
const {
isEpic = false,
displayProperties,

View file

@ -26,7 +26,7 @@ type TSubIssueFiltersProps = {
availableFilters: (keyof IIssueFilterOptions)[];
};
export const SubIssueFilters: FC<TSubIssueFiltersProps> = observer((props) => {
export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssueFiltersProps) {
const { handleFiltersUpdate, filters, memberIds, states, availableFilters } = props;
// plane hooks
const { t } = useTranslation();

View file

@ -29,7 +29,7 @@ interface TSubIssuesListGroupProps {
spacingLeft?: number;
}
export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props) => {
export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TSubIssuesListGroupProps) {
const {
group,
serviceType,

View file

@ -42,7 +42,7 @@ type Props = {
storeType?: EIssuesStoreType;
};
export const SubIssuesListItem: React.FC<Props> = observer((props) => {
export const SubIssuesListItem = observer(function SubIssuesListItem(props: Props) {
const {
workspaceSlug,
projectId,

View file

@ -33,7 +33,7 @@ type Props = {
issue: TIssue;
};
export const SubIssuesListItemProperties: React.FC<Props> = observer((props) => {
export const SubIssuesListItemProperties = observer(function SubIssuesListItemProperties(props: Props) {
const { workspaceSlug, parentIssueId, issueId, canEdit, updateSubIssue, displayProperties, issue } = props;
const { t } = useTranslation();
const { getStateById } = useProjectState();

View file

@ -29,7 +29,7 @@ type Props = {
storeType: EIssuesStoreType;
};
export const SubIssuesListRoot: React.FC<Props> = observer((props) => {
export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Props) {
const {
workspaceSlug,
projectId,

View file

@ -20,7 +20,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const SubIssuesActionButton: FC<Props> = observer((props) => {
export const SubIssuesActionButton = observer(function SubIssuesActionButton(props: Props) {
const { issueId, customButton, disabled = false, issueServiceType } = props;
// translation
const { t } = useTranslation();

View file

@ -19,7 +19,7 @@ type Props = {
issueServiceType: TIssueServiceType;
};
export const SubIssuesCollapsible: FC<Props> = observer((props) => {
export const SubIssuesCollapsible = observer(function SubIssuesCollapsible(props: Props) {
const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
// store hooks
const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);

View file

@ -28,7 +28,7 @@ type TSubWorkItemTitleActionsProps = {
projectId: string;
};
export const SubWorkItemTitleActions: FC<TSubWorkItemTitleActionsProps> = observer((props) => {
export const SubWorkItemTitleActions = observer(function SubWorkItemTitleActions(props: TSubWorkItemTitleActionsProps) {
const { disabled, issueServiceType = EIssueServiceType.ISSUES, parentId, projectId } = props;
// store hooks

View file

@ -20,7 +20,7 @@ type Props = {
workspaceSlug: string;
};
export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
const {
isOpen,
parentIssueId,

View file

@ -10,7 +10,7 @@ type Props = {
disabled?: boolean;
};
export const IssueDetailWidgetButton: FC<Props> = (props) => {
export function IssueDetailWidgetButton(props: Props) {
const { icon, title, disabled = false } = props;
return (
<div
@ -26,4 +26,4 @@ export const IssueDetailWidgetButton: FC<Props> = (props) => {
<span className="text-sm font-medium">{title}</span>
</div>
);
};
}

View file

@ -20,7 +20,7 @@ type TIssueCycleSelect = {
disabled?: boolean;
};
export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssueCycleSelect) {
const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
const { t } = useTranslation();
// states

View file

@ -27,7 +27,7 @@ type TIssueActivityCommentRoot = {
sortOrder: E_SORT_ORDER;
};
export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer((props) => {
export const IssueActivityCommentRoot = observer(function IssueActivityCommentRoot(props: TIssueActivityCommentRoot) {
const {
workspaceSlug,
isIntakeIssue,

View file

@ -15,7 +15,7 @@ type TActivityFilter = {
filterOptions: TActivityFilterOption[];
};
export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
export const ActivityFilter = observer(function ActivityFilter(props: TActivityFilter) {
const { selectedFilters = [], filterOptions } = props;
// hooks

View file

@ -12,7 +12,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueArchivedAtActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueArchivedAtActivity: FC<TIssueArchivedAtActivity> = observer((props) => {
export const IssueArchivedAtActivity = observer(function IssueArchivedAtActivity(props: TIssueArchivedAtActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -9,7 +9,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props) => {
export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(props: TIssueAssigneeActivity) {
const { activityId, ends, showIssue = true } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueAttachmentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueAttachmentActivity: FC<TIssueAttachmentActivity> = observer((props) => {
export const IssueAttachmentActivity = observer(function IssueAttachmentActivity(props: TIssueAttachmentActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -11,7 +11,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueCycleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
export const IssueCycleActivity = observer(function IssueCycleActivity(props: TIssueCycleActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -13,7 +13,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueDefaultActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((props) => {
export const IssueDefaultActivity = observer(function IssueDefaultActivity(props: TIssueDefaultActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueDescriptionActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueDescriptionActivity: FC<TIssueDescriptionActivity> = observer((props) => {
export const IssueDescriptionActivity = observer(function IssueDescriptionActivity(props: TIssueDescriptionActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueEstimateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props) => {
export const IssueEstimateActivity = observer(function IssueEstimateActivity(props: TIssueEstimateActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -20,7 +20,7 @@ type TIssueActivityBlockComponent = {
customUserName?: string;
};
export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (props) => {
export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent) {
const { icon, activityId, ends, children, customUserName } = props;
// hooks
const {
@ -58,4 +58,4 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
</div>
</div>
);
};
}

View file

@ -12,7 +12,7 @@ type TIssueLink = {
activityId: string;
};
export const IssueLink: FC<TIssueLink> = (props) => {
export function IssueLink(props: TIssueLink) {
const { activityId } = props;
// hooks
const {
@ -49,4 +49,4 @@ export const IssueLink: FC<TIssueLink> = (props) => {
</a>
</Tooltip>
);
};
}

View file

@ -8,7 +8,7 @@ type TIssueUser = {
customUserName?: string;
};
export const IssueUser: FC<TIssueUser> = (props) => {
export function IssueUser(props: TIssueUser) {
const { activityId, customUserName } = props;
// hooks
const {
@ -33,4 +33,4 @@ export const IssueUser: FC<TIssueUser> = (props) => {
)}
</>
);
};
}

View file

@ -9,7 +9,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueInboxActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
export const IssueInboxActivity = observer(function IssueInboxActivity(props: TIssueInboxActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -3,7 +3,7 @@ import { Tooltip } from "@plane/propel/tooltip";
type TIssueLabelPill = { name?: string; color?: string };
export const LabelActivityChip: FC<TIssueLabelPill> = (props) => {
export function LabelActivityChip(props: TIssueLabelPill) {
const { name, color } = props;
return (
<Tooltip tooltipContent={name}>
@ -19,4 +19,4 @@ export const LabelActivityChip: FC<TIssueLabelPill> = (props) => {
</span>
</Tooltip>
);
};
}

View file

@ -9,7 +9,7 @@ import { IssueActivityBlockComponent, IssueLink, LabelActivityChip } from "./";
type TIssueLabelActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
export const IssueLabelActivity = observer(function IssueLabelActivity(props: TIssueLabelActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueLinkActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIssueLinkActivity) {
const { activityId, showIssue = false, ends } = props;
// hooks
const {

View file

@ -11,7 +11,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueModuleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) => {
export const IssueModuleActivity = observer(function IssueModuleActivity(props: TIssueModuleActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueNameActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueNameActivity: FC<TIssueNameActivity> = observer((props) => {
export const IssueNameActivity = observer(function IssueNameActivity(props: TIssueNameActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueParentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) => {
export const IssueParentActivity = observer(function IssueParentActivity(props: TIssueParentActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -8,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssuePriorityActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props) => {
export const IssuePriorityActivity = observer(function IssuePriorityActivity(props: TIssuePriorityActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -10,7 +10,7 @@ import { IssueActivityBlockComponent } from "./";
type TIssueRelationActivity = { activityId: string; ends: "top" | "bottom" | undefined };
export const IssueRelationActivity: FC<TIssueRelationActivity> = observer((props) => {
export const IssueRelationActivity = observer(function IssueRelationActivity(props: TIssueRelationActivity) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -10,7 +10,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueStartDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueStartDateActivity: FC<TIssueStartDateActivity> = observer((props) => {
export const IssueStartDateActivity = observer(function IssueStartDateActivity(props: TIssueStartDateActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -11,7 +11,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueStateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
export const IssueStateActivity = observer(function IssueStateActivity(props: TIssueStateActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -10,7 +10,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
type TIssueTargetDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
export const IssueTargetDateActivity: FC<TIssueTargetDateActivity> = observer((props) => {
export const IssueTargetDateActivity = observer(function IssueTargetDateActivity(props: TIssueTargetDateActivity) {
const { activityId, showIssue = true, ends } = props;
// hooks
const {

View file

@ -34,7 +34,7 @@ type TIssueActivityItem = {
ends: "top" | "bottom" | undefined;
};
export const IssueActivityItem: FC<TIssueActivityItem> = observer((props) => {
export const IssueActivityItem = observer(function IssueActivityItem(props: TIssueActivityItem) {
const { activityId, ends } = props;
// hooks
const {

View file

@ -1,31 +1,33 @@
// plane imports
import { Loader } from "@plane/ui";
export const IssueActivityLoader = () => (
<Loader className="space-y-8">
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
export function IssueActivityLoader() {
return (
<Loader className="space-y-8">
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
</div>
</div>
</div>
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="40%" />
<Loader.Item height="8px" width="60%" />
<Loader.Item height="10px" width="80%" />
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="40%" />
<Loader.Item height="8px" width="60%" />
<Loader.Item height="10px" width="80%" />
</div>
</div>
</div>
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
<div className="flex items-start gap-3">
<Loader.Item className="shrink-0" height="28px" width="28px" />
<div className="space-y-2 w-full">
<Loader.Item height="8px" width="60%" />
<Loader.Item height="8px" width="40%" />
<Loader.Item height="10px" width="100%" />
</div>
</div>
</div>
</Loader>
);
</Loader>
);
}

View file

@ -40,7 +40,7 @@ export type TActivityOperations = {
uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
};
export const IssueActivity: FC<TIssueActivity> = observer((props) => {
export const IssueActivity = observer(function IssueActivity(props: TIssueActivity) {
const { workspaceSlug, projectId, issueId, disabled = false, isIntakeIssue = false } = props;
// i18n
const { t } = useTranslation();

View file

@ -14,23 +14,25 @@ export type TActivitySortRoot = {
className?: string;
iconClassName?: string;
};
export const ActivitySortRoot: FC<TActivitySortRoot> = memo((props) => (
<div
className={cn(
getButtonStyling("neutral-primary", "sm"),
"px-2 text-custom-text-300 cursor-pointer",
props.className
)}
onClick={() => {
props.toggleSort();
}}
>
{props.sortOrder === "asc" ? (
<ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
) : (
<ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
)}
</div>
));
export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
return (
<div
className={cn(
getButtonStyling("neutral-primary", "sm"),
"px-2 text-custom-text-300 cursor-pointer",
props.className
)}
onClick={() => {
props.toggleSort();
}}
>
{props.sortOrder === "asc" ? (
<ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
) : (
<ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
)}
</div>
);
});
ActivitySortRoot.displayName = "ActivitySortRoot";

View file

@ -30,7 +30,7 @@ type Props = {
issueId: string;
};
export const IssueDetailQuickActions: FC<Props> = observer((props) => {
export const IssueDetailQuickActions = observer(function IssueDetailQuickActions(props: Props) {
const { workspaceSlug, projectId, issueId } = props;
const { t } = useTranslation();

View file

@ -29,7 +29,7 @@ const defaultValues: Partial<IIssueLabel> = {
color: "#ff0000",
};
export const LabelCreate: FC<ILabelCreate> = (props) => {
export function LabelCreate(props: ILabelCreate) {
const { workspaceSlug, projectId, issueId, values, labelOperations, disabled = false } = props;
// state
const [isCreateToggle, setIsCreateToggle] = useState(false);
@ -164,4 +164,4 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
)}
</>
);
};
}

View file

@ -15,7 +15,7 @@ type TLabelListItem = {
disabled: boolean;
};
export const LabelListItem: FC<TLabelListItem> = observer((props) => {
export const LabelListItem = observer(function LabelListItem(props: TLabelListItem) {
const { workspaceSlug, projectId, issueId, labelId, values, labelOperations, disabled } = props;
// hooks
const { getLabelById } = useLabel();

View file

@ -14,7 +14,7 @@ type TLabelList = {
disabled: boolean;
};
export const LabelList: FC<TLabelList> = observer((props) => {
export const LabelList = observer(function LabelList(props: TLabelList) {
const { workspaceSlug, projectId, issueId, values, labelOperations, disabled } = props;
const issueLabels = values || undefined;

View file

@ -33,7 +33,7 @@ export type TLabelOperations = {
createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
};
export const IssueLabel: FC<TIssueLabel> = observer((props) => {
export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
const {
workspaceSlug,
projectId,

View file

@ -25,7 +25,7 @@ export interface IIssueLabelSelect {
onAddLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
}
export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) => {
export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssueLabelSelect) {
const { workspaceSlug, projectId, issueId, values, onSelect, onAddLabel } = props;
const { t } = useTranslation();
// store hooks

View file

@ -12,7 +12,7 @@ type TIssueLabelSelectRoot = {
labelOperations: TLabelOperations;
};
export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
export function IssueLabelSelectRoot(props: TIssueLabelSelectRoot) {
const { workspaceSlug, projectId, issueId, values, labelOperations } = props;
const handleLabel = async (_labelIds: string[]) => {
@ -29,4 +29,4 @@ export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
onAddLabel={labelOperations.createLabel}
/>
);
};
}

View file

@ -33,7 +33,9 @@ const defaultValues: TIssueLinkCreateFormFieldOptions = {
url: "",
};
export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observer((props) => {
export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdateModal(
props: TIssueLinkCreateEditModal
) {
const { isModalOpen, handleOnClose, linkOperations, issueServiceType } = props;
// i18n
const { t } = useTranslation();

View file

@ -22,7 +22,7 @@ export type TIssueLinkDetail = {
isNotAllowed: boolean;
};
export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
export function IssueLinkDetail(props: TIssueLinkDetail) {
// props
const { linkId, linkOperations, isNotAllowed } = props;
// hooks
@ -123,4 +123,4 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
</div>
</div>
);
};
}

View file

@ -24,7 +24,7 @@ type TIssueLinkItem = {
issueServiceType?: TIssueServiceType;
};
export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkItem) {
// props
const { linkId, linkOperations, isNotAllowed, issueServiceType = EIssueServiceType.ISSUES } = props;
// hooks

View file

@ -17,7 +17,7 @@ type TLinkList = {
issueServiceType: TIssueServiceType;
};
export const LinkList: FC<TLinkList> = observer((props) => {
export const LinkList = observer(function LinkList(props: TLinkList) {
// props
const { issueId, linkOperations, disabled = false, issueServiceType } = props;
// hooks

View file

@ -14,7 +14,7 @@ export type TIssueLinkList = {
disabled?: boolean;
};
export const IssueLinkList: FC<TIssueLinkList> = observer((props) => {
export const IssueLinkList = observer(function IssueLinkList(props: TIssueLinkList) {
// props
const { issueId, linkOperations, disabled = false } = props;
// hooks

View file

@ -26,7 +26,7 @@ export type TIssueLinkRoot = {
disabled?: boolean;
};
export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
export function IssueLinkRoot(props: TIssueLinkRoot) {
// props
const { workspaceSlug, projectId, issueId, disabled = false } = props;
// hooks
@ -139,4 +139,4 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
</div>
</>
);
};
}

View file

@ -44,7 +44,7 @@ type Props = {
isArchived: boolean;
};
export const IssueMainContent: React.FC<Props> = observer((props) => {
export const IssueMainContent = observer(function IssueMainContent(props: Props) {
const { workspaceSlug, projectId, issueId, issueOperations, isEditable, isArchived } = props;
// refs
const editorRef = useRef<EditorRefApi>(null);

View file

@ -21,7 +21,7 @@ type TIssueModuleSelect = {
disabled?: boolean;
};
export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIssueModuleSelect) {
const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
const { t } = useTranslation();
// states

View file

@ -34,7 +34,7 @@ type TIssueParentSelect = {
workItemLink: string;
};
export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
export const IssueParentSelect = observer(function IssueParentSelect(props: TIssueParentSelect) {
const {
className = "",
disabled = false,

View file

@ -31,7 +31,7 @@ export type TIssueParentDetail = {
issueOperations: TIssueOperations;
};
export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
export const IssueParentDetail = observer(function IssueParentDetail(props: TIssueParentDetail) {
const { workspaceSlug, projectId, issueId, issue, issueOperations } = props;
// router
const router = useRouter();

View file

@ -17,7 +17,7 @@ type TIssueParentSiblingItem = {
issueId: string;
};
export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((props) => {
export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(props: TIssueParentSiblingItem) {
const { workspaceSlug, issueId } = props;
// hooks
const { getProjectById } = useProject();

View file

@ -14,7 +14,7 @@ export type TIssueParentSiblings = {
parentIssue: TIssue;
};
export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((props) => {
export const IssueParentSiblings = observer(function IssueParentSiblings(props: TIssueParentSiblings) {
const { workspaceSlug, currentIssue, parentIssue } = props;
// hooks
const {

View file

@ -24,7 +24,7 @@ export type TIssueCommentReaction = {
disabled?: boolean;
};
export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props) => {
export const IssueCommentReaction = observer(function IssueCommentReaction(props: TIssueCommentReaction) {
const { workspaceSlug, projectId, commentId, currentUser, disabled = false } = props;
// state
const [isPickerOpen, setIsPickerOpen] = useState(false);

View file

@ -25,7 +25,7 @@ export type TIssueReaction = {
className?: string;
};
export const IssueReaction: FC<TIssueReaction> = observer((props) => {
export const IssueReaction = observer(function IssueReaction(props: TIssueReaction) {
const { workspaceSlug, projectId, issueId, currentUser, disabled = false, className = "" } = props;
// state
const [isPickerOpen, setIsPickerOpen] = useState(false);

View file

@ -31,7 +31,7 @@ type TIssueRelationSelect = {
disabled?: boolean;
};
export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((props) => {
export const IssueRelationSelect = observer(function IssueRelationSelect(props: TIssueRelationSelect) {
const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
// hooks
const { getProjectById } = useProject();

View file

@ -56,7 +56,7 @@ export type TIssueDetailRoot = {
is_archived?: boolean;
};
export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDetailRoot) {
const { t } = useTranslation();
const { workspaceSlug, projectId, issueId, is_archived = false } = props;
// router

View file

@ -52,7 +52,7 @@ type Props = {
isEditable: boolean;
};
export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props: Props) {
const { t } = useTranslation();
const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
// store hooks

View file

@ -24,7 +24,7 @@ export type TIssueSubscription = {
serviceType?: EIssueServiceType;
};
export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
export const IssueSubscription = observer(function IssueSubscription(props: TIssueSubscription) {
const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES } = props;
const { t } = useTranslation();
// hooks

View file

@ -38,7 +38,7 @@ interface IBaseCalendarRoot {
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
}
export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
export const BaseCalendarRoot = observer(function BaseCalendarRoot(props: IBaseCalendarRoot) {
const {
QuickActions,
addIssuesToView,

View file

@ -74,7 +74,7 @@ type Props = {
isEpic?: boolean;
};
export const CalendarChart: React.FC<Props> = observer((props) => {
export const CalendarChart = observer(function CalendarChart(props: Props) {
const {
issuesFilterStore,
issues,

Some files were not shown because too many files have changed in this diff Show more