Remove the code of old show pages (#17811)
Closes https://github.com/twentyhq/core-team-issues/issues/2213
This commit is contained in:
Baptiste Devessier
committed by
GitHub
GitHub
parent
2d42b0a726
commit
b250de216e
@@ -11,9 +11,6 @@ export type LayoutRenderingContextType = {
|
||||
layoutType: PageLayoutType;
|
||||
|
||||
isInRightDrawer: boolean;
|
||||
|
||||
/** TODO: Remove once the traditional record show page is removed. */
|
||||
isLegacyRecordShowPage?: boolean;
|
||||
};
|
||||
|
||||
export const [LayoutRenderingProvider, useLayoutRenderingContext] =
|
||||
|
||||
-62
@@ -1,62 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { type ReactNode } from 'react';
|
||||
|
||||
import { PAGE_LAYOUT_LEFT_PANEL_CONTAINER_WIDTH } from '@/page-layout/constants/PageLayoutLeftPanelContainerWidth';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
||||
|
||||
const StyledOuterContainer = styled.div<{ isMobile: boolean }>`
|
||||
background: ${({ theme }) => theme.background.secondary};
|
||||
border-bottom-left-radius: 8px;
|
||||
border-right: ${({ theme, isMobile }) =>
|
||||
isMobile ? 'none' : `1px solid ${theme.border.color.medium}`};
|
||||
border-top-left-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(3)};
|
||||
z-index: 10;
|
||||
width: 'auto';
|
||||
`;
|
||||
|
||||
const StyledInnerContainer = styled.div<{ isMobile: boolean }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: ${({ isMobile }) =>
|
||||
isMobile ? `100%` : `${PAGE_LAYOUT_LEFT_PANEL_CONTAINER_WIDTH}px`};
|
||||
`;
|
||||
|
||||
const StyledIntermediateContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: ${({ theme }) => theme.spacing(3)};
|
||||
`;
|
||||
|
||||
export type ShowPageLeftContainerProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const ShowPageLeftContainer = ({
|
||||
children,
|
||||
}: ShowPageLeftContainerProps) => {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<StyledOuterContainer isMobile={isMobile}>
|
||||
{isMobile ? (
|
||||
<StyledInnerContainer isMobile={isMobile}>
|
||||
{children}
|
||||
</StyledInnerContainer>
|
||||
) : (
|
||||
<ScrollWrapper
|
||||
componentInstanceId={`scroll-wrapper-show-page-left-container`}
|
||||
>
|
||||
<StyledIntermediateContainer>
|
||||
<StyledInnerContainer isMobile={isMobile}>
|
||||
{children}
|
||||
</StyledInnerContainer>
|
||||
</StyledIntermediateContainer>
|
||||
</ScrollWrapper>
|
||||
)}
|
||||
</StyledOuterContainer>
|
||||
);
|
||||
};
|
||||
-158
@@ -1,158 +0,0 @@
|
||||
import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
|
||||
import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton';
|
||||
import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
|
||||
import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
|
||||
import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
|
||||
import { type RecordLayout } from '@/object-record/record-show/types/RecordLayout';
|
||||
import { getCardComponent } from '@/object-record/record-show/utils/getCardComponent';
|
||||
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
|
||||
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
|
||||
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
|
||||
import { TabList } from '@/ui/layout/tab-list/components/TabList';
|
||||
|
||||
import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier';
|
||||
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
|
||||
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
|
||||
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { css } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import React from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
const StyledShowPageRightContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>`
|
||||
${({ shouldDisplay }) =>
|
||||
!shouldDisplay &&
|
||||
css`
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledTabList = styled(TabList)`
|
||||
padding-left: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>`
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: ${({ theme }) => theme.background.primary};
|
||||
padding-bottom: ${({ theme, isInRightDrawer }) =>
|
||||
isInRightDrawer ? theme.spacing(16) : 0};
|
||||
`;
|
||||
|
||||
type ShowPageSubContainerProps = {
|
||||
layout?: RecordLayout;
|
||||
tabs: SingleTabProps[];
|
||||
targetRecordIdentifier: TargetRecordIdentifier;
|
||||
isInRightDrawer?: boolean;
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
export const ShowPageSubContainer = ({
|
||||
tabs,
|
||||
layout,
|
||||
targetRecordIdentifier,
|
||||
loading,
|
||||
isInRightDrawer = false,
|
||||
}: ShowPageSubContainerProps) => {
|
||||
const commandMenuPageComponentInstance = useComponentInstanceStateContext(
|
||||
CommandMenuPageComponentInstanceContext,
|
||||
);
|
||||
|
||||
const tabListComponentId = getShowPageTabListComponentId({
|
||||
pageId: commandMenuPageComponentInstance?.instanceId,
|
||||
targetObjectId: targetRecordIdentifier.id,
|
||||
});
|
||||
const activeTabId = useRecoilComponentValue(
|
||||
activeTabIdComponentState,
|
||||
tabListComponentId,
|
||||
);
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const summaryCard = (
|
||||
<SummaryCard
|
||||
objectNameSingular={targetRecordIdentifier.targetObjectNameSingular}
|
||||
objectRecordId={targetRecordIdentifier.id}
|
||||
isInRightDrawer={isInRightDrawer}
|
||||
/>
|
||||
);
|
||||
|
||||
const fieldsCard = <FieldsCard />;
|
||||
|
||||
const renderActiveTabContent = () => {
|
||||
const activeTab = tabs.find((tab) => tab.id === activeTabId);
|
||||
if (!activeTab?.cards?.length) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeTab.cards.map((card, index) => (
|
||||
<React.Fragment key={`${activeTab.id}-card-${index}`}>
|
||||
{getCardComponent(card.type, card.configuration)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const visibleTabs = tabs.filter((tab) => !tab.hide);
|
||||
|
||||
const isInCommandMenu = isDefined(commandMenuPageComponentInstance);
|
||||
|
||||
const displaySummaryAndFields =
|
||||
layout && !layout.hideSummaryAndFields && !isMobile && !isInRightDrawer;
|
||||
|
||||
return (
|
||||
<TabListComponentInstanceContext.Provider
|
||||
value={{ instanceId: tabListComponentId }}
|
||||
>
|
||||
{displaySummaryAndFields && (
|
||||
<ShowPageLeftContainer>
|
||||
{summaryCard}
|
||||
{fieldsCard}
|
||||
</ShowPageLeftContainer>
|
||||
)}
|
||||
<StyledShowPageRightContainer>
|
||||
<StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
|
||||
<StyledTabList
|
||||
behaveAsLinks={!isInRightDrawer}
|
||||
loading={loading}
|
||||
tabs={tabs}
|
||||
isInRightDrawer={isInRightDrawer}
|
||||
componentInstanceId={tabListComponentId}
|
||||
/>
|
||||
</StyledTabListContainer>
|
||||
{(isMobile || isInRightDrawer) && !isInCommandMenu && summaryCard}
|
||||
<StyledContentContainer isInRightDrawer={isInRightDrawer}>
|
||||
{renderActiveTabContent()}
|
||||
</StyledContentContainer>
|
||||
{isInRightDrawer && (
|
||||
<RightDrawerFooter
|
||||
actions={[
|
||||
<RecordShowRightDrawerActionMenu />,
|
||||
<RecordShowRightDrawerOpenRecordButton
|
||||
objectNameSingular={
|
||||
targetRecordIdentifier.targetObjectNameSingular
|
||||
}
|
||||
recordId={targetRecordIdentifier.id}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</StyledShowPageRightContainer>
|
||||
</TabListComponentInstanceContext.Provider>
|
||||
);
|
||||
};
|
||||
-1
@@ -1 +0,0 @@
|
||||
export const SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID = 'show-page-add-button-dropdown';
|
||||
@@ -1,10 +0,0 @@
|
||||
import { type LayoutCard } from '@/ui/layout/tab-list/types/LayoutCard';
|
||||
import { type TabVisibilityConfig } from '@/ui/layout/tab-list/types/TabVisibilityConfig';
|
||||
|
||||
export type RecordLayoutTab = {
|
||||
title: string;
|
||||
position: number;
|
||||
icon: string;
|
||||
hide: TabVisibilityConfig;
|
||||
cards: LayoutCard[];
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import { type CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { type FeatureFlagKey } from '~/generated/graphql';
|
||||
|
||||
export type TabVisibilityConfig = {
|
||||
ifMobile: boolean;
|
||||
ifDesktop: boolean;
|
||||
ifInRightDrawer: boolean;
|
||||
ifFeaturesDisabled: FeatureFlagKey[];
|
||||
ifRequiredObjectsInactive: CoreObjectNameSingular[];
|
||||
ifRelationsMissing: string[];
|
||||
ifNoReadPermission?: boolean;
|
||||
ifNoReadPermissionObject?: CoreObjectNameSingular;
|
||||
};
|
||||
Reference in New Issue
Block a user