EVEREST-1737: add code commands to add namespaces (#923)

* feat: add code commands to add namespaces

* chore: add Roboto Mono

ui/apps/everest/src/components/code-copy-block/code-copy-block.tsx

@@ -32,6 +32,7 @@ export const CodeCopyBlock = ({
           alignItems: 'center',
           pt: 0,
         },
+        fontFamily: '"Roboto Mono", "Helvetica", "Arial", "sans-serif"',
       }}
       action={
         <CopyToClipboardButton

ui/apps/everest/src/pages/common/empty-state/namespaces/index.tsx

@@ -1,9 +1,23 @@
-import { Box, Button, Divider, Typography } from '@mui/material';
+import { Box, Button, Divider, Stack, Typography } from '@mui/material';
 import { EmptyStateIcon } from '@percona/ui-lib';
 import { Messages } from './messages';
 import { ArrowOutward } from '@mui/icons-material';
 import { centeredContainerStyle } from '../utils';
 import { ContactSupportLink } from '../ContactSupportLink';
+import { CodeCopyBlock } from 'components/code-copy-block/code-copy-block';
+
+const CommandInstructions = ({
+  message,
+  command,
+}: {
+  message: string;
+  command: string;
+}) => (
+  <Stack mt={3} maxWidth="350px">
+    <Typography variant="body2">{message}</Typography>
+    <CodeCopyBlock message={command} />
+  </Stack>
+);
 
 export const EmptyStateNamespaces = () => {
   return (
@@ -19,7 +33,14 @@ export const EmptyStateNamespaces = () => {
         <Box sx={centeredContainerStyle}>
           <Typography>{Messages.noNamespaces}</Typography>
           <Typography> {Messages.createToStart}</Typography>
-          <Typography> {Messages.command}</Typography>
+          <CommandInstructions
+            message="If you are using CLI, run the following command:"
+            command="everestctl namespaces add <NAMESPACE>"
+          />
+          <CommandInstructions
+            message="If you are using Helm, run the following command:"
+            command="helm install everest percona/everest-db-namespace --create-namespace --namespace <NAMESPACE>"
+          />
         </Box>
         <Button
           data-testid="learn-more-button"

ui/apps/everest/src/pages/common/empty-state/namespaces/messages.ts

@@ -1,7 +1,7 @@
 export const Messages = {
-  noNamespaces: 'Uh-oh! Looks like no namespaces have been created',
-  createToStart: 'Create one to get started.',
-  command: 'Run `everestctl namespaces add [Namespace]` command.',
+  noNamespaces:
+    'Uh-oh! Looks like no namespaces have been created or no database engines are available.',
+  createToStart: 'To create a namespace, follow the commands:',
   learnMore: 'Learn more',
   contactSupport: 'Contact Percona Support',
 };

ui/packages/design/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@fontsource/poppins": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
+    "@fontsource/roboto-mono": "^5.1.0",
     "@mui/utils": "^5.14.15"
   },
   "devDependencies": {

ui/packages/design/src/themes/base/BaseTheme.tsx

@@ -6,6 +6,8 @@ import '@fontsource/roboto/700.css';
 import '@fontsource/poppins/400.css';
 import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
+
+import '@fontsource/roboto-mono/400.css';
 import {
   ComponentsOverrides,
   createTheme,