feat: bring release status components [TOL-3103] (#1875)

feat: bring release status components

Author: YvesRijckaert

packages/_shared/src/ReleaseEntityStatusBadge/Banner.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+
+import { Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+
+const styles = {
+  content: css({
+    display: 'block',
+  }),
+  banner: css({
+    background: tokens.gray100,
+    padding: tokens.spacingXs,
+    margin: `${tokens.spacingXs} ${tokens.spacingS}`,
+    borderRadius: tokens.borderRadiusSmall,
+  }),
+};
+
+export function Banner({ content, highlight }: { content: ReactNode; highlight?: ReactNode }) {
+  return (
+    <div className={styles.banner}>
+      <Text fontSize="fontSizeS" fontColor="gray700" className={styles.content}>
+        {content}
+      </Text>
+      {highlight && (
+        <Text fontSize="fontSizeS" fontColor="gray700" as="strong" fontWeight="fontWeightDemiBold">
+          {highlight}
+        </Text>
+      )}
+    </div>
+  );
+}

packages/_shared/src/ReleaseEntityStatusBadge/ReleaseEntityStatusBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Badge, BadgeVariant } from '@contentful/f36-components';
+
+import type { ReleaseAction } from './types';
+
+type ReleaseEntityActionBadgeProps = {
+  action: ReleaseAction;
+  className?: string;
+};
+
+const config: Record<ReleaseAction, { label: string; variant: BadgeVariant }> = {
+  publish: {
+    label: 'Will publish',
+    variant: 'positive' as const,
+  },
+  unpublish: {
+    label: 'Becomes draft',
+    variant: 'warning' as const,
+  },
+  'not-in-release': {
+    label: 'Not in release',
+    variant: 'secondary' as const,
+  },
+};
+
+export function ReleaseEntityStatusBadge({ className, action }: ReleaseEntityActionBadgeProps) {
+  const badgeConfig = config[action];
+
+  return (
+    <Badge
+      testId="release-entity-action-status"
+      className={className}
+      variant={badgeConfig.variant}
+    >
+      {badgeConfig.label}
+    </Badge>
+  );
+}

packages/_shared/src/ReleaseEntityStatusBadge/ReleaseEntityStatusLocale.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Badge, BadgeVariant, Text } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import type { LocaleProps } from 'contentful-management';
+import { css } from 'emotion';
+
+const styles = {
+  locale: css({
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  }),
+  status: css({
+    flexShrink: 0,
+  }),
+  localePublishStatus: css({
+    display: 'flex',
+    gap: tokens.spacingXs,
+    justifyContent: 'space-between',
+    padding: `${tokens.spacingXs} ${tokens.spacingS}`,
+  }),
+};
+
+type ReleaseEntityStatusLocaleProps = {
+  locale: Pick<LocaleProps, 'code' | 'default' | 'name'>;
+  label: string;
+  variant: BadgeVariant;
+};
+
+export function ReleaseEntityStatusLocale({
+  locale,
+  label,
+  variant,
+}: ReleaseEntityStatusLocaleProps) {
+  return (
+    <div className={styles.localePublishStatus} data-test-id="locale-publishing-status">
+      <Text className={styles.locale} fontColor="gray700">
+        {locale.name}{' '}
+        <Text fontColor="gray500">
+          ({locale.code}){locale.default && ', Default'}
+        </Text>
+      </Text>
+      <Badge className={styles.status} variant={variant}>
+        {label}
+      </Badge>
+    </div>
+  );
+}

packages/_shared/src/ReleaseEntityStatusBadge/ReleaseEntityStatusLocalesList.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { MenuSectionTitle } from '@contentful/f36-components';
+import type { LocaleProps } from 'contentful-management';
+import { sortBy } from 'lodash';
+
+import { Banner } from './Banner';
+import { ReleaseEntityStatusLocale } from './ReleaseEntityStatusLocale';
+import { ReleaseLocalesStatus, ReleaseLocalesStatusMap } from './types';
+
+function groupAndSortLocales(
+  entries: [string, ReleaseLocalesStatus][],
+  activeLocales?: Pick<LocaleProps, 'code'>[]
+) {
+  // Group into selected locales (for editing) and non selected
+  const { selected, nonSelected } = entries.reduce(
+    (prev, [localeCode, localeStatusType]) => {
+      return activeLocales?.some((sl) => sl.code === localeCode)
+        ? {
+            ...prev,
+            selected: [...prev.selected, localeStatusType],
+          }
+        : {
+            ...prev,
+            nonSelected: [...prev.nonSelected, localeStatusType],
+          };
+    },
+    { selected: [] as ReleaseLocalesStatus[], nonSelected: [] as ReleaseLocalesStatus[] }
+  );
+
+  return {
+    // selected are just sorted by name
+    selected: sortBy(selected, 'locale.name'),
+    // non-selected are grouped by status and sort inside the group alphabetical
+    nonSelected: nonSelected.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.locale.name.localeCompare(b.locale.name);
+      }
+
+      if (
+        a.status === 'becomesDraft' ||
+        (a.status === 'willPublish' && b.status === 'remainsDraft')
+      ) {
+        return -1;
+      }
+
+      return 1;
+    }),
+  };
+}
+
+type ReleaseEntityStatusLocalesListProps = {
+  statusMap: ReleaseLocalesStatusMap;
+  activeLocales?: Pick<LocaleProps, 'code'>[];
+};
+
+export function ReleaseEntityStatusLocalesList({
+  statusMap,
+  activeLocales,
+}: ReleaseEntityStatusLocalesListProps) {
+  const entries = [...statusMap.entries()];
+  const counters = entries.reduce(
+    (prev, [, { status }]) => ({
+      becomesDraft: prev.becomesDraft + (status === 'becomesDraft' ? 1 : 0),
+      willPublish: prev.willPublish + (status === 'willPublish' ? 1 : 0),
+      remainsDraft: prev.remainsDraft + (status === 'remainsDraft' ? 1 : 0),
+    }),
+    { willPublish: 0, becomesDraft: 0, remainsDraft: 0 }
+  );
+
+  const { selected, nonSelected } = groupAndSortLocales(entries, activeLocales);
+  return (
+    <>
+      <Banner
+        content="The statuses of the locales for this content:"
+        highlight={`${counters.becomesDraft} becomes draft, ${counters.willPublish} will publish, ${counters.remainsDraft} remains draft`}
+      />
+
+      <div data-test-id="locale-publishing-selected">
+        <MenuSectionTitle>Locales in the entry editor:</MenuSectionTitle>
+        {selected.map(({ locale, label, variant }) => (
+          <ReleaseEntityStatusLocale
+            key={`selected-${locale.code}`}
+            label={label}
+            variant={variant}
+            locale={locale}
+          />
+        ))}
+      </div>
+
+      {nonSelected.length > 0 && (
+        <div data-test-id="locale-publishing-others">
+          <MenuSectionTitle>Other locales:</MenuSectionTitle>
+          {nonSelected.map(({ locale, label, variant }) => (
+            <ReleaseEntityStatusLocale
+              key={`others-${locale.code}`}
+              label={label}
+              variant={variant}
+              locale={locale}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}