fix: show qr code also in the tool and use translations

drodil · Nov 5, 2024 · bace909 · bace909
1 parent 143cfad
commit bace909
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 35 deletions.
diff --git a/plugins/toolbox/src/components/Generators/QRCode.tsx b/plugins/toolbox/src/components/Generators/QRCode.tsx
@@ -14,7 +14,10 @@ import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import TextField from '@mui/material/TextField';
-import { DefaultEditor } from '@drodil/backstage-plugin-toolbox';
+import {
+  DefaultEditor,
+  useToolboxTranslation,
+} from '@drodil/backstage-plugin-toolbox';
 
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -50,6 +53,7 @@ const ConfigSelect = (props: {
       }),
     [props],
   );
+  const { t } = useToolboxTranslation();
 
   const labelId = `label-for-${props.settingKey}`;
   const between = '3px';
@@ -86,7 +90,7 @@ const ConfigSelect = (props: {
                 key={`selectFor${props.name}menu${value}`}
                 value={value}
               >
-                {value}
+                {t(`tool.qr-code-generate.${value}`)}
               </MenuItem>
             ))
           : null}
@@ -95,7 +99,7 @@ const ConfigSelect = (props: {
         <TextField
           defaultValue={props.settings[colorSetting]}
           id="input"
-          label={`${props.name} color`}
+          label={`${props.name} ${t('tool.qr-code-generate.color')}`}
           name="input"
           onChange={onChangeColor}
           sx={{ width: 140, margin: `10px ${between} 0 ${between}` }}
@@ -111,7 +115,9 @@ export const QRCodeGenerator = () => {
   const sample = faker.internet.url();
 
   const [fileExt, setFileExt] = useState<FileExtension>('png');
+  const [image, setImage] = useState<string | null>(null);
   const ref = useRef(null);
+  const { t } = useToolboxTranslation();
 
   const config = useApi(configApiRef).getOptionalConfig('app.toolbox.qrCode');
 
@@ -194,7 +200,24 @@ export const QRCodeGenerator = () => {
       },
       shape: settings.shape,
     });
-  }, [input, qrCode, settings]);
+    qrCode
+      .getRawData()
+      .then(data => {
+        if (!data) {
+          setImage(null);
+          return;
+        }
+
+        if (Buffer.isBuffer(data)) {
+          const blob = new Blob([data], { type: 'image/png' });
+          setImage(window.URL.createObjectURL(blob));
+          return;
+        }
+
+        setImage(window.URL.createObjectURL(data));
+      })
+      .catch(() => setImage(null));
+  }, [qrCode, settings, input]);
 
   const onExtensionChange = useCallback(
     (event: SelectChangeEvent) => {
@@ -210,31 +233,26 @@ export const QRCodeGenerator = () => {
   }, [fileExt, qrCode]);
 
   const DownloadOptions = (
-    <span>
-      {'File type: '}
-      <Select
-        defaultValue="png"
-        key="selectExtensionChanger"
-        label="file extension"
-        onChange={onExtensionChange}
-        placeholder="file extension"
-        variant="standard"
-      >
-        <MenuItem key="png" value="png">
-          png
-        </MenuItem>
-        <MenuItem key="webp" value="webp">
-          webp
-        </MenuItem>
-        <MenuItem key="jpeg" value="jpeg">
-          jpeg
-        </MenuItem>
-        <MenuItem key="svg" value="svg">
-          svg
-        </MenuItem>
-      </Select>
-      <Button key="downloadbutton" onClick={onDownloadClick}>
-        Download
+    <span style={{ marginLeft: '2rem' }}>
+      <FormControl>
+        <InputLabel id="file-type">
+          {t('tool.qr-code-generate.downloadAs')}
+        </InputLabel>
+        <Select
+          defaultValue="png"
+          labelId="file-type"
+          onChange={onExtensionChange}
+          label={t('tool.qr-code-generate.downloadAs')}
+          variant="outlined"
+        >
+          <MenuItem value="png">png</MenuItem>
+          <MenuItem value="webp">webp</MenuItem>
+          <MenuItem value="jpeg">jpeg</MenuItem>
+          <MenuItem value="svg">svg</MenuItem>
+        </Select>
+      </FormControl>
+      <Button key="downloadbutton" onClick={onDownloadClick} disabled={!input}>
+        {t('tool.qr-code-generate.download')}
       </Button>
     </span>
   );
@@ -247,7 +265,7 @@ export const QRCodeGenerator = () => {
         additionalTools={[
           <ConfigSelect
             key="dotSelect"
-            name="Dot"
+            name={t('tool.qr-code-generate.dotType')}
             setSettings={setSettings}
             settingKey={'dotType' as const}
             settings={settings}
@@ -264,33 +282,44 @@ export const QRCodeGenerator = () => {
           />,
           <ConfigSelect
             key="cornerSquareSelect"
-            name="Corner Square"
+            name={t('tool.qr-code-generate.cornerSquareType')}
             setSettings={setSettings}
             settingKey={'cornerSquareType' as const}
             settings={settings}
             types={['square', 'dot', 'extra-rounded'] as CornerSquareType[]}
           />,
           <ConfigSelect
             key="cornerDotSelect"
-            name="Corner Dot"
+            name={t('tool.qr-code-generate.cornerDotType')}
             setSettings={setSettings}
             settingKey={'cornerDotType' as const}
             settings={settings}
             types={['dot', 'square'] as CornerDotType[]}
           />,
           <ConfigSelect
             key="shapeSelect"
-            name="Shape"
+            name={t('tool.qr-code-generate.shapeType')}
             setSettings={setSettings}
             settingKey={'shape' as const}
             settings={settings}
             types={['circle', 'square'] as ShapeType[]}
           />,
+          DownloadOptions,
         ]}
-        extraRightContent={DownloadOptions}
         input={input}
         inputProps={{ maxLength: 2048 }}
-        rightContent={<div ref={ref} />}
+        rightContent={
+          image ? (
+            <img
+              ref={ref}
+              className="blob-to-image"
+              src={image}
+              alt="QR code"
+            />
+          ) : (
+            <div ref={ref} />
+          )
+        }
         sample={sample}
         setInput={useCallback(
           value => {

diff --git a/plugins/toolbox/src/translation.ts b/plugins/toolbox/src/translation.ts
@@ -179,6 +179,22 @@ export const toolboxTranslationRef = createTranslationRef({
       'qr-code-generate': {
         name: 'QR Code',
         description: 'Generate QR code from text',
+        fileType: 'File type:',
+        dotType: 'Dot',
+        cornerSquareType: 'Corner square',
+        cornerDotType: 'Corner dot',
+        shapeType: 'Shape',
+        color: 'color',
+        download: 'Download',
+        square: 'Square',
+        circle: 'Circle',
+        classy: 'Classy',
+        dots: 'Dots',
+        downloadAs: 'File type',
+        'classy-rounded': 'Classy rounded',
+        'extra-rounded': 'Extra rounded',
+        rounded: 'Rounded',
+        dot: 'Dot',
       },
       'bar-code-generate': {
         name: 'Barcode',