add [properties-fe] - properties panel in emails (#612)

Author: danielkweon

js/app/packages/block-email/component/EmailPropertiesModal.tsx

@@ -0,0 +1,56 @@
+import { SplitDrawer } from '@app/component/split-layout/components/SplitDrawer';
+import { useDrawerControl } from '@app/component/split-layout/components/SplitDrawerContext';
+import { IconButton } from '@core/component/IconButton';
+import { PropertiesView } from '@core/component/Properties/PropertiesView';
+import TagIcon from '@icon/regular/tag.svg';
+import { EntityType } from '@service-properties/generated/schemas/entityType';
+import { Suspense } from 'solid-js';
+
+const DRAWER_ID = 'properties';
+
+export function EmailPropertiesModal(props: {
+  buttonSize?: 'sm' | 'base';
+  subject?: string;
+}) {
+  const drawerControl = useDrawerControl(DRAWER_ID);
+
+  return (
+    <>
+      <IconButton
+        icon={TagIcon}
+        theme={drawerControl.isOpen() ? 'accent' : 'clear'}
+        size={props.buttonSize ?? 'base'}
+        tooltip={{ label: 'Properties' }}
+        onClick={drawerControl.toggle}
+      />
+      <SplitDrawer id={DRAWER_ID} side="right" size={550} title="Properties">
+        <Suspense fallback={<LoadingFallback />}>
+          {/* canEdit is always true for email:
+              - Email threads have no sharing mechanism (unlike documents)
+              - If user can view the thread, it's from their connected account
+              - This component only renders after email loads (Show guards in Block.tsx) */}
+          <EmailPropertiesContent canEdit={true} subject={props.subject} />
+        </Suspense>
+      </SplitDrawer>
+    </>
+  );
+}
+
+function EmailPropertiesContent(props: { canEdit: boolean; subject?: string }) {
+  return (
+    <PropertiesView
+      blockType={'email'}
+      canEdit={props.canEdit}
+      entityType={EntityType.THREAD}
+      documentName={props.subject}
+    />
+  );
+}
+
+function LoadingFallback() {
+  return (
+    <div class="flex justify-center items-center py-8">
+      <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-ink-muted"></div>
+    </div>
+  );
+}

js/app/packages/block-email/component/TopBar.tsx

@@ -3,7 +3,13 @@ import {
   SplitHeaderBadge,
   StaticSplitLabel,
 } from '@app/component/split-layout/components/SplitLabel';
-import { SplitToolbarLeft } from '@app/component/split-layout/components/SplitToolbar';
+import {
+  SplitToolbarLeft,
+  SplitToolbarRight,
+} from '@app/component/split-layout/components/SplitToolbar';
+import { ENABLE_PROPERTIES_METADATA } from '@core/constant/featureFlags';
+import { Show } from 'solid-js';
+import { EmailPropertiesModal } from './EmailPropertiesModal';
 
 export function TopBar(props: { title: string }) {
   return (
@@ -16,6 +22,11 @@ export function TopBar(props: { title: string }) {
           <SplitHeaderBadge text="beta" tooltip="Email is in Beta" />
         </div>
       </SplitToolbarLeft>
+      <SplitToolbarRight>
+        <Show when={ENABLE_PROPERTIES_METADATA}>
+          <EmailPropertiesModal buttonSize="sm" subject={props.title} />
+        </Show>
+      </SplitToolbarRight>
     </>
   );
 }

js/app/packages/core/component/Properties/component/panel/PropertyGrid.tsx

@@ -23,7 +23,7 @@ export const PropertyGrid: Component<PropertiesListProps> = (props) => {
     for (const prop of props.properties) {
       if (prop.isMetadata) {
         // Hide "Project" property if value is null
-        if (prop.value != null) {
+        if (prop.value != null || !['Project'].includes(prop.displayName)) {
           metadata.push(prop);
         }
       } else if (builtinPropertyIds.includes(prop.propertyDefinitionId)) {