jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): remove browser card for mobile

Browse source
This commit is contained in:
Shekar Siri 2024-07-24 14:54:12 +02:00
parent 5d8ca07c2a
commit 1d150cdfa2
3 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -1,3 +1,4 @@
import ExampleFunnel from './Examples/Funnel';
import ExamplePath from './Examples/Path';
import ExampleTrend from './Examples/Trend';

6
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx
View file

@ -10,13 +10,15 @@ interface NewDashboardModalProps {
open: boolean;
isAddingFromLibrary?: boolean;
isEnterprise?: boolean;
isMobile?: boolean;
}
const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
onClose,
open,
isAddingFromLibrary = false,
isEnterprise = false
isEnterprise = false,
isMobile = false
}) => {
const [step, setStep] = React.useState<number>(0);
const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
@ -53,6 +55,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
setSelectedCategory={setSelectedCategory}
onCard={() => setStep(step + 1)}
isLibrary={isAddingFromLibrary}
isMobile={isMobile}
isEnterprise={isEnterprise} />}
{step === 1 && <CreateCard onBack={() => setStep(0)} />}
</div>
@ -63,6 +66,7 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
};
const mapStateToProps = (state: any) => ({
isMobile: state.getIn(['site', 'instance', 'platform']) === 'ios',
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' ||
state.getIn(['user', 'account', 'edition']) === 'msaas'
});

39
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
View file

@ -1,6 +1,6 @@
import React, { useMemo, useState, useEffect } from 'react';
import { Button, Input, Segmented, Space } from 'antd';
import { RightOutlined } from '@ant-design/icons'
import { RightOutlined } from '@ant-design/icons';
import { ArrowRight, Info } from 'lucide-react';
import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
import { useStore } from 'App/mstore';
@ -8,6 +8,7 @@ import Option from './Option';
import CardsLibrary from 'Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary';
import { FUNNEL } from 'App/constants/card';
import { useHistory } from 'react-router';
import { FilterKey } from 'Types/filter/filterType';
interface SelectCardProps {
onClose: (refresh?: boolean) => void;
@ -16,10 +17,11 @@ interface SelectCardProps {
selected?: string;
setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
isEnterprise?: boolean;
isMobile?: boolean;
}
const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise } = props;
const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise, isMobile } = props;
const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
const { metricStore, dashboardStore } = useStore();
const siteId: string = location.pathname.split('/')[1];
@ -74,20 +76,23 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
};
const cardItems = useMemo(() => {
return CARD_LIST.filter((card) => card.category === selected && (!card.isEnterprise || (card.isEnterprise && isEnterprise)))
.map((card) => (
<div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
<card.example
onCard={handleCardSelection}
type={card.key}
title={card.title}
data={card.data}
height={card.height}
hideLegend={card.data?.hideLegend}
/>
</div>
));
}, [selected]);
return CARD_LIST.filter((card) =>
card.category === selected &&
(!card.isEnterprise || (card.isEnterprise && isEnterprise)) &&
(!isMobile || (isMobile && ![FilterKey.USER_BROWSER].includes(card.key)))
).map((card) => (
<div key={card.key} className={card.width ? `col-span-${card.width}` : 'col-span-2'}>
<card.example
onCard={handleCardSelection}
type={card.key}
title={card.title}
data={card.data}
height={card.height}
hideLegend={card.data?.hideLegend}
/>
</div>
));
}, [selected, isEnterprise, isMobile]);
const onCardClick = (cardId: number) => {
if (selectedCards.includes(cardId)) {
@ -119,7 +124,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
)}
</div>
{isCreatingDashboard && (
<Button type="link" onClick={createNewDashboard} loading={dashboardCreating} className='gap-2'>
<Button type="link" onClick={createNewDashboard} loading={dashboardCreating} className="gap-2">
<Space>
Create Blank
<RightOutlined />