Skip to content

Commit

Permalink
#2315 Mark element dirty in redux state after auto-upgrading an exten…
Browse files Browse the repository at this point in the history 
…sion to v3 (#2353)
  • Loading branch information
@BLoe
BLoe committed Jan 11, 2022
1 parent e68c9e9 commit 2727c1c
Show file tree
Hide file tree
Showing 11 changed files with 46 additions and 105 deletions.
26 changes: 25 additions & 1 deletion src/devTools/editor/ElementWizard.tsx
View file
Expand Up @@ -19,7 +19,7 @@ import React, { useCallback, useContext, useMemo, useState } from "react";
import { useFormikContext } from "formik";
import { groupBy } from "lodash";
import { Badge, Form as BootstrapForm, Nav, Tab } from "react-bootstrap";
import { FormState } from "@/devTools/editor/slices/editorSlice";
import { actions, FormState } from "@/devTools/editor/slices/editorSlice";
import { useAsyncState } from "@/hooks/common";
import ReloadToolbar from "@/devTools/editor/toolbar/ReloadToolbar";
import ActionToolbar from "@/devTools/editor/toolbar/ActionToolbar";
Expand All @@ -32,6 +32,10 @@ import { thisTab } from "@/devTools/utils";
import { checkAvailable } from "@/contentScript/messenger/api";
import EditTab from "@/devTools/editor/tabs/editTab/EditTab";
import useSavingWizard from "./panes/save/useSavingWizard";
import { useDispatch } from "react-redux";
import { produce } from "immer";
import { useAsyncEffect } from "use-async-effect";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

const LOG_STEP_NAME = "Logs";

Expand Down Expand Up @@ -121,6 +125,26 @@ const ElementWizard: React.FunctionComponent<{
[setStep, refreshLogs]
);

const {
values: formState,
setValues: setFormState,
} = useFormikContext<FormState>();

const dispatch = useDispatch();

useAsyncEffect(async () => {
if (formState.apiVersion === "v2") {
const newState = await produce(formState, async (draft) => {
draft.extension.blockPipeline = await upgradePipelineToV3(
draft.extension.blockPipeline
);
draft.apiVersion = "v3";
});
setFormState(newState);
dispatch(actions.showV3UpgradeMessage());
}
}, []);

return (
<Tab.Container activeKey={step} key={element.uuid}>
<BootstrapForm
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/actionPanel.tsx
View file
Expand Up @@ -50,7 +50,6 @@ import {
} from "@/devTools/editor/extensionPoints/elementConfig";
import React from "react";
import { Except } from "type-fest";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

type Extension = BaseExtensionState & Except<ActionPanelConfig, "body">;

Expand Down Expand Up @@ -139,7 +138,6 @@ export async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type: extensionPoint.definition.type,
label: heading,
Expand Down Expand Up @@ -176,23 +174,10 @@ async function fromExtension(

const base = baseFromExtension(config, extensionPoint.definition.type);
const extension = extensionWithNormalizedPipeline(config.config, "body");
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

extensionPoint: {
Expand Down
1 change: 0 additions & 1 deletion src/devTools/editor/extensionPoints/base.ts
View file
Expand Up @@ -164,7 +164,6 @@ export function makeInitialBaseState(
return {
uuid,
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
services: [],
optionsArgs: {},
extension: {
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/contextMenu.tsx
View file
Expand Up @@ -55,7 +55,6 @@ import { NormalizedAvailability } from "@/blocks/types";
import React from "react";
import ContextMenuConfiguration from "@/devTools/editor/tabs/contextMenu/ContextMenuConfiguration";
import { Except } from "type-fest";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

type Extension = BaseExtensionState & Except<ContextMenuConfig, "action">;

Expand Down Expand Up @@ -168,23 +167,10 @@ async function fromExtension(

const base = baseFromExtension(config, extensionPoint.definition.type);
const extension = extensionWithNormalizedPipeline(config.config, "action");
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

extensionPoint: {
Expand Down Expand Up @@ -221,7 +207,6 @@ async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type,
label: `My ${getDomain(url)} context menu`,
Expand Down
6 changes: 0 additions & 6 deletions src/devTools/editor/extensionPoints/elementConfig.ts
View file
Expand Up @@ -71,12 +71,6 @@ export interface BaseFormState<
*/
readonly apiVersion: ApiVersion;

/**
* Are we currently showing the info message to users about upgrading from v2 to v3 of
* the runtime api for this extension?
*/
readonly showV3UpgradeMessage: boolean;

/**
* The extension uuid
*/
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/menuItem.ts
View file
Expand Up @@ -58,7 +58,6 @@ import { NormalizedAvailability } from "@/blocks/types";
import MenuItemConfiguration from "@/devTools/editor/tabs/menuItem/MenuItemConfiguration";
import { insertButton } from "@/contentScript/messenger/api";
import { Except } from "type-fest";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

type Extension = BaseExtensionState & Except<MenuItemExtensionConfig, "action">;

Expand Down Expand Up @@ -164,7 +163,6 @@ async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type: extensionPoint.definition.type,
label: `My ${getDomain(url)} button`,
Expand Down Expand Up @@ -209,23 +207,10 @@ export async function fromExtension(

const base = baseFromExtension(config, extensionPoint.definition.type);
const extension = extensionWithNormalizedPipeline(config.config, "action");
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

// `containerInfo` only populated on initial creation session
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/panel.ts
View file
Expand Up @@ -56,7 +56,6 @@ import { NormalizedAvailability } from "@/blocks/types";
import PanelConfiguration from "@/devTools/editor/tabs/panel/PanelConfiguration";
import { insertPanel } from "@/contentScript/messenger/api";
import { Except } from "type-fest";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

export type PanelTraits = {
style: {
Expand Down Expand Up @@ -179,7 +178,6 @@ async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type: "panel",
label: `My ${getDomain(url)} panel`,
Expand Down Expand Up @@ -226,23 +224,10 @@ async function fromExtension(
const extension = extensionWithNormalizedPipeline(config.config, "body", {
heading: "",
});
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

containerInfo: null,
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/quickBar.tsx
View file
Expand Up @@ -55,7 +55,6 @@ import {
QuickBarTargetMode,
} from "@/extensionPoints/quickBarExtension";
import QuickBarConfiguration from "@/devTools/editor/tabs/quickBar/QuickBarConfiguration";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

type Extension = BaseExtensionState & Except<QuickBarConfig, "action">;

Expand Down Expand Up @@ -167,23 +166,10 @@ async function fromExtension(

const base = baseFromExtension(config, extensionPoint.definition.type);
const extension = extensionWithNormalizedPipeline(config.config, "action");
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

extensionPoint: {
Expand Down Expand Up @@ -220,7 +206,6 @@ async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type,
label: `My ${getDomain(url)} quick bar item`,
Expand Down
15 changes: 0 additions & 15 deletions src/devTools/editor/extensionPoints/trigger.tsx
View file
Expand Up @@ -54,7 +54,6 @@ import {
import { NormalizedAvailability } from "@/blocks/types";
import React from "react";
import TriggerConfiguration from "@/devTools/editor/tabs/trigger/TriggerConfiguration";
import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";

export interface TriggerFormState extends BaseFormState {
type: "trigger";
Expand Down Expand Up @@ -174,7 +173,6 @@ async function fromExtensionPoint(
return {
uuid: uuidv4(),
apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
showV3UpgradeMessage: false,
installed: true,
type,
label: `My ${getDomain(url)} ${trigger} trigger`,
Expand Down Expand Up @@ -224,23 +222,10 @@ async function fromExtension(

const base = baseFromExtension(config, extensionPoint.definition.type);
const extension = extensionWithNormalizedPipeline(config.config, "action");
let showV3UpgradeMessage = false;
let { apiVersion } = base;

if (apiVersion === "v2") {
extension.blockPipeline = await upgradePipelineToV3(
extension.blockPipeline
);
showV3UpgradeMessage = true;
apiVersion = "v3";
}

return {
...base,

apiVersion,
showV3UpgradeMessage,

extension,

extensionPoint: {
Expand Down
13 changes: 13 additions & 0 deletions src/devTools/editor/slices/editorSlice.ts
View file
Expand Up @@ -95,6 +95,12 @@ export interface EditorState {
* A clipboard-style-copy of a block ready to paste into an extension
*/
copiedBlock?: BlockConfig;

/**
* Are we currently showing the info message to users about upgrading from v2 to v3 of
* the runtime api for this extension?
*/
showV3UpgradeMessage: boolean;
}

export const initialState: EditorState = {
Expand All @@ -108,6 +114,7 @@ export const initialState: EditorState = {
inserting: null,
isBetaUI: false,
elementUIStates: {},
showV3UpgradeMessage: false,
};

/* eslint-disable security/detect-object-injection, @typescript-eslint/no-dynamic-delete -- lots of immer-style code here dealing with Records */
Expand Down Expand Up @@ -363,6 +370,12 @@ export const editorSlice = createSlice({
clearCopiedBlockConfig: (state) => {
delete state.copiedBlock;
},
showV3UpgradeMessage: (state) => {
state.showV3UpgradeMessage = true;
},
hideV3UpgradeMessage: (state) => {
state.showV3UpgradeMessage = false;
},
},
});
/* eslint-enable security/detect-object-injection, @typescript-eslint/no-dynamic-delete -- re-enable rule */
Expand Down
15 changes: 8 additions & 7 deletions src/devTools/editor/tabs/editTab/UpgradedToApiV3.tsx
View file
Expand Up @@ -16,21 +16,22 @@
*/

import React from "react";
import { useField } from "formik";
import { Alert } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faExclamationCircle,
faTimes,
} from "@fortawesome/free-solid-svg-icons";
import styles from "./UpgradedToApiV3.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/devTools/store";
import { actions } from "@/devTools/editor/slices/editorSlice";

const UpgradedToApiV3: React.FC = () => {
const [
{ value: showMessage },
,
{ setValue: setShowMessage },
] = useField<boolean>("showV3UpgradeMessage");
const showMessage = useSelector<RootState, boolean>(
(root) => root.editor.showV3UpgradeMessage
);
const dispatch = useDispatch();

return (
showMessage && (
Expand All @@ -56,7 +57,7 @@ const UpgradedToApiV3: React.FC = () => {
type="button"
className={styles.close}
onClick={() => {
setShowMessage(false);
dispatch(actions.hideV3UpgradeMessage());
}}
>
<FontAwesomeIcon icon={faTimes} />
Expand Down

0 comments on commit 2727c1c

Please sign in to comment.