feat: glossary empty view + close menu on click

Author: Anty0

webapp/src/ee/glossary/components/AddFirstGlossaryMessage.tsx

@@ -45,7 +45,14 @@ export const AddFirstGlossaryMessage: React.VFC<
           <T keyName="glossaries_list_empty_title" />
         </Typography>
         <Typography mt={2}>
-          <T keyName="glossaries_list_empty_message" />
+          <T
+            keyName="glossaries_list_empty_message"
+            params={{
+              bestPractice: (
+                <a href="https://docs.tolgee.io/platform/projects_and_organizations/glossary" />
+              ),
+            }}
+          />
         </Typography>
       </StyledText>
       <StyledImage draggable="false" height={props.height || '170px'}>

webapp/src/ee/glossary/components/GlossaryEmptyListMessage.tsx

@@ -0,0 +1,99 @@
+import React, { ComponentProps } from 'react';
+import { Box, Button, Card, Link, styled, Typography } from '@mui/material';
+import { PlusCircle, UploadCloud02 } from '@untitled-ui/icons-react';
+import { EmptyState } from 'tg.component/common/EmptyState';
+import { T } from '@tolgee/react';
+
+const StyledBox = styled(Box)`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: ${({ theme }) => theme.spacing(2)};
+  flex-wrap: wrap;
+`;
+
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: ${({ theme }) => theme.spacing(2)};
+  border-radius: 20px;
+  width: 490px;
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledPlusCircle = styled(PlusCircle)`
+  color: ${({ theme }) => theme.palette.primary.light};
+  width: 32px;
+  height: 32px;
+`;
+
+const StyledUploadCloud02 = styled(UploadCloud02)`
+  color: ${({ theme }) => theme.palette.primary.light};
+  width: 32px;
+  height: 32px;
+`;
+
+const StyledDescription = styled(Typography)`
+  color: ${({ theme }) => theme.palette.text.secondary};
+  margin-bottom: ${({ theme }) => theme.spacing(5)};
+`;
+
+type Props = {
+  loading?: boolean;
+  wrapperProps?: ComponentProps<typeof Box>;
+  onCreate?: () => void;
+  onImport?: () => void;
+};
+
+export const GlossaryEmptyListMessage: React.VFC<Props> = ({
+  loading,
+  wrapperProps,
+  onCreate,
+  onImport,
+}) => {
+  return (
+    <EmptyState loading={loading} wrapperProps={wrapperProps}>
+      <StyledBox>
+        <StyledCard>
+          <StyledPlusCircle />
+          <Typography variant="h4">
+            <T keyName="glossary_empty_placeholder_add_term_title" />
+          </Typography>
+          <StyledDescription variant="body1">
+            <T keyName="glossary_empty_placeholder_add_term_description" />
+          </StyledDescription>
+          <Button onClick={onCreate} variant="contained" color="primary">
+            <T keyName="glossary_empty_placeholder_add_term_button" />
+          </Button>
+          <Link href="https://docs.tolgee.io/platform/projects_and_organizations/glossary">
+            <Typography variant="body2">
+              <T keyName="glossary_empty_placeholder_add_term_best_practices" />
+            </Typography>
+          </Link>
+        </StyledCard>
+        <StyledCard>
+          <StyledUploadCloud02 />
+          <Typography variant="h4">
+            <T keyName="glossary_empty_placeholder_import_terms_title" />
+          </Typography>
+          <StyledDescription variant="body1">
+            <T keyName="glossary_empty_placeholder_import_terms_description" />
+          </StyledDescription>
+          <Button onClick={onImport} variant="contained" color="primary">
+            <T keyName="glossary_empty_placeholder_import_terms_button" />
+          </Button>
+          <Link href="https://docs.tolgee.io/platform/projects_and_organizations/glossary/import/csv-format">
+            <Typography variant="body2">
+              <T keyName="glossary_empty_placeholder_import_terms_csv_format" />
+            </Typography>
+          </Link>
+        </StyledCard>
+      </StyledBox>
+    </EmptyState>
+  );
+};

webapp/src/ee/glossary/components/GlossaryListItemMenu.tsx

@@ -36,6 +36,7 @@ export const GlossaryListItemMenu: FC<Props> = ({ glossary, organization }) => {
   };
 
   const onDelete = () => {
+    setAnchorEl(null);
     confirmation({
       title: <T keyName="delete_glossary_confirmation_title" />,
       message: <T keyName="delete_glossary_confirmation_message" />,
@@ -51,8 +52,6 @@ export const GlossaryListItemMenu: FC<Props> = ({ glossary, organization }) => {
     });
   };
 
-  // TODO: close menu when clicking on item
-
   return (
     <>
       <Tooltip title={t('glossaries_list_more_button')}>
@@ -97,7 +96,10 @@ export const GlossaryListItemMenu: FC<Props> = ({ glossary, organization }) => {
         {canManage && (
           <MenuItem
             data-cy="glossary-edit-button"
-            onClick={() => setIsEditing(true)}
+            onClick={() => {
+              setAnchorEl(null);
+              setIsEditing(true);
+            }}
           >
             <T keyName="glossary_edit_button" />
           </MenuItem>

webapp/src/ee/glossary/views/GlossaryView.tsx

@@ -7,6 +7,7 @@ import { useRouteMatch } from 'react-router-dom';
 import React, { useMemo, useState } from 'react';
 import { GlossaryTermCreateUpdateDialog } from 'tg.ee.module/glossary/views/GlossaryTermCreateUpdateDialog';
 import { GlossaryViewBody } from 'tg.ee.module/glossary/components/GlossaryViewBody';
+import { GlossaryEmptyListMessage } from 'tg.ee.module/glossary/components/GlossaryEmptyListMessage';
 
 export const GlossaryView = () => {
   const [search, setSearch] = useState('');
@@ -148,7 +149,11 @@ export const GlossaryView = () => {
           onSearch={setSearch}
         />
       ) : (
-        <>Empty TODO</>
+        <GlossaryEmptyListMessage
+          loading={termsLoadable.isLoading}
+          onCreate={onCreate}
+          onImport={undefined /* TODO */}
+        />
       )}
     </BaseOrganizationSettingsView>
   );