Page for generating JWT (#175)

* Refactor sidebar items into a reusable function * Add JWT functionality and sidebar link * Add PreviewTokenAccess component * Audit fix and fmt * moved core of CodeBlock to the separate component which can be used outside of MDX scope * fix for CodeBlock * JwtForm view without logic * basic result component for jwt page * some logic integration into the new view * some drafting on how results part should work, overall fixes * fix audit * wip * configuration for the collection-level access * disable jwt page if server does not support it * format * wip: selection from existing payload keys * settings key select fix * fix form size and rename read access -> management access * add tooltips * add + button for collection settings * Fix: Too many re-renders, infinite loop. * Add note for no indexed field in CollectionAccessDialog * Fix missing error message when API key is not provided in Jwt.jsx * Fix missing setSelectedCollection call in CollectionAccessDialog.jsx --------- Co-authored-by: kartik-gupta-ij <[email protected]> Co-authored-by: generall <[email protected]>
qdrant · Apr 17, 2024 · d45014f · d45014f
1 parent 0d26952
commit d45014f
Show file tree

Hide file tree

Showing 23 changed files with 1,254 additions and 173 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "axios": "^1.6.7",
     "chart.js": "^4.3.0",
     "chroma-js": "^2.4.2",
+    "jose": "^5.2.3",
     "jsonc-parser": "^3.2.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.44.0",

diff --git a/...ctiveTutorial/MdxComponents/CodeBlock.jsx → src/components/Common/CodeBlock.jsx b/...ctiveTutorial/MdxComponents/CodeBlock.jsx → src/components/Common/CodeBlock.jsx
@@ -1,15 +1,11 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Highlight, Prism, themes } from 'prism-react-renderer';
 import Editor from 'react-simple-code-editor';
 import { alpha, Box, Button } from '@mui/material';
-import { requestFromCode } from '../../CodeEditorWindow/config/RequesFromCode';
-import { useTutorial } from '../../../context/tutorial-context';
 import { styled, useTheme } from '@mui/material/styles';
 import { PlayArrowOutlined } from '@mui/icons-material';
-import { CopyButton } from '../../Common/CopyButton';
-import { DARK_BACKGROUND, LIGHT_BACKGROUND } from './MdxComponents';
-import { bigIntJSON } from '../../../common/bigIntJSON';
+import { CopyButton } from './CopyButton';
 
 const StyledEditor = styled((props) => <Editor padding={0} textareaClassName={'code-block-textarea'} {...props} />)({
   fontFamily: '"Menlo", monospace',
@@ -25,46 +21,36 @@ const StyledEditor = styled((props) => <Editor padding={0} textareaClassName={'c
 /**
  * Run button for code block
  * @param {string} code
+ * @param {function} onRun
  * @return {JSX.Element}
  * @constructor
  */
-export const RunButton = ({ code }) => {
-  const { setResult } = useTutorial();
-  const handleClick = () => {
-    setResult('{}');
-    requestFromCode(code, false)
-      .then((res) => {
-        setResult(() => bigIntJSON.stringify(res));
-      })
-      .catch((err) => {
-        setResult(() => bigIntJSON.stringify(err));
-      });
-  };
+export const RunButton = ({ code, onRun }) => {
   return (
-    <Button variant="outlined" endIcon={<PlayArrowOutlined />} onClick={handleClick} data-testid="code-block-run">
+    <Button variant="outlined" endIcon={<PlayArrowOutlined />} onClick={() => onRun(code)} data-testid="code-block-run">
       Run
     </Button>
   );
 };
 
 RunButton.propTypes = {
   code: PropTypes.string.isRequired,
+  onRun: PropTypes.func.isRequired,
 };
 
 /**
  * Code block with syntax highlighting
- * @param {object} children - code block content from mdx
  * @return {JSX.Element}
  * @constructor
  */
-export const CodeBlock = ({ children }) => {
-  const className = children.props.className || '';
-  const [code, setCode] = useState(children.props.children.trim());
-  const language = className.replace(/language-/, '');
-  const withRunButton = children.props.withRunButton && bigIntJSON.parse(children.props.withRunButton);
+export const CodeBlock = ({ codeStr, language, withRunButton, onRun, title, editable = true }) => {
+  const [code, setCode] = useState(codeStr);
   const theme = useTheme();
   const prismTheme = theme.palette.mode === 'light' ? themes.nightOwlLight : themes.vsDark;
-  const backgroundColor = theme.palette.mode === 'light' ? LIGHT_BACKGROUND : DARK_BACKGROUND;
+
+  useEffect(() => {
+    setCode(codeStr);
+  }, [codeStr]);
 
   const handleChange = (code) => {
     setCode(() => code);
@@ -99,7 +85,7 @@ export const CodeBlock = ({ children }) => {
   return (
     <Box
       sx={{
-        background: backgroundColor,
+        background: theme.palette.background.code,
         borderRadius: '0.5rem',
         my: 3,
       }}
@@ -114,35 +100,35 @@ export const CodeBlock = ({ children }) => {
           background: alpha(theme.palette.primary.main, 0.05),
         }}
       >
-        {withRunButton && (
+        {withRunButton && onRun && (
           <Box sx={{ flexGrow: '1' }}>
-            <RunButton code={code} />
+            <RunButton code={code} onRun={onRun} />
           </Box>
         )}
+        {title && <Box>{title}</Box>}
         <Box sx={{ flexGrow: '1' }} />
         <CopyButton text={code} />
       </Box>
       <Box sx={{ px: 2, pb: 1 }}>
-        {withRunButton && (
+        {withRunButton && editable && (
           <StyledEditor
             value={code}
             onValueChange={handleChange}
             highlight={highlight}
             data-testid={'code-block-editor'}
           />
         )}
-        {!withRunButton && highlight(code)}
+        {((withRunButton && !editable) || !withRunButton) && highlight(code)}
       </Box>
     </Box>
   );
 };
 
 CodeBlock.propTypes = {
-  children: PropTypes.shape({
-    props: PropTypes.shape({
-      className: PropTypes.string,
-      children: PropTypes.string.isRequired,
-      withRunButton: PropTypes.string,
-    }),
-  }),
+  codeStr: PropTypes.string.isRequired,
+  language: PropTypes.string,
+  withRunButton: PropTypes.bool,
+  onRun: PropTypes.func,
+  title: PropTypes.string,
+  editable: PropTypes.bool, // by default code block is editable
 };
diff --git a/src/components/Common/TableWithGaps.jsx b/src/components/Common/TableWithGaps.jsx
@@ -36,6 +36,39 @@ export const TableWithGaps = styled(Table)`
   border-collapse: separate;
 `;
 
+/**
+ * @description
+ * This component is a styled version of MUI Table component.
+ * It has a gap between rows.
+ *
+ * @example
+ *
+ * import { TableWithGaps, TableHeadWithGaps, TableBodyWithGaps } from "./TableWithGaps";
+ *
+ * <TableWithGaps>
+ *   <TableHeadWithGaps>
+ *     <TableRow>
+ *       <TableCell>...</TableCell>
+ *       <TableCell>...</TableCell>
+ *     </TableRow>
+ *   </TableHeadWithGaps>
+ *   <TableBodyWithGaps>
+ *     <TableRow>
+ *       <TableCell>...</TableCell>
+ *       <TableCell>...</TableCell>
+ *     </TableRow>
+ *   </TableBodyWithGaps>
+ * </TableWithGaps>
+ *
+ * @typedef {import("@mui/material").Theme} Theme
+ * @type {StyledComponent<PropsOf<OverridableComponent<TableTypeMap>> & MUIStyledCommonProps<Theme>, {}, {}>}
+ */
+export const SmallTableWithGaps = styled(Table)`
+  min-width: 350px;
+  border-spacing: 0 ${SPACING};
+  border-collapse: separate;
+`;
+
 /**
  * @description
  * This component is a styled version of MUI TableHead component.

diff --git a/src/components/InteractiveTutorial/MdxComponents/MdxCodeBlock.jsx b/src/components/InteractiveTutorial/MdxComponents/MdxCodeBlock.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { requestFromCode } from '../../CodeEditorWindow/config/RequesFromCode';
+import { useTutorial } from '../../../context/tutorial-context';
+import { bigIntJSON } from '../../../common/bigIntJSON';
+import { CodeBlock } from '../../Common/CodeBlock';
+
+/**
+ * Code block with syntax highlighting
+ * @param {object} children - code block content from mdx
+ * @return {JSX.Element}
+ * @constructor
+ */
+export const MdxCodeBlock = ({ children }) => {
+  const className = children.props.className || '';
+  const code = children.props.children.trim();
+  const language = className.replace(/language-/, '');
+  const withRunButton = children.props.withRunButton && bigIntJSON.parse(children.props.withRunButton);
+  const { setResult } = useTutorial();
+
+  const handleRun = (code) => {
+    setResult('{}');
+    requestFromCode(code, false)
+      .then((res) => {
+        setResult(() => bigIntJSON.stringify(res));
+      })
+      .catch((err) => {
+        setResult(() => bigIntJSON.stringify(err));
+      });
+  };
+
+  return <CodeBlock codeStr={code} language={language} withRunButton={withRunButton} onRun={handleRun} />;
+};
+
+MdxCodeBlock.propTypes = {
+  children: PropTypes.shape({
+    props: PropTypes.shape({
+      className: PropTypes.string,
+      children: PropTypes.string.isRequired,
+      withRunButton: PropTypes.string,
+    }),
+  }),
+};