feat: import to docker form board, docker button on boards (#1714)

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -3,6 +3,7 @@ import { closeModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconBox, IconBoxAlignTop, IconStack } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
+import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -18,17 +19,17 @@ import { useStyles } from '../Shared/styles';
 interface AvailableElementTypesProps {
   modalId: string;
   onOpenIntegrations: () => void;
-  onOpenStaticElements: () => void;
 }
 
 export const AvailableElementTypes = ({
   modalId,
   onOpenIntegrations: onOpenWidgets,
-  onOpenStaticElements,
 }: AvailableElementTypesProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
   const { config, name: configName } = useConfigContext();
   const { updateConfig } = useConfigStore();
+  const { data } = useSession();
+
   const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
   const onClickCreateCategory = async () => {

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,34 +0,0 @@
-import { Container, Grid, Text } from '@mantine/core';
-import { IconCursorText } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-
-import { GenericAvailableElementType } from '../Shared/GenericElementType';
-import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
-
-interface AvailableStaticTypesProps {
-  onClickBack: () => void;
-}
-
-export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps) => {
-  const { t } = useTranslation('layout/element-selector/selector');
-  return (
-    <>
-      <SelectorBackArrow onClickBack={onClickBack} />
-
-      <Text mb="md" color="dimmed">
-        Static elements provide you additional control over your dashboard. They are static, because
-        they don&apos;t integrate with any apps and their content never changes.
-      </Text>
-
-      <Grid grow>
-        {/*
-        <GenericAvailableElementType
-          name="Static Text"
-          description="Display a fixed string on your dashboard"
-          image={IconCursorText}
-          handleAddition={async () => {}}
-        /> */}
-      </Grid>
-    </>
-  );
-};

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -1,4 +1,4 @@
-import { Grid, Text } from '@mantine/core';
+import { Grid, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
 import widgets from '../../../../../../widgets';
@@ -14,7 +14,7 @@ export const AvailableIntegrationElements = ({
 }: AvailableIntegrationElementsProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
   return (
-    <>
+    <Stack m="sm">
       <SelectorBackArrow onClickBack={onClickBack} />
 
       <Text mb="md" color="dimmed">
@@ -26,6 +26,6 @@ export const AvailableIntegrationElements = ({
           <WidgetElementType key={k} id={k} image={v.icon} widget={v} />
         ))}
       </Grid>
-    </>
+    </Stack>
   );
 };

src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx

@@ -2,11 +2,10 @@ import { ContextModalProps } from '@mantine/modals';
 import { useState } from 'react';
 
 import { AvailableElementTypes } from './Components/Overview/AvailableElementsOverview';
-import { AvailableStaticTypes } from './Components/StaticElementsTab/AvailableStaticElementsTab';
 import { AvailableIntegrationElements } from './Components/WidgetsTab/AvailableWidgetsTab';
 
 export const SelectElementModal = ({ context, id }: ContextModalProps) => {
-  const [activeTab, setActiveTab] = useState<undefined | 'integrations' | 'static_elements'>();
+  const [activeTab, setActiveTab] = useState<undefined | 'integrations' | 'dockerImport'>();
 
   switch (activeTab) {
     case undefined:
@@ -14,13 +13,10 @@ export const SelectElementModal = ({ context, id }: ContextModalProps) => {
         <AvailableElementTypes
           modalId={id}
           onOpenIntegrations={() => setActiveTab('integrations')}
-          onOpenStaticElements={() => setActiveTab('static_elements')}
         />
       );
     case 'integrations':
       return <AvailableIntegrationElements onClickBack={() => setActiveTab(undefined)} />;
-    case 'static_elements':
-      return <AvailableStaticTypes onClickBack={() => setActiveTab(undefined)} />;
     default:
       /* default to the main selection tab */
       setActiveTab(undefined);