Merge branch 'master' into fix-share

README.md

@@ -91,7 +91,6 @@ Find out more on the <a href="https://layer5.io/community">Layer5 community</a>.
 <br /><br /><br /><br />
 
 </p>
-
 <div>&nbsp;</div>
 
 <a href="https://slack.meshery.io">

src/custom/CatalogDetail/ActionButton.tsx

@@ -76,31 +76,13 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             width: '100%'
           }}
         >
-          <ActionButton
-            sx={{
-              borderRadius: '0.2rem',
-              backgroundColor: 'transparent',
-              border: `1px solid ${theme.palette.border.normal}`,
-              gap: '10px',
-              color: theme.palette.text.default
-            }}
-            onClick={() =>
-              cleanedType === VIEWS
-                ? downloadYaml(details.pattern_file, details.name)
-                : downloadPattern(details.id, details.name, getDownloadUrl)
-            }
-          >
-            <Download width={24} height={24} fill={theme.palette.icon.default} />
-            Download
-          </ActionButton>
-
           {cleanedType !== FILTERS && (
             <ActionButton
               sx={{
+                backgroundColor: showOpenPlaygroundAction ? 'transparent' : undefined,
+                color: theme.palette.text.default,
                 borderRadius: '0.2rem',
                 gap: '10px',
-                color: theme.palette.text.default,
-                backgroundColor: 'transparent',
                 border: `1px solid ${theme.palette.border.normal}`
               }}
               onClick={() => handleClone(details?.name, details?.id)}
@@ -116,6 +98,23 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               )}
             </ActionButton>
           )}
+          <ActionButton
+            sx={{
+              borderRadius: '0.2rem',
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
+              gap: '10px',
+              color: theme.palette.text.default
+            }}
+            onClick={() =>
+              cleanedType === VIEWS
+                ? downloadYaml(details.pattern_file, details.name)
+                : downloadPattern(details.id, details.name, getDownloadUrl)
+            }
+          >
+            <Download width={24} height={24} fill={theme.palette.icon.default} />
+            Download
+          </ActionButton>
         </div>
       )}
 

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -83,7 +83,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
               size="small"
               onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
             >
-              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
+              <ChainIcon height={'24'} width={'24'} fill={theme.palette.text.constant?.white} />
             </ShareSideButton>
           </CustomTooltip>
         </ShareButtonGroup>

src/custom/Markdown/index.tsx

@@ -5,6 +5,7 @@ import {
   BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
+  StyledMarkdownCode,
   StyledMarkdownH1,
   StyledMarkdownH2,
   StyledMarkdownH3,
@@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
         td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
-        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>,
+        code: ({ ...props }) => <StyledMarkdownCode>{props.children}</StyledMarkdownCode>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   whiteSpace: 'pre-line',
   fontFamily: 'inherit'
 }));
+
+export const StyledMarkdownCode = styled('code')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line',
+  padding: '1.5px',
+  paddingInline: '5px',
+  fontFamily: 'inherit',
+  borderRadius: 3
+}));

src/custom/ResourceDetailFormatters/Formatter.tsx

@@ -35,6 +35,7 @@ import {
   StyledEnvironmentVariablesCode,
   StyledEnvironmentVariablesPre,
   StyledTitle,
+  TextValue,
   Wrap
 } from './styles';
 import {
@@ -201,7 +202,7 @@ export const OperatorDynamicFormatter: React.FC<OperatorDynamicFormatterProps> =
     return (
       <>
         <ElementData>
-          {data}
+          <TextValue>{data}</TextValue>
           {regex.test(data) && <CopyToClipboard data={data} />}
         </ElementData>
       </>

src/custom/ResourceDetailFormatters/styles.ts

@@ -52,7 +52,7 @@ export const Title = styled('span')({
   fontFamily: 'Qanelas Soft, sans-serif'
 });
 
-export const ElementData = styled('span')({
+export const ElementData = styled('div')({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -184,14 +184,21 @@ export const EnvironmentVariableValue = styled('span')({
 export const CodeFormatterPre = styled('pre')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,
-  width: '100%',
   wordWrap: 'break-word',
   overflowWrap: 'break-word',
   wordBreak: 'break-all',
   margin: 0,
-  padding: '0.5rem'
+  padding: '0.5rem',
+  maxWidth: '-moz-available'
 }));
 
+export const TextValue = styled(Box)({
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  width: 'inherit',
+  overflow: 'hidden'
+});
+
 export const CodeFormatterCode = styled('code')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,

src/custom/ResourceDetailFormatters/types.ts

@@ -264,4 +264,5 @@ export interface GetResourceCleanDataProps {
   dispatchMsgToEditor?: (msg: any) => void;
   activeLabels?: string[];
   showStatus?: boolean;
+  container?: any;
 }

src/custom/ResourceDetailFormatters/useResourceCleanData.ts

@@ -67,13 +67,15 @@ export const useResourceCleanData = () => {
     resource,
     activeLabels,
     dispatchMsgToEditor,
-    showStatus = true
+    showStatus = true,
+    container
   }: GetResourceCleanDataProps) => {
     const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute);
     const parsedSpec = resource?.spec?.attribute && JSON.parse(resource?.spec.attribute);
     const numberStates = structureNumberStates(parsedStatus, parsedSpec);
     const kind = resource?.kind ?? resource?.component?.kind;
     const cleanData = {
+      container: container,
       age: getAge(resource?.metadata?.creationTimestamp),
       kind: kind,
       status: showStatus && getStatus(parsedStatus),

src/custom/ShareModal/ShareModal.tsx

@@ -257,12 +257,14 @@ const ShareModal: React.FC<ShareModalProps> = ({
                         <PublicIcon
                           width={24}
                           height={24}
+                          fill={theme.palette.icon.default}
                           stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                         />
                       ) : (
                         <LockIcon
                           width={24}
                           height={24}
+                          fill={theme.palette.icon.default}
                           stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                         />
                       )}
@@ -289,7 +291,13 @@ const ShareModal: React.FC<ShareModalProps> = ({
                           </MenuItem>
                         ))}
                       </CustomSelect>
-                      <Typography component="span" variant="body2">
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary
+                        }}
+                        component="span"
+                        variant="body2"
+                      >
                         {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
                       </Typography>
                     </div>

src/index.tsx

@@ -6,3 +6,4 @@ export * from './icons';
 export * from './redux-persist';
 export * from './schemas';
 export * from './theme';
+export * from './utils';

src/theme/colors/colors.ts

@@ -102,6 +102,11 @@ export const charcoal = {
   10: '#000D12'
 };
 
+export const gray = {
+  10: '#1A1A1A',
+  20: '#212121'
+};
+
 export const accentGrey = {
   100: '#F6F8F8',
   90: '#E8EFF3',

src/theme/colors/index.ts

@@ -57,6 +57,7 @@ export {
   darkSlateGray,
   darkTeal,
   eerieBlack,
+  gray,
   green,
   jungleGreen,
   keppel,

src/theme/components/tab.modifier.ts

@@ -6,7 +6,7 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
       const {
         palette: {
           text: { default: defaultText },
-          background: { default: defaultBackground }
+          background: { tabs: defaultBackground }
         }
       } = theme;
       return {

src/theme/components/tabs.modifier.ts

@@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette.background.tabs
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default

src/theme/palette.ts

@@ -195,7 +195,7 @@ export const lightModePalette: PaletteOptions = {
     default: Colors.charcoal[100],
     secondary: Colors.accentGrey[90],
     tertiary: Colors.accentGrey[80],
-    tabs: Colors.charcoal[70],
+    tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[90],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -255,6 +255,7 @@ export const lightModePalette: PaletteOptions = {
       tertiary: Colors.red[70]
     },
     code: Colors.charcoal[90],
+
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],
@@ -311,7 +312,7 @@ export const darkModePalette: PaletteOptions = {
     default: Colors.charcoal[10],
     secondary: Colors.accentGrey[20],
     tertiary: Colors.accentGrey[30],
-    tabs: Colors.charcoal[110],
+    tabs: Colors.gray[10], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[20],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -326,7 +327,7 @@ export const darkModePalette: PaletteOptions = {
     brand: {
       default: Colors.keppel[40],
       hover: Colors.keppel[50],
-      disabled: Colors.charcoal[20],
+      disabled: Colors.charcoal[30],
       pressed: Colors.keppel[60],
       secondary: Colors.keppel[20],
       tertiary: Colors.keppel[10]
@@ -369,7 +370,7 @@ export const darkModePalette: PaletteOptions = {
       secondary: Colors.red[20],
       tertiary: Colors.red[10]
     },
-    code: Colors.accentGrey[90],
+    code: Colors.charcoal[10],
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],

src/theme/typography.ts

@@ -97,7 +97,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
       }
     },
     textB2SemiBold: {
-      fontFamily: ['"Open Sans"', 'sans-serif'].join(','),
+      fontFamily: ['Qanelas Soft Regular'].join(','),
       color: mode === 'light' ? common.black : common.white,
       fontSize: '1rem',
       fontWeight: 600,

src/utils/components.ts

@@ -0,0 +1,14 @@
+export const componentIcon = ({
+  kind,
+  model,
+  color
+}: {
+  kind: string;
+  model: string;
+  color: 'white' | 'color' | 'complete';
+}) => {
+  if (!kind || !model || !color) {
+    return null;
+  }
+  return `/ui/public/static/img/meshmodels/${model}/${color}/${kind.toLowerCase()}-${color}.svg`;
+};

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './components';