diff --git a/src/assets/TemplateIcon.svg b/src/assets/TemplateIcon.svg new file mode 100644 index 0000000000..cbd4ef0e90 --- /dev/null +++ b/src/assets/TemplateIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/organisms/TemplateManagerPane/TemplateInformation.styled.tsx b/src/components/organisms/TemplateManagerPane/TemplateInformation.styled.tsx index 40ad919d80..746280552e 100644 --- a/src/components/organisms/TemplateManagerPane/TemplateInformation.styled.tsx +++ b/src/components/organisms/TemplateManagerPane/TemplateInformation.styled.tsx @@ -1,21 +1,34 @@ import {Button} from 'antd'; -import {DeleteOutlined as RawDeleteOutlined, FormOutlined as RawFormOutlined} from '@ant-design/icons'; +import {FormOutlined as RawFormOutlined} from '@ant-design/icons'; import styled from 'styled-components'; import Colors from '@styles/Colors'; +export const AdditionalInformation = styled.div` + color: ${Colors.grey6}; + line-height: 20px; + font-size: 12px; + margin: 10px 0px; + display: flex; + flex-direction: column; +`; + export const Container = styled.div` display: grid; - grid-template-columns: max-content 1fr 40px; + grid-template-columns: max-content 1fr; + grid-column-gap: 18px; position: relative; - margin-bottom: 16px; `; -export const IconContainer = styled.div` - height: 50px; - width: 50px; +export const Description = styled.span` + color: ${Colors.grey7}; +`; + +export const Image = styled.img` + width: 32px; + height: 32px; `; export const InfoContainer = styled.div` @@ -26,47 +39,17 @@ export const InfoContainer = styled.div` export const Name = styled.span<{$width: number}>` ${props => `width: ${props.$width}`} - font-weight: 300; + color:${Colors.whitePure}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -`; - -export const Description = styled.span<{$width: number}>` - ${props => `width: ${props.$width}`} - font-weight: 300; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; - -export const Footer = styled.span` - display: flex; - justify-content: space-between; -`; - -export const Author = styled.span` - color: ${Colors.grey500}; -`; - -export const Version = styled.span` - font-style: italic; -`; - -export const DeleteOutlined = styled(RawDeleteOutlined)` - position: absolute; - top: 5px; - right: 0px; - color: ${Colors.red7}; - cursor: pointer; + margin-bottom: 10px; `; export const FormOutlined = styled(RawFormOutlined)` font-size: 30px; - padding-top: 4px; `; export const OpenButton = styled(Button)` - margin-top: 8px; - width: 100px; + width: max-content; `; diff --git a/src/components/organisms/TemplateManagerPane/TemplateInformation.tsx b/src/components/organisms/TemplateManagerPane/TemplateInformation.tsx index ae7328b6b5..793c04dbd1 100644 --- a/src/components/organisms/TemplateManagerPane/TemplateInformation.tsx +++ b/src/components/organisms/TemplateManagerPane/TemplateInformation.tsx @@ -1,104 +1,51 @@ import React from 'react'; import {useMeasure} from 'react-use'; -import {Popconfirm} from 'antd'; +import {DeliveredProcedureOutlined} from '@ant-design/icons'; -import {ExclamationOutlined} from '@ant-design/icons'; +import _ from 'lodash'; import {AnyTemplate} from '@models/template'; -import {useAppDispatch, useAppSelector} from '@redux/hooks'; -import { - deletePlugin, - deleteStandalonTemplate, - deleteTemplatePack, - isPluginTemplate, - isStandaloneTemplate, - isTemplatePackTemplate, -} from '@redux/services/templates'; +import TemplateIcon from '@assets/TemplateIcon.svg'; import * as S from './TemplateInformation.styled'; interface IProps { template: AnyTemplate; - templatePath: string; onClickOpenTemplate: () => void; } -const getTemplatePackPluginPath = (templatePath: string) => { - const splittedTemplatePath = templatePath.split('\\'); - splittedTemplatePath.pop(); - - return splittedTemplatePath.join('\\'); -}; - const TemplateInformation: React.FC = props => { - const {template, templatePath, onClickOpenTemplate} = props; + const {template, onClickOpenTemplate} = props; const [infoContainerRef, {width: infoContainerWidth}] = useMeasure(); - const dispatch = useAppDispatch(); - const pluginMap = useAppSelector(state => state.extension.pluginMap); - const pluginsDir = useAppSelector(state => state.extension.pluginsDir); - const templatesDir = useAppSelector(state => state.extension.templatesDir); - const templatePacksDir = useAppSelector(state => state.extension.templatePacksDir); - const templatePackMap = useAppSelector(state => state.extension.templatePackMap); - - const handleDelete = () => { - if (templatesDir && isStandaloneTemplate(templatePath, templatesDir)) { - deleteStandalonTemplate(templatePath, dispatch); - } else if (templatePacksDir && isTemplatePackTemplate(templatePath, templatePacksDir)) { - const templatePackPath = getTemplatePackPluginPath(templatePath); - deleteTemplatePack(templatePackMap[templatePackPath], templatePackPath, dispatch); - } else if (pluginsDir && isPluginTemplate(templatePath, pluginsDir)) { - const pluginPath = getTemplatePackPluginPath(templatePath); - deletePlugin(pluginMap[pluginPath], pluginPath, dispatch); - } - }; - return ( - - - + {template.name} - Type: {template.type} - {template.description} - - {template.author} {template.version} - - - Open + + {_.truncate(template.description, {length: 140})} + + + Type: {template.type} + Author: {template.author} + Version: {template.version} + + + } + ghost + size="small" + type="primary" + onClick={onClickOpenTemplate} + > + Use Template - - ( - <> -

Are you sure you want to delete {template.name}?

- {templatePacksDir && isTemplatePackTemplate(templatePath, templatePacksDir) ? ( -

- - This will delete all the templates corresponding to the pack. -

- ) : pluginsDir && isPluginTemplate(templatePath, pluginsDir) ? ( -

- - This will delete all the templates corresponding to the plugin. -

- ) : null} - - )} - onConfirm={handleDelete} - > - - ); }; diff --git a/src/components/organisms/TemplateManagerPane/TemplateManagerPane.styled.tsx b/src/components/organisms/TemplateManagerPane/TemplateManagerPane.styled.tsx index 18f38ea9a7..27333df5e4 100644 --- a/src/components/organisms/TemplateManagerPane/TemplateManagerPane.styled.tsx +++ b/src/components/organisms/TemplateManagerPane/TemplateManagerPane.styled.tsx @@ -1,5 +1,9 @@ +import {Input} from 'antd'; + import styled from 'styled-components'; +import {GlobalScrollbarStyle} from '@utils/scrollbar'; + import Colors from '@styles/Colors'; export const Container = styled.div` @@ -9,3 +13,20 @@ export const Container = styled.div` export const NotFoundLabel = styled.span` color: ${Colors.grey7}; `; + +export const SearchInput = styled(Input.Search)` + background: ${Colors.grey1}; + margin-bottom: 25px; + + & input::placeholder { + color: ${Colors.grey7}; + } +`; + +export const TemplatesContainer = styled.div<{$height: number}>` + display: grid; + grid-row-gap: 25px; + ${props => `height: ${props.$height}px;`} + overflow-y: auto; + ${GlobalScrollbarStyle}; +`; diff --git a/src/components/organisms/TemplateManagerPane/TemplateManagerPane.tsx b/src/components/organisms/TemplateManagerPane/TemplateManagerPane.tsx index 1b994e35fb..91245173f3 100644 --- a/src/components/organisms/TemplateManagerPane/TemplateManagerPane.tsx +++ b/src/components/organisms/TemplateManagerPane/TemplateManagerPane.tsx @@ -1,18 +1,22 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {Button, Input, Skeleton, Tooltip} from 'antd'; +import {Button, Skeleton, Tooltip} from 'antd'; import {ReloadOutlined} from '@ant-design/icons'; +import {TEMPLATES_HEIGHT_OFFSET} from '@constants/constants'; import {TemplateManagerPaneReloadTooltip} from '@constants/tooltips'; import {AnyTemplate} from '@models/template'; import {useAppDispatch, useAppSelector} from '@redux/hooks'; +import {isInPreviewModeSelector} from '@redux/selectors'; import {checkForExtensionsUpdates} from '@redux/services/extension'; import {TitleBar} from '@components/molecules'; +import {useWindowSize} from '@utils/hooks'; + import TemplateModal from '../TemplateModal'; import TemplateInformation from './TemplateInformation'; import * as S from './TemplateManagerPane.styled'; @@ -37,6 +41,7 @@ const TemplatesPane: React.FC = () => { const isLoadingExistingTemplates = useAppSelector(state => state.extension.isLoadingExistingTemplates); const isLoadingExistingTemplatePacks = useAppSelector(state => state.extension.isLoadingExistingTemplatePacks); + const isInPreviewMode = useAppSelector(isInPreviewModeSelector); const templateMap = useAppSelector(state => state.extension.templateMap); const pluginMap = useAppSelector(state => state.extension.pluginMap); const templatePackMap = useAppSelector(state => state.extension.templatePackMap); @@ -44,6 +49,8 @@ const TemplatesPane: React.FC = () => { const [searchedValue, setSearchedValue] = useState(); const [templatesToShow, setTemplatesToShow] = useState>(); + const windowSize = useWindowSize(); + const isLoading = useMemo(() => { return isLoadingExistingTemplates || isLoadingExistingTemplatePacks; }, [isLoadingExistingTemplates, isLoadingExistingTemplatePacks]); @@ -52,6 +59,11 @@ const TemplatesPane: React.FC = () => { return Object.values(templateMap); }, [templateMap]); + const templatesHeight = useMemo( + () => windowSize.height - TEMPLATES_HEIGHT_OFFSET - (isInPreviewMode ? 25 : 0), + [windowSize.height, isInPreviewMode] + ); + const onTemplateModalClose = useCallback(() => { setSelectedTemplate(undefined); }, []); @@ -102,9 +114,8 @@ const TemplatesPane: React.FC = () => {

No templates available.

) : ( <> - setSearchedValue(e.target.value)} /> @@ -112,14 +123,15 @@ const TemplatesPane: React.FC = () => { {!Object.keys(templatesToShow).length ? ( No templates found. ) : ( - Object.entries(templatesToShow).map(([path, template]) => ( - onClickOpenTemplate(template)} - /> - )) + + {Object.values(templatesToShow).map(template => ( + onClickOpenTemplate(template)} + /> + ))} + )} )} diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 17af48067d..da66deff89 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -15,3 +15,4 @@ export const DEFAULT_EDITOR_DEBOUNCE = 500; export const DEFAULT_KUBECONFIG_DEBOUNCE = 1000; export const ACTIONS_PANE_FOOTER_HEIGHT = 200; export const ACTIONS_PANE_TAB_PANE_OFFSET = 106; +export const TEMPLATES_HEIGHT_OFFSET = 200; diff --git a/src/styles/Colors.ts b/src/styles/Colors.ts index b140b8d78b..61c918a07a 100644 --- a/src/styles/Colors.ts +++ b/src/styles/Colors.ts @@ -15,6 +15,7 @@ enum Colors { grey5 = '#5A5A5A', // gray, gray 5 grey4 = '#303030', // gray, gray 4 grey3 = '#262626', // gray, gray 3 + grey1 = '#141414', // gray, gray 1 // Notifications greenOkay = '#09b89d',