slice-machine-ui 2.17.3-alpha.jp-field-type.1 → 2.17.3-alpha.jp-logout.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.17.3-alpha.jp-field-type.1",
+  "version": "2.17.3-alpha.jp-logout.3",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -35,16 +35,16 @@
     "start-slicemachine": "./bin/start-slicemachine.cjs"
   },
   "dependencies": {
-    "@slicemachine/manager": "0.25.2-alpha.jp-field-type.1",
-    "start-slicemachine": "0.12.60-alpha.jp-field-type.1"
+    "@slicemachine/manager": "0.25.2-alpha.jp-logout.5",
+    "start-slicemachine": "0.12.60-alpha.jp-logout.5"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.17.0",
-    "@prismicio/editor-fields": "0.4.77",
-    "@prismicio/editor-support": "0.4.77",
-    "@prismicio/editor-ui": "0.4.77",
+    "@prismicio/editor-fields": "0.4.85",
+    "@prismicio/editor-support": "0.4.85",
+    "@prismicio/editor-ui": "0.4.85",
     "@prismicio/mock": "0.7.1",
     "@prismicio/mocks": "2.14.0",
     "@prismicio/simulator": "0.1.4",

package/src/apiClient.ts

@@ -163,7 +163,7 @@ export const pushChanges: SliceMachineManagerClient["prismicRepository"]["pushCh
 
 /** Auth Routes * */
 
-export const startAuth = async (): Promise<void> => {
+export const logout = async (): Promise<void> => {
   return await managerClient.user.logout();
 };
 

package/src/domain/fields.ts

@@ -34,44 +34,12 @@ export interface GroupField extends BaseField {
 
 export type Field = NestableField | UIDField | GroupField;
 
-export type CustomFieldType =
-  | FieldType
-  | "LinkToMedia"
-  | "ContentRelationship"
-  | "NestedGroup";
-
-export const fieldLabels: Record<CustomFieldType, string> = {
-  Text: "Text",
-  StructuredText: "Rich Text",
-  Boolean: "Boolean",
-  Number: "Number",
-  Select: "Select",
-  Link: "Link",
-  LinkToMedia: "Link To Media",
-  UID: "UID",
-  Image: "Image",
-  Group: "Repeatable Group",
-  NestedGroup: "Nested Group",
-  Color: "Color",
-  Date: "Date",
-  Table: "Table",
-  Timestamp: "Timestamp",
-  Embed: "Embed",
-  GeoPoint: "Geopoint",
-  ContentRelationship: "Content Relationship",
-  IntegrationFields: "Integration Fields",
-  Range: "Range",
-  Separator: "Separator",
-  Slices: "Slices",
-  Choice: "Choice",
-};
-
 /**
  * Nestable fields
  */
 
 export const booleanField: NestableField = {
-  name: fieldLabels.Boolean,
+  name: "Boolean",
   description: "A true or false toggle.",
   icon: "toggleOff",
   thumbnail:
@@ -80,7 +48,7 @@ export const booleanField: NestableField = {
 };
 
 export const colorField: NestableField = {
-  name: fieldLabels.Color,
+  name: "Color",
   description: "A color in hex format.",
   icon: "colorLens",
   thumbnail:
@@ -89,7 +57,7 @@ export const colorField: NestableField = {
 };
 
 export const dateField: NestableField = {
-  name: fieldLabels.Date,
+  name: "Date",
   description: "A date without time.",
   icon: "dateRange",
   thumbnail:
@@ -98,7 +66,7 @@ export const dateField: NestableField = {
 };
 
 export const embedField: NestableField = {
-  name: fieldLabels.Embed,
+  name: "Embed",
   description: "A video, song, or oEmbed link.",
   icon: "code",
   thumbnail:
@@ -107,7 +75,7 @@ export const embedField: NestableField = {
 };
 
 export const geoPointField: NestableField = {
-  name: fieldLabels.GeoPoint,
+  name: "Geopoint",
   description: "A geographical coordinate.",
   icon: "place",
   thumbnail:
@@ -116,7 +84,7 @@ export const geoPointField: NestableField = {
 };
 
 export const imageField: NestableField = {
-  name: fieldLabels.Image,
+  name: "Image",
   description: "A responsive image.",
   icon: "image",
   thumbnail:
@@ -125,7 +93,7 @@ export const imageField: NestableField = {
 };
 
 export const LinkField: NestableField = {
-  name: fieldLabels.Link,
+  name: "Link",
   description: "A link to a website, asset, or document.",
   icon: "link",
   thumbnail:
@@ -134,7 +102,7 @@ export const LinkField: NestableField = {
 };
 
 export const contentRelationshipField: NestableField = {
-  name: fieldLabels.ContentRelationship,
+  name: "Content Relationship",
   description: "A reference to a Prismic document.",
   icon: "settingsEthernet",
   thumbnail:
@@ -144,7 +112,7 @@ export const contentRelationshipField: NestableField = {
 };
 
 export const LinkToMediaField: NestableField = {
-  name: fieldLabels.LinkToMedia,
+  name: "Link To Media",
   description: "A link to a media asset.",
   icon: "attachFile",
   thumbnail:
@@ -154,7 +122,7 @@ export const LinkToMediaField: NestableField = {
 };
 
 export const numberField: NestableField = {
-  name: fieldLabels.Number,
+  name: "Number",
   description: "An integer or float.",
   icon: "pin",
   thumbnail:
@@ -163,7 +131,7 @@ export const numberField: NestableField = {
 };
 
 export const richTextField: NestableField = {
-  name: fieldLabels.StructuredText,
+  name: "Rich Text",
   description: "Text with formatting options.",
   icon: "textFields",
   thumbnail:
@@ -172,7 +140,7 @@ export const richTextField: NestableField = {
 };
 
 export const selectField: NestableField = {
-  name: fieldLabels.Select,
+  name: "Select",
   description: "A dropdown of options.",
   icon: "arrowDropDownCircle",
   thumbnail:
@@ -181,7 +149,7 @@ export const selectField: NestableField = {
 };
 
 export const tableField: NestableField = {
-  name: fieldLabels.Table,
+  name: "Table",
   description: "A structured table.",
   icon: "table",
   thumbnail:
@@ -190,7 +158,7 @@ export const tableField: NestableField = {
 };
 
 export const textField: NestableField = {
-  name: fieldLabels.Text,
+  name: "Text",
   description: "A text string without formatting.",
   icon: "title",
   thumbnail:
@@ -199,7 +167,7 @@ export const textField: NestableField = {
 };
 
 export const timestampField: NestableField = {
-  name: fieldLabels.Timestamp,
+  name: "Timestamp",
   description: "A date and time.",
   icon: "schedule",
   thumbnail:
@@ -230,7 +198,7 @@ export const nestableFields: NestableField[] = [
  */
 
 export const UIDField: UIDField = {
-  name: fieldLabels.UID,
+  name: "UID",
   description: "Unique Identifier",
   icon: "tag",
   thumbnail:
@@ -243,7 +211,7 @@ export const UIDField: UIDField = {
  */
 
 export const groupField: GroupField = {
-  name: fieldLabels.Group,
+  name: "Repeatable Group",
   description: "A set of fields that editors can repeat.",
   icon: "createNewFolder",
   thumbnail:

package/src/features/auth/LogoutButton.tsx

@@ -0,0 +1,32 @@
+import { IconButton, Tooltip } from "@prismicio/editor-ui";
+import { toast } from "react-toastify";
+
+import { logout as managerLogout } from "@/apiClient";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+export function LogoutButton() {
+  const { logout: storeLogout } = useSliceMachineActions();
+
+  async function onClick() {
+    await managerLogout();
+    storeLogout();
+
+    // refresh queries to update the UI
+    invalidateEnvironmentsData();
+    invalidateActiveEnvironmentData();
+
+    toast.success("Logged out");
+  }
+
+  return (
+    <Tooltip content="Log out" side="right">
+      <IconButton
+        icon="logout"
+        onClick={() => void onClick()}
+        hiddenLabel="Log out"
+      />
+    </Tooltip>
+  );
+}

package/src/features/environments/useActiveEnvironment.ts

@@ -1,7 +1,15 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  Fetcher,
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getActiveEnvironment } from "./actions/getActiveEnvironment";
 
+export function invalidateActiveEnvironmentData() {
+  invalidateFetcherData(getActiveEnvironment as Fetcher<undefined[], unknown>);
+}
+
 export function useActiveEnvironment() {
   return useRequest(getActiveEnvironment, []);
 }

package/src/features/environments/useEnvironments.ts

@@ -1,7 +1,14 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getEnvironments } from "./actions/getEnvironments";
 
+export function invalidateEnvironmentsData() {
+  invalidateFetcherData(getEnvironments);
+}
+
 export function useEnvironments() {
   return useRequest(getEnvironments, []);
 }

package/src/legacy/components/ItemHeader/index.tsx

@@ -1,16 +1,13 @@
-import { FieldType } from "@prismicio/types-internal/lib/customtypes";
 import React from "react";
 import type { Theme } from "theme-ui";
 import { Flex, Text } from "theme-ui";
 
-import { fieldLabels } from "@/domain/fields";
-
 const ItemHeader: React.FC<{
-  type: FieldType;
+  text: React.ReactNode;
   sliceFieldName: React.ReactNode;
   theme: Theme;
   WidgetIcon: React.ElementType;
-}> = ({ type, sliceFieldName, theme, WidgetIcon }) => (
+}> = ({ text, sliceFieldName, theme, WidgetIcon }) => (
   <Flex sx={{ alignItems: "center" }}>
     <WidgetIcon
       size={28}
@@ -33,7 +30,7 @@ const ItemHeader: React.FC<{
         fontSize: "15px",
       }}
     >
-      {fieldLabels[type]}
+      {text}
     </Text>
     <Text
       as="p"

package/src/legacy/components/ListItem/Header.tsx

@@ -1,9 +1,7 @@
-import { Box, Tooltip } from "@prismicio/editor-ui";
 import * as CSS from "csstype";
 import { IconType } from "react-icons";
 import { Flex, Text, Theme } from "theme-ui";
 
-import { CustomFieldType, fieldLabels } from "@/domain/fields";
 import { TextWithTooltip } from "@/legacy/components/Tooltip/TextWithTooltip";
 
 interface ItemHeaderProps {
@@ -11,7 +9,6 @@ interface ItemHeaderProps {
   sliceFieldName: string | undefined;
   theme: Theme;
   WidgetIcon: IconType;
-  type: CustomFieldType;
 }
 
 const ItemHeader: React.FC<ItemHeaderProps> = ({
@@ -19,24 +16,20 @@ const ItemHeader: React.FC<ItemHeaderProps> = ({
   sliceFieldName,
   theme,
   WidgetIcon,
-  type,
 }) => (
   <Flex sx={{ alignItems: "center", position: "relative" }}>
-    <Tooltip content={fieldLabels[type]} sideOffset={2} disableHoverableContent>
-      <Box margin={{ right: 8 }}>
-        <WidgetIcon
-          size={28}
-          style={{
-            color: theme.colors?.primary as CSS.Property.Color,
-            borderRadius: "4px",
-            padding: "4px",
-            border: "2px solid",
-            borderColor: theme.colors?.primary as CSS.Property.Color,
-            flexShrink: 0,
-          }}
-        />
-      </Box>
-    </Tooltip>
+    <WidgetIcon
+      size={28}
+      style={{
+        color: theme.colors?.primary as CSS.Property.Color,
+        marginRight: "8px",
+        borderRadius: "4px",
+        padding: "4px",
+        border: "2px solid",
+        borderColor: theme.colors?.primary as CSS.Property.Color,
+        flexShrink: 0,
+      }}
+    />
     <TextWithTooltip
       text={text}
       as="p"

package/src/legacy/components/ListItem/index.tsx

@@ -110,7 +110,6 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                       theme={theme}
                       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions, @typescript-eslint/prefer-nullish-coalescing
                       text={config?.label || key}
-                      type={widget.CUSTOM_NAME ?? widget.TYPE_NAME}
                       sliceFieldName={
                         renderFieldAccessor && renderFieldAccessor(key)
                       }

package/src/legacy/components/LoginModal/index.tsx

@@ -13,8 +13,10 @@ import {
   Text,
 } from "theme-ui";
 
-import { checkAuthStatus, getState, startAuth } from "@/apiClient";
+import { checkAuthStatus, getState, logout } from "@/apiClient";
 import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
@@ -64,7 +66,7 @@ const LoginModal: React.FunctionComponent = () => {
 
     try {
       startLoadingLogin();
-      await startAuth();
+      await logout();
       window.open(loginRedirectUrl, "_blank");
       await startPolling<CheckAuthStatusResponse, ValidAuthStatus>(
         checkAuthStatus,
@@ -76,6 +78,10 @@ const LoginModal: React.FunctionComponent = () => {
         60,
       );
 
+      // refresh queries to update the UI
+      invalidateEnvironmentsData();
+      invalidateActiveEnvironmentData();
+
       toast.success("Logged in");
       stopLoadingLogin();
       closeModals();

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -18,6 +18,7 @@ import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
 
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -138,6 +139,8 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
                 }
               />
             ) : undefined}
+
+            {variant === "default" && <LogoutButton />}
           </Box>
         </>
       )}

package/src/legacy/lib/builders/common/EditModal/index.jsx

@@ -60,8 +60,6 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
     FormFields,
     Form: CustomForm,
     schema: widgetSchema,
-    CUSTOM_NAME: widgetCustomName,
-    TYPE_NAME: widgetTypeName,
   } = maybeWidget;
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -165,7 +163,15 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
       >
         {(props) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment
-          const { isValid, isSubmitting, initialValues } = props;
+          const {
+            values: {
+              id,
+              config: { label },
+            },
+            isValid,
+            isSubmitting,
+            initialValues,
+          } = props;
 
           // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
           const fieldModelTabContent = CustomForm ? (
@@ -220,7 +226,7 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
                   <ItemHeader
                     theme={theme}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/strict-boolean-expressions
-                    type={widgetCustomName ?? widgetTypeName}
+                    text={label || id}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     WidgetIcon={WidgetIcon}
                   />

package/src/legacy/lib/models/common/widgets/Group/createGroupWidget.ts

@@ -1,7 +1,6 @@
 import { MdOutlineCreateNewFolder } from "react-icons/md";
 import * as yup from "yup";
 
-import { CustomFieldType } from "@/domain/fields";
 import { TabField } from "@/legacy/lib/models/common/CustomType";
 import {
   type GroupSM,
@@ -34,7 +33,7 @@ type CreateGroupWidgetArgsBase<T extends TabField> = {
   schemaTypeRegex: RegExp;
   customListItem: (props: GroupListItemProps<T>) => JSX.Element;
   hintItemName: string;
-  customName?: CustomFieldType;
+  customName?: string;
 };
 type CreateTopGroupWidgetArgs = CreateGroupWidgetArgsBase<GroupSM>;
 type CreateNestedGroupWidgetArgs = CreateGroupWidgetArgsBase<NestedGroupSM> & {

package/src/legacy/lib/models/common/widgets/Widget.ts

@@ -2,7 +2,6 @@ import { FieldType } from "@prismicio/types-internal/lib/customtypes";
 import { IconType } from "react-icons";
 import { AnyObjectSchema } from "yup";
 
-import { CustomFieldType } from "@/domain/fields";
 import { TabField } from "@/legacy/lib/models/common/CustomType";
 import { GroupSM, NestedGroupSM } from "@/legacy/lib/models/common/Group";
 import { LocalOnlyCustomType } from "@/legacy/lib/models/common/ModelData";
@@ -16,7 +15,7 @@ interface WidgetBase<F extends TabField, S extends AnyObjectSchema> {
   schema: S;
   // eslint-disable-next-line @typescript-eslint/ban-types
   FormFields: {};
-  CUSTOM_NAME?: CustomFieldType;
+  CUSTOM_NAME?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   CustomListItem?: (props: any) => React.ReactElement;
   // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any

package/src/modules/auth.ts

@@ -0,0 +1,3 @@
+import { createAction } from "typesafe-actions";
+
+export const logout = createAction("LOGOUT")();

package/src/modules/availableCustomTypes/index.ts

@@ -14,6 +14,7 @@ import {
   normalizeFrontendCustomTypes,
 } from "@/legacy/lib/models/common/normalizers/customType";
 import { filterSliceFromCustomType } from "@/legacy/lib/utils/shared/customTypes";
+import { logout } from "@/modules/auth";
 import { refreshStateCreator } from "@/modules/environment";
 import { SliceMachineStoreType } from "@/redux/type";
 
@@ -49,7 +50,8 @@ type CustomTypesActions =
   | ActionType<typeof customTypeRenameSuccess>
   | ActionType<typeof customTypeSaveSuccess>
   | ActionType<typeof customTypeDeleteSuccess>
-  | ActionType<typeof sliceDeleteSuccess>;
+  | ActionType<typeof sliceDeleteSuccess>
+  | ActionType<typeof logout>;
 
 // Selectors
 export const selectAllCustomTypes = (
@@ -188,6 +190,15 @@ export const availableCustomTypesReducer: Reducer<
       return customTypesUpdated;
     }
 
+    case getType(logout): {
+      return Object.fromEntries(
+        Object.entries(state).flatMap(([customTypeId, customType]) => {
+          if (!hasLocal(customType)) return [];
+          return [[customTypeId, { local: customType.local }]];
+        }),
+      );
+    }
+
     default:
       return state;
   }

package/src/modules/slices/index.ts

@@ -10,6 +10,7 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { LocalOrRemoteSlice } from "@/legacy/lib/models/common/ModelData";
 import { normalizeFrontendSlices } from "@/legacy/lib/models/common/normalizers/slices";
 import { SliceSM } from "@/legacy/lib/models/common/Slice";
+import { logout } from "@/modules/auth";
 import { refreshStateCreator } from "@/modules/environment";
 import { SliceMachineStoreType } from "@/redux/type";
 
@@ -49,7 +50,8 @@ type SlicesActions =
   | ActionType<typeof sliceDeleteSuccess>
   | ActionType<typeof sliceUpdateSuccess>
   | ActionType<typeof sliceGenerateCustomScreenshotSuccess>
-  | ActionType<typeof sliceUpdateMockSuccess>;
+  | ActionType<typeof sliceUpdateMockSuccess>
+  | ActionType<typeof logout>;
 
 // Selectors
 export const getLibraries = (
@@ -193,6 +195,13 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
       };
     }
 
+    case getType(logout): {
+      return {
+        ...state,
+        remoteSlices: [],
+      };
+    }
+
     default:
       return state;
   }

package/src/modules/useSliceMachineActions.ts

@@ -10,6 +10,7 @@ import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
 import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { SliceSM } from "@/legacy/lib/models/common/Slice";
 import ServerState from "@/legacy/lib/models/server/ServerState";
+import { logout as logoutAction } from "@/modules/auth";
 
 import {
   customTypeCreateSuccess,
@@ -148,12 +149,13 @@ const useSliceMachineActions = () => {
     );
   const updateSliceMockSuccess = (args: SaveSliceMockRequest) =>
     dispatch(sliceUpdateMockSuccess(args));
-
   /**
    * Changes module
    */
   const pushChangesSuccess = () => dispatch(changesPushSuccess());
 
+  const logout = () => dispatch(logoutAction());
+
   return {
     refreshState,
     openScreenshotsModal,
@@ -175,6 +177,7 @@ const useSliceMachineActions = () => {
     pushChangesSuccess,
     createCustomTypeSuccess,
     updateSliceMockSuccess,
+    logout,
   };
 };
 

package/src/modules/userContext/index.ts

@@ -2,6 +2,7 @@ import { Reducer } from "redux";
 import { ActionType, createAction, getType } from "typesafe-actions";
 
 import ErrorWithStatus from "@/legacy/lib/models/common/ErrorWithStatus";
+import { logout } from "@/modules/auth";
 import { AuthStatus, UserContextStoreType } from "@/modules/userContext/types";
 import { SliceMachineStoreType } from "@/redux/type";
 
@@ -34,6 +35,7 @@ type userContextActions = ActionType<
   | typeof hasSeenChangesToolTipCreator
   | typeof refreshStateCreator
   | typeof changesPushSuccess
+  | typeof logout
 >;
 
 // Selectors
@@ -79,6 +81,12 @@ export const userContextReducer: Reducer<
         lastSyncChange: Date.now(),
       };
     }
+    case getType(logout): {
+      return {
+        ...initialState,
+        authStatus: AuthStatus.UNAUTHORIZED,
+      };
+    }
 
     default:
       return state;