#8761: update internal/external naming from brick to package in the Workshop

end-to-end-tests/pageObjects/extensionConsole/workshop/createWorkshopModPage.ts

@@ -21,6 +21,6 @@ import { BasePageObject } from "../../basePageObject";
 export class CreateWorkshopModPage extends BasePageObject {
   editor = new WorkshopModEditor(this.getByLabel("Editor"));
   createBrickButton = this.getByRole("button", {
-    name: "Create Brick",
+    name: "Create Package",
   });
 }

end-to-end-tests/pageObjects/extensionConsole/workshop/editWorkshopModPage.ts

@@ -22,11 +22,11 @@ export class EditWorkshopModPage extends BasePageObject {
   editor = new WorkshopModEditor(this.getByLabel("Editor"));
 
   async updateBrick() {
-    await this.getByRole("button", { name: "Update Brick" }).click();
+    await this.getByRole("button", { name: "Update Package" }).click();
   }
 
   async deleteBrick() {
-    await this.getByRole("button", { name: "Delete Brick" }).click();
+    await this.getByRole("button", { name: "Delete Package" }).click();
     await this.getByRole("button", { name: "Permanently Delete" }).click();
     // eslint-disable-next-line playwright/no-networkidle -- for some reason, can't assert on the "Brick deleted" notice
     await this.page.waitForLoadState("networkidle");

end-to-end-tests/pageObjects/extensionConsole/workshop/workshopPage.ts

@@ -24,8 +24,8 @@ import { BasePageObject } from "../../basePageObject";
 export class WorkshopPage extends BasePageObject {
   private readonly extensionConsoleUrl: string;
 
-  createNewBrickButton = this.getByRole("button", {
-    name: "Create New Brick",
+  createNewPackageButton = this.getByRole("button", {
+    name: "Create New Package",
   });
 
   constructor(page: Page, extensionId: string) {
@@ -50,7 +50,7 @@ export class WorkshopPage extends BasePageObject {
   }
 
   async createNewModFromDefinition(modDefinitionName: string) {
-    await this.createNewBrickButton.click();
+    await this.createNewPackageButton.click();
     const createPage = new CreateWorkshopModPage(this.page);
     await createPage.editor.waitForLoad();
     const modId =

src/components/brickModalNoTags/BrickResult.tsx

@@ -20,7 +20,7 @@ import { Button, ListGroup } from "react-bootstrap";
 import cx from "classnames";
 // TODO: Refactor to properly share styles across components (e.g. full component inheritance);
 //   the "brickEditor/referenceTab/BlockResult" component probably doesn't expect to also affect a global component
-import styles from "@/extensionConsole/pages/brickEditor/referenceTab/BrickResult.module.scss";
+import styles from "@/extensionConsole/pages/packageEditor/referenceTab/PackageResult.module.scss";
 import BrickIcon from "@/components/BrickIcon";
 import { OfficialBadge } from "@/components/OfficialBadge";
 import { type Metadata } from "@/types/registryTypes";

src/components/paginatedTable/PaginatedTable.tsx

@@ -312,10 +312,12 @@ function PaginatedTable<
               {Math.min(rowNumber + pageSize - 1, rows.length)} of {rows.length}
             </div>
             <div className="flex-grow-1 px-3">
-              <SearchFilter
-                style={{ maxWidth: 300 }}
-                setGlobalFilter={setGlobalFilter}
-              />
+              {showSearchFilter && (
+                <SearchFilter
+                  style={{ maxWidth: 300 }}
+                  setGlobalFilter={setGlobalFilter}
+                />
+              )}
             </div>
 
             <Pagination className="m-0">

src/extensionConsole/App.tsx

@@ -22,8 +22,8 @@ import { PersistGate } from "redux-persist/integration/react";
 import { Container } from "react-bootstrap";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import ServicesEditor from "@/extensionConsole/pages/integrations/IntegrationsPage";
-import BrickCreatePage from "@/extensionConsole/pages/brickEditor/CreatePage";
-import BrickEditPage from "@/extensionConsole/pages/brickEditor/EditPage";
+import BrickCreatePage from "@/extensionConsole/pages/packageEditor/CreatePage";
+import BrickEditPage from "@/extensionConsole/pages/packageEditor/EditPage";
 import ModsPage from "@/extensionConsole/pages/mods/ModsPage";
 import SettingsPage from "@/extensionConsole/pages/settings/SettingsPage";
 import Navbar from "@/extensionConsole/Navbar";

src/extensionConsole/pages/brickEditor/CreatePage.tsx → src/extensionConsole/pages/packageEditor/CreatePage.tsx

@@ -23,7 +23,7 @@ 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";
-import useSubmitBrick from "./useSubmitBrick";
+import useSubmitPackage from "./useSubmitPackage";
 import useSetDocumentTitle from "@/hooks/useSetDocumentTitle";
 
 const initialValue: EditorValues = {
@@ -33,9 +33,9 @@ const initialValue: EditorValues = {
 };
 
 const CreatePage: React.FunctionComponent = () => {
-  useSetDocumentTitle("Create Brick");
+  useSetDocumentTitle("Create Package");
 
-  const { submit, validate } = useSubmitBrick({
+  const { submit, validate } = useSubmitPackage({
     create: true,
   });
 
@@ -47,19 +47,19 @@ const CreatePage: React.FunctionComponent = () => {
             <div className="flex-grow-1">
               <PageTitle
                 icon={faHammer}
-                title="Create New Brick"
+                title="Create New Package"
                 documentationUrl="https://docs.pixiebrix.com/developing-mods/advanced-workshop"
               />
             </div>
             <div className="flex-grow-1 text-right">
               <Button disabled={!isValid} type="submit">
-                {values.public ? "Publish Brick" : "Create Brick"}
+                {values.public ? "Publish Package" : "Create Package"}
               </Button>
             </div>
           </div>
           <div className="pb-4">
             <p>
-              Create a new brick and optionally share it with your teammates
+              Create a new package and optionally share it with your teammates
               and/or the PixieBrix community
             </p>
           </div>

src/extensionConsole/pages/brickEditor/EditPage.tsx → src/extensionConsole/pages/packageEditor/EditPage.tsx

@@ -26,13 +26,13 @@ import { useParams } from "react-router";
 import Editor from "./Editor";
 import { truncate } from "lodash";
 import Loader from "@/components/Loader";
-import useSubmitBrick from "./useSubmitBrick";
+import useSubmitPackage from "./useSubmitPackage";
 import { useDispatch, useSelector } from "react-redux";
 import { selectActivatedModComponents } from "@/store/extensionsSelectors";
 import useSetDocumentTitle from "@/hooks/useSetDocumentTitle";
 import { HotKeys } from "react-hotkeys";
 import workshopSlice from "@/store/workshopSlice";
-import useLogContext from "@/extensionConsole/pages/brickEditor/useLogContext";
+import useLogContext from "@/extensionConsole/pages/packageEditor/useLogContext";
 import { loadBrickYaml } from "@/runtime/brickYaml";
 import BooleanWidget from "@/components/fields/schemaFields/widgets/BooleanWidget";
 import { type Package } from "@/types/contract";
@@ -41,46 +41,46 @@ import useIsMounted from "@/hooks/useIsMounted";
 import { type UUID } from "@/types/stringTypes";
 import { type Definition, DefinitionKinds } from "@/types/registryTypes";
 
-const { touchBrick } = workshopSlice.actions;
+const { touchPackage } = workshopSlice.actions;
 
-type ParsedBrickInfo = {
-  isBlueprint: boolean;
-  isInstalled: boolean;
+type ParsedPackageInfo = {
+  isMod: boolean;
+  isActivated: boolean;
   config: Definition;
 };
 
-function useParseBrick(config: string | null): ParsedBrickInfo {
-  const extensions = useSelector(selectActivatedModComponents);
+function useParsePackage(config: string | null): ParsedPackageInfo {
+  const activatedModComponents = useSelector(selectActivatedModComponents);
 
   return useMemo(() => {
     if (config == null) {
-      return { isBlueprint: false, isInstalled: false, config: undefined };
+      return { isMod: false, isActivated: false, config: undefined };
     }
 
     const configJSON = loadBrickYaml(config) as Definition;
     const isBlueprint = configJSON.kind === DefinitionKinds.MOD;
     if (isBlueprint) {
       return {
-        isBlueprint: true,
-        isInstalled: extensions.some(
+        isMod: true,
+        isActivated: activatedModComponents.some(
           (x) => x._recipe?.id === configJSON.metadata?.id,
         ),
         config: configJSON,
       };
     }
 
-    return { isBlueprint: false, isInstalled: false, config: configJSON };
-  }, [config, extensions]);
+    return { isMod: false, isActivated: false, config: configJSON };
+  }, [config, activatedModComponents]);
 }
 
 const LoadingBody: React.FC = () => (
   <>
     <div className="d-flex">
       <div className="flex-grow-1">
-        <PageTitle icon={faHammer} title="Edit Brick" />
+        <PageTitle icon={faHammer} title="Edit Package" />
       </div>
       <div className="flex-grow-1 text-right">
-        <Button disabled>Update Brick</Button>
+        <Button disabled>Update Package</Button>
       </div>
     </div>
     <div>
@@ -94,55 +94,55 @@ const keyMap = {
 };
 
 /**
- * Hook to mark the brick as touched in the Redux state (For showing recently edited bricks).
+ * Hook to mark the package as touched in the Redux state (For showing recently edited packages).
  */
-function useTouchBrick(id: UUID): void {
+function useTouchPackage(packageId: UUID): void {
   const dispatch = useDispatch();
   useEffect(() => {
-    console.debug("Marking brick as touched: %s", id);
-    dispatch(touchBrick({ id }));
-  }, [dispatch, id]);
+    console.debug("Marking package as touched: %s", packageId);
+    dispatch(touchPackage({ id: packageId }));
+  }, [dispatch, packageId]);
 }
 
 const EditForm: React.FC<{ id: UUID; data: Package }> = ({ id, data }) => {
   const {
-    isBlueprint,
-    isInstalled,
+    isMod,
+    isActivated,
     config: rawConfig,
-  } = useParseBrick(data.config);
+  } = useParsePackage(data.config);
 
   const name = rawConfig.metadata?.name;
 
-  const { submit, validate, remove } = useSubmitBrick({
+  const { submit, validate, remove } = useSubmitPackage({
     create: false,
   });
 
   const isMounted = useIsMounted();
 
-  const [isRemoving, setIsRemovingBrick] = useState(false);
+  const [isRemoving, setIsRemovingPackage] = useState(false);
   const onRemove = async () => {
-    setIsRemovingBrick(true);
+    setIsRemovingPackage(true);
     await remove({ id, name });
 
     // If the brick has been removed, the app will navigate away from this page,
     // so we need to check if the component is still mounted
     if (isMounted()) {
-      setIsRemovingBrick(false);
+      setIsRemovingPackage(false);
     }
   };
 
   useLogContext(data.config);
 
   useSetDocumentTitle(
-    name ? `Edit ${truncate(name, { length: 15 })}` : "Edit Brick",
+    name ? `Edit ${truncate(name, { length: 15 })}` : "Edit Package",
   );
 
   return (
     <HotKeys keyMap={keyMap}>
       <Formik
         onSubmit={submit}
         validate={validate}
-        initialValues={{ ...data, reactivate: isBlueprint && isInstalled }}
+        initialValues={{ ...data, reactivate: isMod && isActivated }}
       >
         {({ values, isValid, handleSubmit, isSubmitting }) => (
           <HotKeys
@@ -158,13 +158,13 @@ const EditForm: React.FC<{ id: UUID; data: Package }> = ({ id, data }) => {
                 <div className="flex-grow-1">
                   <PageTitle
                     icon={faHammer}
-                    title="Edit Brick"
+                    title="Edit Package"
                     documentationUrl="https://docs.pixiebrix.com/developing-mods/advanced-workshop"
                   />
                 </div>
                 <div className="flex-grow-1 EditPage__toolbar">
                   <div className="d-flex justify-content-end">
-                    {isBlueprint && isInstalled && (
+                    {isMod && isActivated && (
                       <div className="mr-4 my-auto">
                         <BooleanWidget
                           name="reactivate"
@@ -177,14 +177,14 @@ const EditForm: React.FC<{ id: UUID; data: Package }> = ({ id, data }) => {
                       disabled={!isValid || isSubmitting || isRemoving}
                       type="submit"
                     >
-                      {values.public ? "Publish Brick" : "Update Brick"}
+                      {values.public ? "Publish Package" : "Update Package"}
                     </Button>
                     <Button
                       disabled={isSubmitting || isRemoving}
                       variant="danger"
                       onClick={onRemove}
                     >
-                      Delete Brick
+                      Delete Package
                     </Button>
                   </div>
                 </div>
@@ -205,7 +205,7 @@ const EditPage: React.FC = () => {
   const { data, isFetching, error } = useGetPackageQuery({ id });
 
   // Can mark the brick as recently opened even if it errors on load
-  useTouchBrick(id);
+  useTouchPackage(id);
 
   if (error) {
     throw error;

src/extensionConsole/pages/brickEditor/Editor.test.tsx → src/extensionConsole/pages/packageEditor/Editor.test.tsx

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useOpenEditorTab } from "@/extensionConsole/pages/brickEditor/Editor";
+import { useOpenEditorTab } from "@/extensionConsole/pages/packageEditor/Editor";
 import { editablePackageMetadataFactory } from "@/testUtils/factories/registryFactories";
 import { getExtensionConsoleUrl } from "@/utils/extensionUtils";
 import { validateRegistryId } from "@/types/helpers";