diff --git a/.eslintrc.js b/.eslintrc.js index b76aac9dd3..4594ab9b7b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -90,6 +90,12 @@ module.exports = { message: 'For safety and convenience, use this instead: import { allSettled } from "@/utils/promiseUtils";', }, + { + message: + "Bootstrap columns should not be used if there's a single column. Use a plain `div` or drop the wrapper altogether if not needed. You might also consider using one of the classes 'max-550', 'max-750', or 'max-950' to limit the width of the body.", + selector: + "JSXElement[openingElement.name.name='Row'] > JSXText:first-child + JSXElement:nth-last-child(2)", + }, { message: "Use the `uuid` module instead because crypto.randomUUID is not available in http: contexts", diff --git a/src/__snapshots__/Storyshots.test.js.snap b/src/__snapshots__/Storyshots.test.js.snap index 0f14c05aba..f943b5c283 100644 --- a/src/__snapshots__/Storyshots.test.js.snap +++ b/src/__snapshots__/Storyshots.test.js.snap @@ -5823,37 +5823,33 @@ exports[`Storyshots Forms/Form builder Default 1`] = `
-
- -
+ /> + + Add new field +
-
- -
+ /> + + Add new field +

Want to create a new mod? @@ -7836,12 +7828,8 @@ exports[`Storyshots ModsPage/GetStartedView Activate Blueprint 1`] = `

-
-

Need more help? @@ -7946,7 +7934,7 @@ exports[`Storyshots ModsPage/GetStartedView Activate Blueprint 1`] = ` exports[`Storyshots ModsPage/GetStartedView Default 1`] = `

Want to create a new mod? @@ -7990,12 +7978,8 @@ exports[`Storyshots ModsPage/GetStartedView Default 1`] = `

-
-

Need more help? @@ -9589,59 +9573,51 @@ exports[`Storyshots Sidebar/LoginPanel Default 1`] = ` className="container" >
-
-

- Connect PixieBrix Account -

-

- Register/log-in to PixieBrix to access your personal and team bricks -

- +

+ Register/log-in to PixieBrix to access your personal and team bricks +

+ + -
+ /> + + Connect Account +
-
- Marketplace -
+ Marketplace

`; diff --git a/src/components/documentBuilder/edit/ElementEditor.tsx b/src/components/documentBuilder/edit/ElementEditor.tsx index 91cc30c965..e576578f68 100644 --- a/src/components/documentBuilder/edit/ElementEditor.tsx +++ b/src/components/documentBuilder/edit/ElementEditor.tsx @@ -61,27 +61,17 @@ const ElementEditor: React.FC = ({ documentBodyName }) => { - - - - - - - - - - - - - - - - - +
+ +
+ + + + ); }; diff --git a/src/components/documentBuilder/edit/PipelineOptions.tsx b/src/components/documentBuilder/edit/PipelineOptions.tsx index e7f4328f5e..34510b9613 100644 --- a/src/components/documentBuilder/edit/PipelineOptions.tsx +++ b/src/components/documentBuilder/edit/PipelineOptions.tsx @@ -17,7 +17,6 @@ import ConnectedFieldTemplate from "@/components/form/ConnectedFieldTemplate"; import React from "react"; -import { Col, Row } from "react-bootstrap"; import { joinPathParts } from "@/utils/formUtils"; type PipelineOptionsProps = { @@ -26,9 +25,7 @@ type PipelineOptionsProps = { const PipelineOptions: React.FC = ({ elementName }) => ( <> - - Use the Brick Actions Panel on the left to add and edit bricks. - +

Use the Brick Actions Panel on the left to add and edit bricks.

= ({
)} - - - - - +
+ +
diff --git a/src/components/formBuilder/edit/__snapshots__/FormEditor.test.tsx.snap b/src/components/formBuilder/edit/__snapshots__/FormEditor.test.tsx.snap index efad6d2c6e..832f017259 100644 --- a/src/components/formBuilder/edit/__snapshots__/FormEditor.test.tsx.snap +++ b/src/components/formBuilder/edit/__snapshots__/FormEditor.test.tsx.snap @@ -138,33 +138,29 @@ exports[`FormEditor renders empty schema 1`] = `
-
- -
+ + + Add new field +
-
- -
+ + + Add new field +
-
- -
+ + + Add new field +
= ({ entry, }) => ( - - - {entry.data.outputKey && {entry.data.outputKey}} - - - + <> + {entry.data.outputKey && {entry.data.outputKey}} + + ); export default OutputDetail; diff --git a/src/extensionConsole/pages/activateExtension/ActivateExtensionCard.tsx b/src/extensionConsole/pages/activateExtension/ActivateExtensionCard.tsx index 268abfd585..5105183e7c 100644 --- a/src/extensionConsole/pages/activateExtension/ActivateExtensionCard.tsx +++ b/src/extensionConsole/pages/activateExtension/ActivateExtensionCard.tsx @@ -29,7 +29,7 @@ import { type FormState } from "@/extensionConsole/pages/activateExtension/activ import PermissionsRow from "@/extensionConsole/pages/activateExtension/PermissionsRow"; import extensionsSlice from "@/store/extensionsSlice"; import { type UUID } from "@/types/stringTypes"; -import { Card, Col, Row } from "react-bootstrap"; +import { Card } from "react-bootstrap"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCube, faMagic } from "@fortawesome/free-solid-svg-icons"; import AsyncButton from "@/components/AsyncButton"; @@ -111,24 +111,20 @@ const ActivateExtensionCard: React.FunctionComponent<{ const renderBody: RenderBody = () => ( - - -
-
- - - - {extension.label} -
-
- Created in the Page Editor -
-
-
- -
- - +
+
+ + + + {extension.label} +
+
+ Created in the Page Editor +
+
+
+ +
{ error={error} isPending={isFetching || authOptions == null} > - - - - {standaloneModDefinition && authOptions && ( - - )} - - - + + {standaloneModDefinition && authOptions && ( + + )} + ); }; diff --git a/src/extensionConsole/pages/activateMod/ActivateModCard.module.scss b/src/extensionConsole/pages/activateMod/ActivateModCard.module.scss index e01d3f13e6..d06e0159e2 100644 --- a/src/extensionConsole/pages/activateMod/ActivateModCard.module.scss +++ b/src/extensionConsole/pages/activateMod/ActivateModCard.module.scss @@ -17,10 +17,7 @@ .wizardHeader { padding: 32px; - - :global(.col) { - display: flex; - } + display: flex; } .wizardHeaderLayout { diff --git a/src/extensionConsole/pages/activateMod/ActivateModCard.tsx b/src/extensionConsole/pages/activateMod/ActivateModCard.tsx index 0df976854f..5d270b2921 100644 --- a/src/extensionConsole/pages/activateMod/ActivateModCard.tsx +++ b/src/extensionConsole/pages/activateMod/ActivateModCard.tsx @@ -18,7 +18,7 @@ import styles from "./ActivateModCard.module.scss"; import React, { useState } from "react"; -import { Button, Card, Col, Row } from "react-bootstrap"; +import { Button, Card } from "react-bootstrap"; import { truncate } from "lodash"; import useSetDocumentTitle from "@/hooks/useSetDocumentTitle"; import useActivateRecipeWizard from "@/activation/useActivateRecipeWizard"; @@ -89,34 +89,30 @@ const ActivateModCard: React.FC = () => { - - -
-
- - - - - {mod.metadata.name} - {mod.metadata.id} - -
-
- {mod.metadata.description} -
-
-
- -
- - +
+
+ + + + + {mod.metadata.name} + {mod.metadata.id} + +
+
+ {mod.metadata.description} +
+
+
+ +
{activationError && {activationError}} diff --git a/src/extensionConsole/pages/activateMod/ActivateModPage.tsx b/src/extensionConsole/pages/activateMod/ActivateModPage.tsx index d829483afd..9fbb158a99 100644 --- a/src/extensionConsole/pages/activateMod/ActivateModPage.tsx +++ b/src/extensionConsole/pages/activateMod/ActivateModPage.tsx @@ -18,7 +18,7 @@ import React, { useEffect } from "react"; import Page from "@/layout/Page"; import { faStoreAlt } from "@fortawesome/free-solid-svg-icons"; -import { Card, Col, Row } from "react-bootstrap"; +import { Card } from "react-bootstrap"; import ActivateModCard from "@/extensionConsole/pages/activateMod/ActivateModCard"; import ErrorBoundary from "@/components/ErrorBoundary"; import { Link } from "react-router-dom"; @@ -113,13 +113,11 @@ const ActivateModPage: React.FunctionComponent = () => { isPending={isFetching} error={error} > - - - - - - - +
+ + + +
); }; diff --git a/src/extensionConsole/pages/activateMod/UrlPermissionsList.tsx b/src/extensionConsole/pages/activateMod/UrlPermissionsList.tsx index aa63606c5f..493427f5c1 100644 --- a/src/extensionConsole/pages/activateMod/UrlPermissionsList.tsx +++ b/src/extensionConsole/pages/activateMod/UrlPermissionsList.tsx @@ -18,7 +18,6 @@ import React, { useMemo } from "react"; import { uniq } from "lodash"; import { selectOptionalPermissions } from "@/permissions/permissionsUtils"; -import { Col, Row } from "react-bootstrap"; import useReportError from "@/hooks/useReportError"; import { getErrorMessage } from "@/errors/errorHelpers"; import { type AsyncState } from "@/types/sliceTypes"; @@ -86,21 +85,17 @@ const UrlPermissionsList: React.FunctionComponent< return ( <> - - {helpText} - +

{helpText}

{permissionsList?.length ? ( // Use Table single column table instead of ListGroup to more closely match style on other wizard tabs - - -
URLs
-
    - {permissionsList.map((permission) => ( -
  • {permission}
    • - ))} -
- - + <> +
URLs
+
    + {permissionsList.map((permission) => ( +
  • {permission}
    • + ))} +
+ ) : null} ); diff --git a/src/extensionConsole/pages/activateMod/__snapshots__/ActivateModCard.test.tsx.snap b/src/extensionConsole/pages/activateMod/__snapshots__/ActivateModCard.test.tsx.snap index 4f10e71520..674a6fd9fa 100644 --- a/src/extensionConsole/pages/activateMod/__snapshots__/ActivateModCard.test.tsx.snap +++ b/src/extensionConsole/pages/activateMod/__snapshots__/ActivateModCard.test.tsx.snap @@ -40,134 +40,116 @@ exports[`ActivateModCard activate mod definition permissions 1`] = `
-
- +
@@ -213,274 +195,256 @@ exports[`ActivateModCard activate mod definition with missing required mod defin
-
-
@@ -526,134 +490,116 @@ exports[`ActivateModCard renders 1`] = `

-
- +
@@ -699,146 +645,128 @@ exports[`ActivateModCard renders instructions 1`] = `
-
- +
@@ -884,134 +812,116 @@ exports[`ActivateModCard renders successfully with null services property 1`] =
-
- +
diff --git a/src/extensionConsole/pages/brickEditor/CreatePage.tsx b/src/extensionConsole/pages/brickEditor/CreatePage.tsx index 177f7cb57d..7de1f864dd 100644 --- a/src/extensionConsole/pages/brickEditor/CreatePage.tsx +++ b/src/extensionConsole/pages/brickEditor/CreatePage.tsx @@ -19,7 +19,7 @@ import React from "react"; import { PageTitle } from "@/layout/Page"; import { faHammer } from "@fortawesome/free-solid-svg-icons"; // eslint-disable-next-line no-restricted-imports -- TODO: Fix over time -import { Row, Col, Button, Form } from "react-bootstrap"; +import { Button, Form } from "react-bootstrap"; // eslint-disable-next-line no-restricted-imports -- TODO: Fix over time import { Formik } from "formik"; import Editor, { type EditorValues } from "./Editor"; @@ -60,11 +60,7 @@ const CreatePage: React.FunctionComponent = () => {

- - - - - + )} diff --git a/src/extensionConsole/pages/brickEditor/EditPage.tsx b/src/extensionConsole/pages/brickEditor/EditPage.tsx index cff6a8cbed..5198795321 100644 --- a/src/extensionConsole/pages/brickEditor/EditPage.tsx +++ b/src/extensionConsole/pages/brickEditor/EditPage.tsx @@ -19,7 +19,7 @@ import React, { useEffect, useMemo, useState } from "react"; import { PageTitle } from "@/layout/Page"; import { faHammer } from "@fortawesome/free-solid-svg-icons"; // eslint-disable-next-line no-restricted-imports -- TODO: Fix over time -import { Button, Col, Form, Row } from "react-bootstrap"; +import { Button, Form } from "react-bootstrap"; // eslint-disable-next-line no-restricted-imports -- TODO: Fix over time import { Formik } from "formik"; import { useParams } from "react-router"; @@ -188,11 +188,9 @@ const EditForm: React.FC<{ id: UUID; data: Package }> = ({ id, data }) => { - - - - - +
+ +
)} diff --git a/src/extensionConsole/pages/integrations/IntegrationsPage.tsx b/src/extensionConsole/pages/integrations/IntegrationsPage.tsx index 0b2152928c..65371c8819 100644 --- a/src/extensionConsole/pages/integrations/IntegrationsPage.tsx +++ b/src/extensionConsole/pages/integrations/IntegrationsPage.tsx @@ -21,7 +21,7 @@ import React, { useCallback, useContext, useReducer } from "react"; import { useDispatch, useSelector } from "react-redux"; import integrationsSlice from "@/integrations/store/integrationsSlice"; import Page from "@/layout/Page"; -import { Card, Col, Row } from "react-bootstrap"; +import { Card } from "react-bootstrap"; import { push } from "connected-react-router"; import IntegrationConfigEditorModal from "@/components/integrations/IntegrationConfigEditorModal"; import PrivateIntegrationsCard from "./PrivateIntegrationsCard"; @@ -420,25 +420,15 @@ const IntegrationsPage: React.VFC = () => { localState.isCreateNew ? undefined : onDeleteIntegrationConfig } /> - - - - - - - - - Personal Integrations - - - - + + + Personal Integrations + + ); }; diff --git a/src/extensionConsole/pages/mods/GetStartedView.module.scss b/src/extensionConsole/pages/mods/GetStartedView.module.scss index f3ac56820b..6a2accb727 100644 --- a/src/extensionConsole/pages/mods/GetStartedView.module.scss +++ b/src/extensionConsole/pages/mods/GetStartedView.module.scss @@ -18,25 +18,21 @@ @import "@/themes/colors"; .root { + flex: 1 1 auto; li, p { font-size: 16px; } kbd { - color: $N900; - background: $N0; - border-radius: 4px; - padding: 4.5px 6px; - margin: 0 12px; + margin-inline: 12px; } a { color: $N900; font-weight: 500; - padding-bottom: 1px; - border-bottom: 2px solid $P500; - text-decoration: none; + text-decoration: underline solid 2px $P500; + text-underline-offset: 5px; } .externalLinkIcon { diff --git a/src/extensionConsole/pages/mods/GetStartedView.tsx b/src/extensionConsole/pages/mods/GetStartedView.tsx index b4c9f9fa8c..b78d77ed4f 100644 --- a/src/extensionConsole/pages/mods/GetStartedView.tsx +++ b/src/extensionConsole/pages/mods/GetStartedView.tsx @@ -20,7 +20,6 @@ import styles from "./GetStartedView.module.scss"; import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; -import { Col, Row } from "react-bootstrap"; import useMilestones from "@/hooks/useMilestones"; import { useGetMarketplaceListingsQuery } from "@/services/api"; import { type RegistryId } from "@/types/registryTypes"; @@ -28,6 +27,7 @@ import { useOptionalModDefinition } from "@/modDefinitions/modDefinitionHooks"; import ModIcon from "@/mods/ModIcon"; import { isMac } from "@/utils/browserUtils"; import { MARKETPLACE_URL } from "@/urlConstants"; +import { Card } from "react-bootstrap"; const ExternalLink: React.VoidFunctionComponent<{ linkText: string; @@ -68,13 +68,13 @@ const GetStartedView: React.VoidFunctionComponent<{ const marketplaceUrl = `${homepageUrl}/marketplace/${onboardingModListing?.id}/`; return ( -
- {onboardingModListing && ( - - + + {onboardingModListing && ( +

Success!{" "} {!isFetchingRecipe && ( @@ -102,11 +102,9 @@ const GetStartedView: React.VoidFunctionComponent<{ in the Marketplace for more details about how to use this mod. - - - )} - - +

+ )} +

Want to create a new mod?

  • @@ -128,10 +126,8 @@ const GetStartedView: React.VoidFunctionComponent<{ personal mod.
- - - - +
+

Need more help?

Visit the{" "} @@ -155,9 +151,9 @@ const GetStartedView: React.VoidFunctionComponent<{ />{" "} for ideas.

- - -
+
+ + ); }; diff --git a/src/extensionConsole/pages/mods/__snapshots__/ModsPageLayout.test.tsx.snap b/src/extensionConsole/pages/mods/__snapshots__/ModsPageLayout.test.tsx.snap index 50ad252d4a..0aaf8d1a0d 100644 --- a/src/extensionConsole/pages/mods/__snapshots__/ModsPageLayout.test.tsx.snap +++ b/src/extensionConsole/pages/mods/__snapshots__/ModsPageLayout.test.tsx.snap @@ -221,14 +221,14 @@ exports[`ModsPageLayout renders 1`] = ` style="flex: 1 1 auto;" >

Want to create a new mod? @@ -257,12 +257,8 @@ exports[`ModsPageLayout renders 1`] = `

-
-

Need more help? diff --git a/src/extensionConsole/pages/onboarding/SetupPage.tsx b/src/extensionConsole/pages/onboarding/SetupPage.tsx index 9c6e2a9cae..9a94876490 100644 --- a/src/extensionConsole/pages/onboarding/SetupPage.tsx +++ b/src/extensionConsole/pages/onboarding/SetupPage.tsx @@ -16,7 +16,6 @@ */ import React from "react"; -import { Col, Row } from "react-bootstrap"; import useSetDocumentTitle from "@/hooks/useSetDocumentTitle"; import DefaultSetupCard from "@/extensionConsole/pages/onboarding/DefaultSetupCard"; import { getBaseURL } from "@/services/baseService"; @@ -32,9 +31,7 @@ import { syncRemotePackages } from "@/registry/memoryRegistry"; import useAsyncState from "@/hooks/useAsyncState"; const Layout: React.FunctionComponent = ({ children }) => ( - - {children} - +
{children}
); /** @@ -79,11 +76,7 @@ const SetupPage: React.FunctionComponent = () => { }, []); if (isLoading || isPartnerLoading) { - return ( - - - - ); + return ; } let setupCard = ; diff --git a/src/pageEditor/NonScriptablePage.tsx b/src/pageEditor/NonScriptablePage.tsx index 7900bfba93..173eb48f5f 100644 --- a/src/pageEditor/NonScriptablePage.tsx +++ b/src/pageEditor/NonScriptablePage.tsx @@ -83,6 +83,7 @@ const NonScriptablePage: React.FunctionComponent<{ url: string }> = ({ + {/* Used to align it with the row above */} diff --git a/src/pageEditor/components/DimensionGate.tsx b/src/pageEditor/components/DimensionGate.tsx index b8686701ca..5fbe6fe7ce 100644 --- a/src/pageEditor/components/DimensionGate.tsx +++ b/src/pageEditor/components/DimensionGate.tsx @@ -32,20 +32,12 @@ export const GatePanel: React.FunctionComponent = () => { return (
- - -

- The Page Editor is designed to work with a horizontal orientation. -

- - +

+ The Page Editor is designed to work with a horizontal orientation. +

- - - We recommend docking the DevTools to the bottom of the window. - - - +

We recommend docking the DevTools to the bottom of the window.

+ { - - -

- Click the ‘ - - ’ menu in the top right of the DevTools -

-

- Select the ‘ - DevTools dock bottom icon - ’ (third option) under ‘Dock side’ -

- - - - -
+

+ Click the ‘ + + ’ menu in the top right of the DevTools +

+

+ Select the ‘ + DevTools dock bottom icon + ’ (third option) under ‘Dock side’ +

+
- - - +
); }; diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap index 615444feb5..4745bff059 100644 --- a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap +++ b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap @@ -2014,6 +2014,9 @@ exports[`renders the first selected node 1`] = `
+
diff --git a/src/pageEditor/tabs/editTab/AnalysisResult.tsx b/src/pageEditor/tabs/editTab/AnalysisResult.tsx index b1cea2d578..4c5d78075e 100644 --- a/src/pageEditor/tabs/editTab/AnalysisResult.tsx +++ b/src/pageEditor/tabs/editTab/AnalysisResult.tsx @@ -21,7 +21,7 @@ import { selectAnnotationsForPath, } from "@/pageEditor/slices/editorSelectors"; import React from "react"; -import { Col, Row } from "react-bootstrap"; + import { useSelector } from "react-redux"; const AnalysisResult: React.FunctionComponent = () => { @@ -32,17 +32,15 @@ const AnalysisResult: React.FunctionComponent = () => { } return ( - - - {annotations.map(({ message, type }, index) => ( - - ))} - - + <> + {annotations.map(({ message, type }, index) => ( + + ))} + ); }; diff --git a/src/pageEditor/tabs/editTab/editorNodeConfigPanel/EditorNodeConfigPanel.tsx b/src/pageEditor/tabs/editTab/editorNodeConfigPanel/EditorNodeConfigPanel.tsx index 2085c995ad..399c27e3e5 100644 --- a/src/pageEditor/tabs/editTab/editorNodeConfigPanel/EditorNodeConfigPanel.tsx +++ b/src/pageEditor/tabs/editTab/editorNodeConfigPanel/EditorNodeConfigPanel.tsx @@ -75,7 +75,9 @@ const EditorNodeConfigPanel: React.FC = () => { return ( <> - +
+ +

{brickInfo?.block.name}

diff --git a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.module.scss b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.module.scss index 04e25e1987..085d8f02dd 100644 --- a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.module.scss +++ b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.module.scss @@ -17,8 +17,5 @@ .root { padding-top: 1rem; -} - -.row { align-items: center; } diff --git a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx index 8ca49e2508..7c235bb77f 100644 --- a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx +++ b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.tsx @@ -21,7 +21,7 @@ import { selectActiveRecipeId, selectDirtyMetadataForRecipeId, } from "@/pageEditor/slices/editorSelectors"; -import { Card, Col, Container, Row } from "react-bootstrap"; +import { Card, Container } from "react-bootstrap"; import Loader from "@/components/Loader"; import { getErrorMessage } from "@/errors/errorHelpers"; import { actions } from "@/pageEditor/slices/editorSlice"; @@ -40,6 +40,7 @@ import { useOptionalModDefinition } from "@/modDefinitions/modDefinitionHooks"; import { type ModMetadataFormState } from "@/pageEditor/pageEditorTypes"; import { FieldDescriptions } from "@/modDefinitions/modDefinitionConstants"; import IntegrationsSliceModIntegrationsContextAdapter from "@/integrations/store/IntegrationsSliceModIntegrationsContextAdapter"; +import cx from "classnames"; // TODO: This should be yup.SchemaOf but we can't set the `id` property to `RegistryId` // see: https://github.com/jquense/yup/issues/1183#issuecomment-749186432 @@ -104,15 +105,11 @@ const ModMetadataEditor: React.VoidFunctionComponent = () => { if (isFetching || error) { return ( - - - {isFetching ? ( - - ) : ( -
{getErrorMessage(error)}
- )} - - + {isFetching ? ( + + ) : ( +
{getErrorMessage(error)}
+ )} ); } @@ -165,24 +162,20 @@ const ModMetadataEditor: React.VoidFunctionComponent = () => { ); return ( - - - - -
{ - console.error( - "The form's submit should not be called to save recipe metadata. Use 'saveRecipe' from 'useRecipeSaver' instead.", - ); - }} - renderBody={renderBody} - renderSubmit={() => null} - /> - - - + + + { + console.error( + "The form's submit should not be called to save recipe metadata. Use 'saveRecipe' from 'useRecipeSaver' instead.", + ); + }} + renderBody={renderBody} + renderSubmit={() => null} + /> + ); }; diff --git a/src/pageEditor/tabs/modOptionsDefinitions/ModOptionsDefinitionEditor.tsx b/src/pageEditor/tabs/modOptionsDefinitions/ModOptionsDefinitionEditor.tsx index bf61e58615..0b5f629b14 100644 --- a/src/pageEditor/tabs/modOptionsDefinitions/ModOptionsDefinitionEditor.tsx +++ b/src/pageEditor/tabs/modOptionsDefinitions/ModOptionsDefinitionEditor.tsx @@ -19,7 +19,7 @@ import React, { useCallback, useState } from "react"; import FieldRuntimeContext, { type RuntimeContext, } from "@/components/fields/schemaFields/FieldRuntimeContext"; -import { Card, Col, Container, Nav, Row, Tab } from "react-bootstrap"; +import { Card, Nav, Tab } from "react-bootstrap"; import Loader from "@/components/Loader"; import { isEmpty } from "lodash"; import styles from "./ModOptionsDefinitionEditor.module.scss"; @@ -107,17 +107,13 @@ const ModOptionsDefinitionEditor: React.VFC = () => { if (isFetching || error) { return ( - - - - {isFetching ? ( - - ) : ( -
{getErrorMessage(error)}
- )} - - - +
+ {isFetching ? ( + + ) : ( +
{getErrorMessage(error)}
+ )} +
); } diff --git a/src/pageEditor/tabs/modOptionsValues/ModOptionsValuesEditor.tsx b/src/pageEditor/tabs/modOptionsValues/ModOptionsValuesEditor.tsx index 726ec1201f..863832ec33 100644 --- a/src/pageEditor/tabs/modOptionsValues/ModOptionsValuesEditor.tsx +++ b/src/pageEditor/tabs/modOptionsValues/ModOptionsValuesEditor.tsx @@ -29,7 +29,7 @@ import genericOptionsFactory from "@/components/fields/schemaFields/genericOptio import FieldRuntimeContext, { type RuntimeContext, } from "@/components/fields/schemaFields/FieldRuntimeContext"; -import { Card, Col, Container, Row } from "react-bootstrap"; +import { Card, Container } from "react-bootstrap"; import Form, { type RenderBody } from "@/components/form/Form"; import Loader from "@/components/Loader"; import Alert from "@/components/Alert"; @@ -175,11 +175,7 @@ const ModOptionsValuesContent: React.FC = () => { const ModOptionsValuesEditor: React.FC = () => ( - - - - - + ); diff --git a/src/pageEditor/tabs/modOptionsValues/__snapshots__/ModOptionsValuesEditor.test.tsx.snap b/src/pageEditor/tabs/modOptionsValues/__snapshots__/ModOptionsValuesEditor.test.tsx.snap index 132695f2fb..65de195ff9 100644 --- a/src/pageEditor/tabs/modOptionsValues/__snapshots__/ModOptionsValuesEditor.test.tsx.snap +++ b/src/pageEditor/tabs/modOptionsValues/__snapshots__/ModOptionsValuesEditor.test.tsx.snap @@ -5,88 +5,80 @@ exports[`ModOptionsValuesEditor renders blueprint options with additional props
-
- + Mod Input Options +
+
- Mod Input Options +
+
-
-
- + +
- +
-
+
`; @@ -96,35 +88,27 @@ exports[`ModOptionsValuesEditor renders empty options 1`] = `
-
-
-
-
- Mod Input Options -
-
-
- This mod does not require any configuration -
-
+ Mod Input Options +
+
+
+ This mod does not require any configuration
- +
-
+
`; @@ -134,424 +118,416 @@ exports[`ModOptionsValuesEditor renders mod options 1`] = `
-
-
+ Mod Input Options +
+
- Mod Input Options +
+
-
-
- + +
+
+
+
+
+
+
+ +
-
-
- + +
+
+
+
+
+
+
+ +
-
-
- + +
+
+
+
+
+
+ +
+
-
-
- + +
+
+
+
+
+
+
+ +
-
-
- + +
+
+
+
+
+
+
+ +
-
-
- + +
+
+
+
+
+
+
+ +
-
-
- + +
- +
-
+
`; diff --git a/src/sidebar/DefaultPanel.tsx b/src/sidebar/DefaultPanel.tsx index 4cee2cb0d3..1a40c3ebe7 100644 --- a/src/sidebar/DefaultPanel.tsx +++ b/src/sidebar/DefaultPanel.tsx @@ -19,84 +19,74 @@ import styles from "./DefaultPanel.module.scss"; import React from "react"; import workshopImage from "@img/workshop.svg"; -import { Col, Container, Row } from "react-bootstrap"; +import { Container } from "react-bootstrap"; import useFlags from "@/hooks/useFlags"; import { isMac } from "@/utils/browserUtils"; import { MARKETPLACE_URL } from "@/urlConstants"; const OnboardingContent: React.FunctionComponent = () => ( - - - - - +
+ +
- - -

Get started with PixieBrix

-

- Go to the PixieBrix tab via the Chrome Dev Tools -

-

- {isMac() ? ( - ⌘ + Option + C - ) : ( - Ctrl + Shift + C - )} - or - F12 -

- - +
+

Get started with PixieBrix

+

+ Go to the PixieBrix tab via the Chrome Dev Tools +

+

+ {isMac() ? ( + ⌘ + Option + C + ) : ( + Ctrl + Shift + C + )} + or + F12 +

+
- - -

Need more help?

-

- Visit the{" "} - - Quick Start Guide - {" "} - or ask questions in the{" "} - - Slack Community - - .{" "} -

-

- Visit the{" "} - - PixieBrix Marketplace - {" "} - for ideas. -

- - +
+

Need more help?

+

+ Visit the{" "} + + Quick Start Guide + {" "} + or ask questions in the{" "} + + Slack Community + + .{" "} +

+

+ Visit the{" "} + + PixieBrix Marketplace + {" "} + for ideas. +

+
); const NoAvailablePanelsContent: React.FunctionComponent = () => ( - - -

No panels activated for the page

- - +

+ No panels activated for the page +

- - - Workshop - - +
+ Workshop +
); diff --git a/src/sidebar/LoginPanel.tsx b/src/sidebar/LoginPanel.tsx index af6d5b53ae..67994c6308 100644 --- a/src/sidebar/LoginPanel.tsx +++ b/src/sidebar/LoginPanel.tsx @@ -16,7 +16,7 @@ */ import React from "react"; -import { Button, Col, Container, Row } from "react-bootstrap"; +import { Button, Container } from "react-bootstrap"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSignInAlt } from "@fortawesome/free-solid-svg-icons"; import marketplaceImage from "@img/marketplace.svg"; @@ -27,7 +27,7 @@ import { DEFAULT_SERVICE_URL } from "@/urlConstants"; import { getExtensionConsoleUrl } from "@/utils/extensionUtils"; const DefaultLogin: React.FunctionComponent = () => ( - + <>

Connect PixieBrix Account

Register/log-in to PixieBrix to access your personal and team bricks

@@ -40,11 +40,11 @@ const DefaultLogin: React.FunctionComponent = () => ( > Connect Account - + ); const PartnerAuth: React.FunctionComponent = () => ( - + <>

Connect your AARI account

Authenticate with Automation Anywhere to continue using your team's @@ -58,7 +58,7 @@ const PartnerAuth: React.FunctionComponent = () => ( > Connect Account - + ); const LoginPanel: React.FunctionComponent = () => { @@ -71,15 +71,13 @@ const LoginPanel: React.FunctionComponent = () => { return ( - +

{showPartnerAuth ? : } - +
- - - Marketplace - - +
+ Marketplace +
); }; diff --git a/src/sidebar/Tabs.tsx b/src/sidebar/Tabs.tsx index 9aea9d6e15..c9f096a1bb 100644 --- a/src/sidebar/Tabs.tsx +++ b/src/sidebar/Tabs.tsx @@ -399,7 +399,7 @@ const Tabs: React.FC = () => { mountOnEnter // Allow the user to quickly switch back to the panel unmountOnExit={false} - className={cx("h-100", styles.paneOverrides)} + className={cx("full-height", styles.paneOverrides)} key={staticPanel.key} eventKey={eventKeyForEntry(staticPanel)} > diff --git a/src/sidebar/__snapshots__/ConnectedSidebar.test.tsx.snap b/src/sidebar/__snapshots__/ConnectedSidebar.test.tsx.snap index b1f2dede9b..72d97eadfe 100644 --- a/src/sidebar/__snapshots__/ConnectedSidebar.test.tsx.snap +++ b/src/sidebar/__snapshots__/ConnectedSidebar.test.tsx.snap @@ -75,77 +75,65 @@ exports[`SidebarApp renders 1`] = `
-
-
-
-
-

- We didn't find any mods to run -

-

- Don't worry, there's a solution -

- Workshop -

- Some mods don't run on every page. -
- And other mods don't run in the Sidebar. -
-
- Check that the mod is configured correctly. -

-
-

- Looking for new mods? -
- Check out the - - PixieBrix Marketplace - -

-
-
+
+

+ We didn't find any mods to run +

+

+ Don't worry, there's a solution +

+ Workshop +

+ Some mods don't run on every page. +
+ And other mods don't run in the Sidebar. +
+
+ Check that the mod is configured correctly. +

- +

+
@@ -158,55 +146,47 @@ exports[`SidebarApp renders not connected 1`] = ` class="container" >
-
-

- Connect PixieBrix Account -

-

- Register/log-in to PixieBrix to access your personal and team bricks -

- +

+ Register/log-in to PixieBrix to access your personal and team bricks +

+ + -
+ + + Connect Account +
-
- Marketplace -
+ Marketplace
@@ -218,55 +198,47 @@ exports[`SidebarApp renders not connected partner view 1`] = ` class="container" >
-
-

- Connect your AARI account -

-

- Authenticate with Automation Anywhere to continue using your team's AARI extensions -

- +

+ Authenticate with Automation Anywhere to continue using your team's AARI extensions +

+ + -
+ + + Connect Account +
-
- Marketplace -
+ Marketplace
diff --git a/src/sidebar/__snapshots__/SidebarBody.test.tsx.snap b/src/sidebar/__snapshots__/SidebarBody.test.tsx.snap index 01d0b8aeeb..20e0b4c462 100644 --- a/src/sidebar/__snapshots__/SidebarBody.test.tsx.snap +++ b/src/sidebar/__snapshots__/SidebarBody.test.tsx.snap @@ -64,55 +64,47 @@ exports[`SidebarBody it renders 1`] = ` class="container" >
-
-

- Connect PixieBrix Account -

-

- Register/log-in to PixieBrix to access your personal and team bricks -

- +

+ Register/log-in to PixieBrix to access your personal and team bricks +

+ + -
+ + + Connect Account +
-
- Marketplace -
+ Marketplace
diff --git a/src/sidebar/modLauncher/ActiveSidebarModsList.tsx b/src/sidebar/modLauncher/ActiveSidebarModsList.tsx index fb040de787..aae2ee71b1 100644 --- a/src/sidebar/modLauncher/ActiveSidebarModsList.tsx +++ b/src/sidebar/modLauncher/ActiveSidebarModsList.tsx @@ -17,7 +17,7 @@ import styles from "@/sidebar/modLauncher/ActiveSidebarModsList.module.scss"; import React, { useMemo } from "react"; -import { ListGroup, Row } from "react-bootstrap"; +import { ListGroup } from "react-bootstrap"; import { type Column, useTable } from "react-table"; import ActiveSidebarModsListItem from "@/sidebar/modLauncher/ActiveSidebarModsListItem"; import { isEmpty, sortBy } from "lodash"; @@ -119,18 +119,19 @@ export const ActiveSidebarModsList: React.FunctionComponent = () => { } return ( - - - {tableInstance.rows.map((row) => { - tableInstance.prepareRow(row); - return ( - - ); - })} - - + + {tableInstance.rows.map((row) => { + tableInstance.prepareRow(row); + return ( + + ); + })} + ); }; diff --git a/src/sidebar/modLauncher/ModLauncher.tsx b/src/sidebar/modLauncher/ModLauncher.tsx index 6dbe231e48..b9f5152eea 100644 --- a/src/sidebar/modLauncher/ModLauncher.tsx +++ b/src/sidebar/modLauncher/ModLauncher.tsx @@ -17,7 +17,8 @@ import styles from "./ModLauncher.module.scss"; import React from "react"; -import { Container, Navbar } from "react-bootstrap"; +import cx from "classnames"; +import { Navbar } from "react-bootstrap"; import { ActiveSidebarModsList } from "@/sidebar/modLauncher/ActiveSidebarModsList"; import useFlags from "@/hooks/useFlags"; import reportEvent from "@/telemetry/reportEvent"; @@ -29,14 +30,10 @@ const ModLauncher: React.FunctionComponent = () => { const { permit } = useFlags(); return ( -
-
- - - -
+ <> + {permit("page-editor") && ( - +
+ ); };