update code block highlight style

client/public/index.html

@@ -19,6 +19,10 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400&display=swap"
+      rel="stylesheet"
+    />
     <script src="%PUBLIC_URL%/env-config.js"></script>
 
     <!--

client/src/components/code/CodeBlock.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { FC } from 'react';
+import { CodeBlockProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -22,14 +24,15 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const code = `
-const a = 2;
-const testFunction = (input) => {
-  console.log(input)
-}
-testFunction(a)`;
+const CodeStyle = {
+  backgroundColor: '#fff',
+  padding: 0,
+  margin: 0,
+  marginRight: 32,
+  fontSize: 14,
+};
 
-const CodeBlock = () => {
+const CodeBlock: FC<CodeBlockProps> = ({ code, language }) => {
   const classes = getStyles();
 
   const { t: commonTrans } = useTranslation();
@@ -40,9 +43,13 @@ const CodeBlock = () => {
       <CopyButton
         className={classes.copy}
         label={copyTrans.label}
-        value="code block"
+        value={code}
       />
-      <SyntaxHighlighter language="javascript" style={docco}>
+      <SyntaxHighlighter
+        language={language}
+        style={docco}
+        customStyle={CodeStyle}
+      >
         {code}
       </SyntaxHighlighter>
     </div>

client/src/components/code/CodeView.tsx

@@ -2,6 +2,7 @@ import { makeStyles, Theme, Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
 import CodeBlock from './CodeBlock';
+import { CodeLanguageEnum } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -65,6 +66,26 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+const jsCode = `const a = 2;
+const testFunction = (input) => {
+  console.log(input)
+}
+testFunction(a)`;
+
+const pyCode = `# Python program to find the
+# maximum of two numbers
+  
+def maximum(a, b):
+  if a >= b:
+      return a
+  else:
+      return b
+      
+# Driver code
+a = 2
+b = 4
+print(maximum(a, b))`;
+
 const CodeView = () => {
   const classes = getStyles();
   const { t: commonTrans } = useTranslation();
@@ -72,11 +93,13 @@ const CodeView = () => {
   const mockTabs = [
     {
       label: 'node.js',
-      component: <CodeBlock />,
+      component: (
+        <CodeBlock language={CodeLanguageEnum.javascript} code={jsCode} />
+      ),
     },
     {
       label: 'python',
-      component: <CodeBlock />,
+      component: <CodeBlock language={CodeLanguageEnum.python} code={pyCode} />,
     },
   ];
 

client/src/components/code/Types.ts

@@ -0,0 +1,10 @@
+export enum CodeLanguageEnum {
+  javascript = 'javascript',
+  python = 'python',
+  go = 'go',
+}
+
+export interface CodeBlockProps {
+  code: string;
+  language: CodeLanguageEnum;
+}

client/src/index.css

@@ -10,6 +10,11 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+code span {
+  font-family: 'Source Code Pro', Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

client/src/pages/schema/Create.tsx

@@ -1,5 +1,7 @@
+import { Switch } from '@material-ui/core';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import CodeView from '../../components/code/CodeView';
 import DialogTemplate from '../../components/customDialog/DialogTemplate';
 import {
   INDEX_CONFIG,
@@ -149,27 +151,30 @@ const CreateIndex = (props: {
   };
 
   return (
-    <DialogTemplate
-      title={dialogTrans('createTitle', {
-        type: indexTrans('index'),
-        name: collectionName,
-      })}
-      handleClose={handleCancel}
-      confirmLabel={btnTrans('create')}
-      handleConfirm={handleCreateIndex}
-      confirmDisabled={disabled}
-    >
-      <CreateForm
-        updateForm={updateStepTwoForm}
-        metricOptions={metricOptions}
-        indexOptions={indexOptions}
-        formValue={indexSetting}
-        checkIsValid={checkIsValid}
-        validation={validation}
-        indexParams={indexCreateParams}
-        indexTypeChange={onIndexTypeChange}
-      />
-    </DialogTemplate>
+    <>
+      <DialogTemplate
+        title={dialogTrans('createTitle', {
+          type: indexTrans('index'),
+          name: collectionName,
+        })}
+        handleClose={handleCancel}
+        confirmLabel={btnTrans('create')}
+        handleConfirm={handleCreateIndex}
+        confirmDisabled={disabled}
+        leftActions={<Switch />}
+      >
+        <CreateForm
+          updateForm={updateStepTwoForm}
+          metricOptions={metricOptions}
+          indexOptions={indexOptions}
+          formValue={indexSetting}
+          checkIsValid={checkIsValid}
+          validation={validation}
+          indexParams={indexCreateParams}
+          indexTypeChange={onIndexTypeChange}
+        />
+      </DialogTemplate>
+    </>
   );
 };