chore: fix some lint issues

docker-compose.yml

@@ -6,4 +6,4 @@ services:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
     ports:
-      - 5432:5432
+      - '5432:5432'

docs/index.md

@@ -10,28 +10,22 @@ yarn --cwd packages/app add @drodil/backstage-plugin-toolbox
 
 Expose the toolbox page:
 
-```ts
+```tsx
 // packages/app/src/App.tsx
-import {ToolboxPage} from '@drodil/backstage-plugin-toolbox';
-
-// ...
+import { ToolboxPage } from '@drodil/backstage-plugin-toolbox';
 
 const AppRoutes = () => (
   <FlatRoutes>
     // ...
-    <Route path = "/toolbox"
-element = { < ToolboxPage / >
-}
-/>
-// ...
-< /FlatRoutes>
-)
-;
+    <Route path="/toolbox" element={<ToolboxPage />} />
+    // ...
+  </FlatRoutes>
+);
 ```
 
 Add the navigation in the frontend:
 
-```ts
+```tsx
 // packages/app/src/components/Root/Root.tsx
 import CardTravel from '@mui/icons-material/CardTravel';
 
@@ -52,7 +46,7 @@ An interface for toolbox is now available at `/toolbox`.
 
 You can also add your own tools to the plugin by passing them to the ToolboxPage as a property:
 
-```ts
+```tsx
 import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
 
 const extraToolExample: Tool = {
@@ -65,7 +59,7 @@ const extraToolExample: Tool = {
 
 Also lazy loading is supported:
 
-```ts
+```tsx
 import React, { lazy } from 'react';
 import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
 

plugins/toolbox/README.md

@@ -6,7 +6,8 @@ _This plugin was created through the Backstage CLI_
 
 ## Getting started
 
-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/toolbox](http://localhost:3000/toolbox).
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running
+`yarn start` in the root directory, and then navigating to [/toolbox](http://localhost:3000/toolbox).
 
 You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
 This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
@@ -22,7 +23,7 @@ cd packages/app && yarn add @drodil/backstage-plugin-toolbox
 
 Expose the questions page:
 
-```ts
+```tsx
 // packages/app/src/App.tsx
 import { ToolboxPage } from '@drodil/backstage-plugin-toolbox';
 
@@ -43,7 +44,7 @@ An interface for toolbox is now available at `/toolbox`.
 
 You can also add your own tools to the plugin by passing them to the ToolboxPage as a property:
 
-```ts
+```tsx
 import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
 
 const extraToolExample: Tool = {
@@ -56,9 +57,10 @@ const extraToolExample: Tool = {
 
 Also lazy loading is supported:
 
-```ts
+```tsx
 import React, { lazy } from 'react';
 import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
+
 const MyTool = lazy(() => import('./MyTool'));
 
 const extraToolExample: Tool = {

plugins/toolbox/dev/HomePage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CustomHomepageGrid } from '@backstage/plugin-home';
-import { ToolboxHomepageCard } from '../src/plugin';
+import { ToolboxHomepageCard } from '../src';
 import { Content, Page } from '@backstage/core-components';
 
 export const HomePage = () => {

plugins/toolbox/src/api/ToolboxClient.ts

@@ -30,15 +30,11 @@ export class ToolboxClient implements ToolboxApi {
     request: ToolRequest,
   ): Promise<ToolResponse> {
     const url = `${await this.getBaseUrl()}/${toolName}`;
-    try {
-      const response = await this.fetchApi.fetch(url, request);
-      if (response.ok) {
-        return response;
-      }
-      throw new Error(`Request failed with status ${response.status}`);
-    } catch (error) {
-      throw new Error(`Request failed: ${error}`);
+    const response = await this.fetchApi.fetch(url, request);
+    if (response.ok) {
+      return response;
     }
+    throw new Error(`Request failed with status ${response.status}`);
   }
 
   async toolJsonRequest(toolName: string, data: any): Promise<unknown> {

plugins/toolbox/src/components/Buttons/CopyToClipboardButton.tsx

@@ -3,6 +3,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Button from '@mui/material/Button';
 import FileCopy from '@mui/icons-material/FileCopy';
 import { useToolboxTranslation } from '../../hooks';
+import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 
 type Props = {
   output: string | number;
@@ -11,10 +12,20 @@ type Props = {
 
 export const CopyToClipboardButton = (props: Props) => {
   const { t } = useToolboxTranslation();
+  const alertApi = useApi(alertApiRef);
 
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(props.output.toString());
-    // TODO: handle success and error
+    navigator.clipboard
+      .writeText(props.output.toString())
+      .then(() => {
+        alertApi.post({ message: 'Copied to clipboard!', severity: 'success' });
+      })
+      .catch(() => {
+        alertApi.post({
+          message: 'Failed to copy to clipboard!',
+          severity: 'error',
+        });
+      });
   };
 
   return (

plugins/toolbox/src/components/Converters/ColorConverter.tsx

@@ -11,17 +11,19 @@ import {
   LCH,
   RGB,
 } from 'color-convert/conversions';
-import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
-import { ClearValueButton } from '../Buttons/ClearValueButton';
-import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  PasteFromClipboardButton,
+  SampleButton,
+} from '../Buttons';
 import TextField from '@mui/material/TextField';
 import FormControl from '@mui/material/FormControl';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
 import { useToolboxTranslation } from '../../hooks';
-import { SampleButton } from '../Buttons';
 
 export const ColorConverter = () => {
   const { classes } = useStyles();

plugins/toolbox/src/components/Converters/CsvToJson.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import csvToJson from 'csvtojson';
 import { JsonSpaceSelector } from '../DefaultEditor/JsonSpaceSelector';
 

plugins/toolbox/src/components/Converters/JsonToCsv.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import { Parser } from '@json2csv/plainjs';
 
 export const JsonToCsv = () => {

plugins/toolbox/src/components/Converters/JsonToYaml.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import YAML from 'yaml';
 
 export const JsonToYaml = () => {

plugins/toolbox/src/components/Converters/MarkdownPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import { MarkdownContent } from '@backstage/core-components';
 import { useStyles } from '../../utils/hooks';
 import beautify from 'js-beautify';

plugins/toolbox/src/components/Converters/NumberBase.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useStyles } from '../../utils/hooks';
-import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
-import { ClearValueButton } from '../Buttons/ClearValueButton';
-import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  PasteFromClipboardButton,
+} from '../Buttons';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';

plugins/toolbox/src/components/Converters/SLACalculator.tsx

@@ -1,16 +1,18 @@
 import { useStyles } from '../../utils/hooks';
 import React from 'react';
-import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
-import { ClearValueButton } from '../Buttons/ClearValueButton';
-import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  PasteFromClipboardButton,
+  SampleButton,
+} from '../Buttons';
 import TextField from '@mui/material/TextField';
 import FormControl from '@mui/material/FormControl';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import Alert from '@mui/material/Alert';
 import { useToolboxTranslation } from '../../hooks';
-import { SampleButton } from '../Buttons';
 
 export const SLACalculator = () => {
   const { classes } = useStyles();

plugins/toolbox/src/components/Converters/StringUtilities.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useCallback } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import React, { useCallback, useEffect } from 'react';
+import { DefaultEditor } from '../DefaultEditor';
 import {
   camelCase,
   capitalize,

plugins/toolbox/src/components/Converters/TimeConverter.tsx

@@ -1,9 +1,11 @@
 import { useStyles } from '../../utils/hooks';
 import React from 'react';
 import { DateTime } from 'luxon';
-import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
-import { ClearValueButton } from '../Buttons/ClearValueButton';
-import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  PasteFromClipboardButton,
+} from '../Buttons';
 import TextField from '@mui/material/TextField';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';

plugins/toolbox/src/components/Converters/XmlToJson.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import { xml2json } from 'xml-js';
 import { JsonSpaceSelector } from '../DefaultEditor/JsonSpaceSelector';
 import { useToolboxTranslation } from '../../hooks';

plugins/toolbox/src/components/Converters/YamlToJson.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import YAML from 'yaml';
 import { JsonSpaceSelector } from '../DefaultEditor/JsonSpaceSelector';
 

plugins/toolbox/src/components/DefaultEditor/DefaultEditor.tsx

@@ -1,10 +1,12 @@
 import React, { ReactElement } from 'react';
 import { useStyles } from '../../utils/hooks';
-import { CopyToClipboardButton } from '../Buttons/CopyToClipboardButton';
-import { PasteFromClipboardButton } from '../Buttons/PasteFromClipboardButton';
-import { ClearValueButton } from '../Buttons/ClearValueButton';
-import { SampleButton } from '../Buttons/SampleButton';
-import { FileUploadButton } from '../Buttons';
+import {
+  ClearValueButton,
+  CopyToClipboardButton,
+  FileUploadButton,
+  PasteFromClipboardButton,
+  SampleButton,
+} from '../Buttons';
 import { FileDownloadButton } from '../Buttons/FileDownloadButton';
 import Grid from '@mui/material/Grid';
 import ButtonGroup from '@mui/material/ButtonGroup';

plugins/toolbox/src/components/Encoders/Backslash.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 
 const charCodeMap = {
   '\\n': 13,

plugins/toolbox/src/components/Encoders/Base64Encode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 
 export const Base64Encode = () => {
   const [input, setInput] = React.useState('');

plugins/toolbox/src/components/Encoders/HtmlEntities.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 
 const decode = (value: string): string => {
   const textArea = document.createElement('textarea');

plugins/toolbox/src/components/Encoders/UrlEncode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 
 export const UrlEncode = () => {
   const [input, setInput] = React.useState('');

plugins/toolbox/src/components/Formatters/CSSBeautify.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import beautify from 'js-beautify';
 import { useToolboxTranslation } from '../../hooks';
 

plugins/toolbox/src/components/Formatters/HTMLBeautify.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import beautify from 'js-beautify';
 import { useToolboxTranslation } from '../../hooks';
 

plugins/toolbox/src/components/Formatters/JSBeautify.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import beautify from 'js-beautify';
 import { useToolboxTranslation } from '../../hooks';
 

plugins/toolbox/src/components/Formatters/SQLBeautify.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import { format } from 'sql-formatter';
 import { useToolboxTranslation } from '../../hooks';
 

plugins/toolbox/src/components/Generators/Hash.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { DefaultEditor } from '../DefaultEditor/DefaultEditor';
+import { DefaultEditor } from '../DefaultEditor';
 import { faker } from '@faker-js/faker';
 import { sha1, sha256, sha384, sha512 } from 'crypto-hash';
 import { Md5 } from 'ts-md5';