change(ui): check for enterprise cards

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -44,7 +44,7 @@ function DashboardList({ siteId }: { siteId: string }) {
             title: 'Owner',
             dataIndex: 'owner',
             width: '16.67%',
-            sorter: (a, b) => a.owner.localeCompare(b.owner),
+            sorter: (a, b) => a.owner?.localeCompare(b.owner),
             sortDirections: ['ascend', 'descend'],
         },
         {

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/NewDashboardModal.tsx

@@ -3,17 +3,20 @@ import { Modal } from 'antd';
 import SelectCard from './SelectCard';
 import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard';
 import colors from 'tailwindcss/colors';
+import { connect } from 'react-redux';
 
 interface NewDashboardModalProps {
   onClose: () => void;
   open: boolean;
   isAddingFromLibrary?: boolean;
+  isEnterprise?: boolean;
 }
 
 const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                                                                onClose,
                                                                open,
-                                                               isAddingFromLibrary = false
+                                                               isAddingFromLibrary = false,
+                                                               isEnterprise = false
                                                              }) => {
   const [step, setStep] = React.useState<number>(0);
   const [selectedCategory, setSelectedCategory] = React.useState<string>('product-analytics');
@@ -49,7 +52,8 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
                                      selected={selectedCategory}
                                      setSelectedCategory={setSelectedCategory}
                                      onCard={() => setStep(step + 1)}
-                                     isLibrary={isAddingFromLibrary} />}
+                                     isLibrary={isAddingFromLibrary}
+                                     isEnterprise={isEnterprise} />}
           {step === 1 && <CreateCard onBack={() => setStep(0)} />}
         </div>
       </Modal>
@@ -58,4 +62,9 @@ const NewDashboardModal: React.FC<NewDashboardModalProps> = ({
     ;
 };
 
-export default NewDashboardModal;
+const mapStateToProps = (state: any) => ({
+  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' ||
+    state.getIn(['user', 'account', 'edition']) === 'msaas'
+});
+
+export default connect(mapStateToProps)(NewDashboardModal);

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx

@@ -1,137 +1,139 @@
-import React, {useMemo} from 'react';
-import {Button, Input, Segmented, Space} from 'antd';
-import {CARD_LIST, CARD_CATEGORIES, CardType} from './ExampleCards';
-import {useStore} from 'App/mstore';
+import React, { useMemo } from 'react';
+import { Button, Input, Segmented, Space } from 'antd';
+import { CARD_LIST, CARD_CATEGORIES, CardType } from './ExampleCards';
+import { useStore } from 'App/mstore';
 import Option from './Option';
-import CardsLibrary from "Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary";
-import {FUNNEL} from "App/constants/card";
+import CardsLibrary from 'Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary';
+import { FUNNEL } from 'App/constants/card';
 
 interface SelectCardProps {
-    onClose: (refresh?: boolean) => void;
-    onCard: () => void;
-    isLibrary?: boolean;
-    selected?: string;
-    setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
+  onClose: (refresh?: boolean) => void;
+  onCard: () => void;
+  isLibrary?: boolean;
+  selected?: string;
+  setSelectedCategory?: React.Dispatch<React.SetStateAction<string>>;
+  isEnterprise?: boolean;
 }
 
 const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
-    const {onCard, isLibrary = false, selected, setSelectedCategory} = props;
-    const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
-    const {metricStore, dashboardStore} = useStore();
-    const dashboardId = window.location.pathname.split('/')[3];
-    const [libraryQuery, setLibraryQuery] = React.useState<string>('');
+  const { onCard, isLibrary = false, selected, setSelectedCategory, isEnterprise } = props;
+  const [selectedCards, setSelectedCards] = React.useState<number[]>([]);
+  const { metricStore, dashboardStore } = useStore();
+  const dashboardId = window.location.pathname.split('/')[3];
+  const [libraryQuery, setLibraryQuery] = React.useState<string>('');
 
-    const handleCardSelection = (card: string) => {
-        metricStore.init();
-        const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType;
+  const handleCardSelection = (card: string) => {
+    metricStore.init();
+    const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType;
 
-        const cardData: any = {
-            metricType: selectedCard.cardType,
-            name: selectedCard.title,
-            metricOf: selectedCard.metricOf,
-        };
-
-        if (selectedCard.cardType === FUNNEL) {
-            cardData.series = []
-            cardData.series.filter = []
-        }
-
-        metricStore.merge(cardData);
-        metricStore.instance.resetDefaults();
-        onCard();
+    const cardData: any = {
+      metricType: selectedCard.cardType,
+      name: selectedCard.title,
+      metricOf: selectedCard.metricOf
     };
 
-    const cardItems = useMemo(() => {
-        return CARD_LIST.filter((card) => card.category === selected).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}/>
-            </div>
-        ));
-    }, [selected]);
-
-    const onCardClick = (cardId: number) => {
-        if (selectedCards.includes(cardId)) {
-            setSelectedCards(selectedCards.filter((id) => id !== cardId));
-        } else {
-            setSelectedCards([...selectedCards, cardId]);
-        }
+    if (selectedCard.cardType === FUNNEL) {
+      cardData.series = [];
+      cardData.series.filter = [];
     }
 
-    const onAddSelected = () => {
-        const dashboard = dashboardStore.getDashboard(dashboardId);
-        dashboardStore.addWidgetToDashboard(dashboard!, selectedCards).finally(() => {
-            dashboardStore.fetch(dashboardId);
-            props.onClose(true);
-        });
+    metricStore.merge(cardData);
+    metricStore.instance.resetDefaults();
+    onCard();
+  };
+
+  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} />
+        </div>
+      ));
+  }, [selected]);
+
+  const onCardClick = (cardId: number) => {
+    if (selectedCards.includes(cardId)) {
+      setSelectedCards(selectedCards.filter((id) => id !== cardId));
+    } else {
+      setSelectedCards([...selectedCards, cardId]);
     }
+  };
 
-    return (
-        <>
-            <Space className="items-center justify-between">
-                <div className="text-xl leading-4 font-medium">
-                    {dashboardId ? (isLibrary ? "Your Library" : "Create Card") : "Select a template to create a card"}
-                </div>
-                {isLibrary && (
-                    <Space>
-                        {selectedCards.length > 0 ? (
-                            <Button type="primary" onClick={onAddSelected}>
-                                Add {selectedCards.length} Selected
-                            </Button>
-                        ) : ''}
+  const onAddSelected = () => {
+    const dashboard = dashboardStore.getDashboard(dashboardId);
+    dashboardStore.addWidgetToDashboard(dashboard!, selectedCards).finally(() => {
+      dashboardStore.fetch(dashboardId);
+      props.onClose(true);
+    });
+  };
 
-                        <Input.Search
-                            placeholder="Find by card title"
-                            onChange={(value) => setLibraryQuery(value.target.value)}
-                            style={{width: 200}}
-                        />
-                    </Space>
-                )}
-            </Space>
+  return (
+    <>
+      <Space className="items-center justify-between">
+        <div className="text-xl leading-4 font-medium">
+          {dashboardId ? (isLibrary ? 'Your Library' : 'Create Card') : 'Select a template to create a card'}
+        </div>
+        {isLibrary && (
+          <Space>
+            {selectedCards.length > 0 ? (
+              <Button type="primary" onClick={onAddSelected}>
+                Add {selectedCards.length} Selected
+              </Button>
+            ) : ''}
 
-            {!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected}/>}
+            <Input.Search
+              placeholder="Find by card title"
+              onChange={(value) => setLibraryQuery(value.target.value)}
+              style={{ width: 200 }}
+            />
+          </Space>
+        )}
+      </Space>
 
-            {isLibrary ?
-                <CardsLibrary query={libraryQuery}
-                              selectedList={selectedCards}
-                              category={selected}
-                              onCard={onCardClick}/> :
-                <ExampleCardsGrid items={cardItems}/>}
-        </>
-    );
+      {!isLibrary && <CategorySelector setSelected={setSelectedCategory} selected={selected} />}
+
+      {isLibrary ?
+        <CardsLibrary query={libraryQuery}
+                      selectedList={selectedCards}
+                      category={selected}
+                      onCard={onCardClick} /> :
+        <ExampleCardsGrid items={cardItems} />}
+    </>
+  );
 };
 
 interface CategorySelectorProps {
-    setSelected?: React.Dispatch<React.SetStateAction<string>>;
-    selected?: string;
+  setSelected?: React.Dispatch<React.SetStateAction<string>>;
+  selected?: string;
 }
 
-const CategorySelector: React.FC<CategorySelectorProps> = ({setSelected, selected}) => (
-    <Segmented
-        options={CARD_CATEGORIES.map(({key, label, icon}) => ({
-            label: <Option key={key} label={label} Icon={icon}/>,
-            value: key,
-        }))}
-        value={selected}
-        onChange={setSelected}
-        className='w-fit'
-    />
+const CategorySelector: React.FC<CategorySelectorProps> = ({ setSelected, selected }) => (
+  <Segmented
+    options={CARD_CATEGORIES.map(({ key, label, icon }) => ({
+      label: <Option key={key} label={label} Icon={icon} />,
+      value: key
+    }))}
+    value={selected}
+    onChange={setSelected}
+    className="w-fit"
+  />
 );
 
 interface ExampleCardsGridProps {
-    items: JSX.Element[];
+  items: JSX.Element[];
 }
 
-const ExampleCardsGrid: React.FC<ExampleCardsGridProps> = ({items}) => (
-    <div
-        className="w-full grid grid-cols-4 gap-4 overflow-scroll"
-        style={{maxHeight: 'calc(100vh - 100px)'}}
-    >
-        {items}
-    </div>
+const ExampleCardsGrid: React.FC<ExampleCardsGridProps> = ({ items }) => (
+  <div
+    className="w-full grid grid-cols-4 gap-4 overflow-scroll"
+    style={{ maxHeight: 'calc(100vh - 100px)' }}
+  >
+    {items}
+  </div>
 );
 
 export default SelectCard;