[CORL-1219] Media Type Fixes (#3051)

* fix: better graphql types

* fix: fixed tests

* fix: fixed tests

src/core/client/admin/test/fixtures.ts

@@ -183,6 +183,11 @@ export const settings = createFixture<GQLSettings>({
     premodEnabled: false,
     approvedCommentsThreshold: 2,
   },
+  media: {
+    twitter: { enabled: false },
+    giphy: { enabled: false },
+    youtube: { enabled: false },
+  },
   slack: {
     channels: [],
   },

src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap

@@ -426,6 +426,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
                 </div>
               </div>
             </div>
+            
           </div>
           <div
             className="Message-root Message-colorGrey Message-fullWidth coral coral-editComment-remainingTime"
@@ -627,6 +628,7 @@ exports[`edit a comment: edit form 1`] = `
                 </div>
               </div>
             </div>
+            
           </div>
           <div
             className="Message-root Message-colorGrey Message-fullWidth coral coral-editComment-remainingTime"
@@ -828,6 +830,7 @@ exports[`edit a comment: optimistic response 1`] = `
                 </div>
               </div>
             </div>
+            
           </div>
           <div
             className="Message-root Message-colorGrey Message-fullWidth coral coral-editComment-remainingTime"
@@ -1899,6 +1902,7 @@ exports[`shows expiry message: edit time expired 1`] = `
                 </div>
               </div>
             </div>
+            
           </div>
           <div
             className="ValidationMessage-root coral-validation-message"

src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap

@@ -434,6 +434,7 @@ exports[`post a reply: open reply form 1`] = `
                   </div>
                 </div>
               </div>
+              
             </div>
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd gutter Flex-spacing-1"

src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap

@@ -390,6 +390,7 @@ exports[`post a reply: open reply form 1`] = `
                   </div>
                 </div>
               </div>
+              
             </div>
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd gutter Flex-spacing-1"

src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap

@@ -439,6 +439,7 @@ exports[`renders message box when logged in 1`] = `
                   </div>
                 </div>
               </div>
+              
             </div>
             <div
               className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd gutter Flex-spacing-1"

src/core/client/stream/test/fixtures.ts

@@ -108,6 +108,11 @@ export const settings = createFixture<GQLSettings>({
     changeUsername: true,
     deleteAccount: true,
   },
+  media: {
+    twitter: { enabled: false },
+    youtube: { enabled: false },
+    giphy: { enabled: false },
+  },
   multisite: false,
   featureFlags: [],
   rte: {
@@ -307,6 +312,7 @@ export const baseComment = createFixture<GQLComment>({
   body: "Comment Body",
   revision: {
     id: "revision-0",
+    media: undefined,
   },
   status: GQLCOMMENT_STATUS.NONE,
   createdAt: "2018-07-06T18:24:00.000Z",

src/core/server/graph/resolvers/GiphyMediaConfiguration.ts

@@ -0,0 +1,11 @@
+import {
+  GQLGiphyMediaConfiguration,
+  GQLGiphyMediaConfigurationTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
+export const GiphyMediaConfiguration: GQLGiphyMediaConfigurationTypeResolver<Partial<
+  GQLGiphyMediaConfiguration
+>> = {
+  enabled: ({ enabled = false }) => enabled,
+  maxRating: ({ maxRating = "g" }) => maxRating,
+};

src/core/server/graph/resolvers/MediaConfiguration.ts

@@ -3,8 +3,10 @@ import {
   GQLMediaConfigurationTypeResolver,
 } from "coral-server/graph/schema/__generated__/types";
 
-export const MediaConfiguration: GQLMediaConfigurationTypeResolver<GQLMediaConfiguration> = {
-  twitter: ({ twitter }) => (twitter ? twitter : false),
-  youtube: ({ youtube }) => (youtube ? youtube : false),
-  giphy: ({ giphy }) => (giphy ? giphy : false),
+export const MediaConfiguration: GQLMediaConfigurationTypeResolver<Partial<
+  GQLMediaConfiguration
+>> = {
+  twitter: ({ twitter = {} }) => twitter,
+  youtube: ({ youtube = {} }) => youtube,
+  giphy: ({ giphy = {} }) => giphy,
 };

src/core/server/graph/resolvers/Settings.ts

@@ -31,19 +31,5 @@ export const Settings: GQLSettingsTypeResolver<Tenant> = {
   },
   webhookEvents: () => Object.values(GQLWEBHOOK_EVENT_NAME),
   rte: ({ rte = defaultRTEConfiguration }) => rte,
-  media: ({ media }) => {
-    if (!media) {
-      return {
-        twitter: { enabled: false },
-        youtube: { enabled: false },
-        giphy: { enabled: false },
-      };
-    }
-
-    return {
-      twitter: media.twitter || { enabled: false },
-      youtube: media.youtube || { enabled: false },
-      giphy: media.giphy || { enabled: false, maxRating: "g" },
-    };
-  },
+  media: ({ media = {} }) => media,
 };

src/core/server/graph/resolvers/TwitterMediaConfiguration.ts

@@ -0,0 +1,10 @@
+import {
+  GQLTwitterMediaConfiguration,
+  GQLTwitterMediaConfigurationTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
+export const TwitterMediaConfiguration: Required<GQLTwitterMediaConfigurationTypeResolver<
+  Partial<GQLTwitterMediaConfiguration>
+>> = {
+  enabled: ({ enabled = false }) => enabled,
+};

src/core/server/graph/resolvers/YouTubeMediaConfiguration.ts

@@ -0,0 +1,10 @@
+import {
+  GQLYouTubeMediaConfiguration,
+  GQLYouTubeMediaConfigurationTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
+export const YouTubeMediaConfiguration: Required<GQLYouTubeMediaConfigurationTypeResolver<
+  Partial<GQLYouTubeMediaConfiguration>
+>> = {
+  enabled: ({ enabled = false }) => enabled,
+};

src/core/server/graph/resolvers/index.ts

@@ -25,6 +25,7 @@ import { ExternalModerationPhase } from "./ExternalModerationPhase";
 import { FacebookAuthIntegration } from "./FacebookAuthIntegration";
 import { FeatureCommentPayload } from "./FeatureCommentPayload";
 import { Flag } from "./Flag";
+import { GiphyMediaConfiguration } from "./GiphyMediaConfiguration";
 import { GoogleAuthIntegration } from "./GoogleAuthIntegration";
 import { Invite } from "./Invite";
 import { LiveConfiguration } from "./LiveConfiguration";
@@ -53,12 +54,14 @@ import { Subscription } from "./Subscription";
 import { SuspensionStatus } from "./SuspensionStatus";
 import { SuspensionStatusHistory } from "./SuspensionStatusHistory";
 import { Tag } from "./Tag";
+import { TwitterMediaConfiguration } from "./TwitterMediaConfiguration";
 import { User } from "./User";
 import { UserModerationScopes } from "./UserModerationScopes";
 import { UsernameHistory } from "./UsernameHistory";
 import { UsernameStatus } from "./UsernameStatus";
 import { UserStatus } from "./UserStatus";
 import { WebhookEndpoint } from "./WebhookEndpoint";
+import { YouTubeMediaConfiguration } from "./YouTubeMediaConfiguration";
 
 const Resolvers: GQLResolver = {
   ApproveCommentPayload,
@@ -83,6 +86,7 @@ const Resolvers: GQLResolver = {
   FacebookAuthIntegration,
   FeatureCommentPayload,
   Flag,
+  GiphyMediaConfiguration,
   GoogleAuthIntegration,
   Invite,
   LiveConfiguration,
@@ -112,6 +116,7 @@ const Resolvers: GQLResolver = {
   SuspensionStatus,
   SuspensionStatusHistory,
   Tag,
+  TwitterMediaConfiguration,
   Time,
   User,
   UserModerationScopes,
@@ -119,6 +124,7 @@ const Resolvers: GQLResolver = {
   UsernameStatus,
   UserStatus,
   WebhookEndpoint,
+  YouTubeMediaConfiguration,
 };
 
 export default Resolvers;

src/core/server/graph/schema/schema.graphql

@@ -1749,7 +1749,7 @@ type Settings {
   """
   media is the configuration media content attached to Comment's.
   """
-  media: MediaConfiguration
+  media: MediaConfiguration!
 
   """
   featureFlags provides the enabled feature flags.
@@ -4422,7 +4422,7 @@ input GiphyMediaConfigurationInput {
   """
   maximum allowed rating for gifs, g, pg, pg-13, r
   """
-  maxRating: String!
+  maxRating: String
 
   """
   key is the API key for Giphy.

src/core/server/models/settings/settings.ts

@@ -8,6 +8,7 @@ import {
   GQLGoogleAuthIntegration,
   GQLLiveConfiguration,
   GQLLocalAuthIntegration,
+  GQLMediaConfiguration,
   GQLMODERATION_MODE,
   GQLOIDCAuthIntegration,
   GQLPerspectiveExternalIntegration,
@@ -185,7 +186,6 @@ export type Settings = GlobalModerationSettings &
     | "createdAt"
     | "slack"
     | "announcement"
-    | "media"
   > & {
     /**
      * auth is the set of configured authentication integrations.
@@ -225,6 +225,11 @@ export type Settings = GlobalModerationSettings &
     newCommenters: NewCommentersConfiguration;
 
     rte?: GQLRTEConfiguration;
+
+    /**
+     * media is the configuration media content attached to Comment's.
+     */
+    media?: GQLMediaConfiguration;
   };
 
 export const defaultRTEConfiguration: GQLRTEConfiguration = {

src/core/server/services/giphy/giphy.ts

@@ -59,12 +59,13 @@ const GiphyRetrieveResponseSchema = Joi.object().keys({
 
 export function ratingIsAllowed(rating: string, tenant: Tenant) {
   const compareRating = rating.toLowerCase();
+  const maxRating = tenant.media?.giphy.maxRating || "g";
 
-  if (tenant.media?.giphy.maxRating && RATINGS_ORDER.includes(compareRating)) {
-    return (
-      RATINGS_ORDER.indexOf(compareRating) <=
-      RATINGS_ORDER.indexOf(tenant.media.giphy.maxRating)
-    );
+  const compareIndex = RATINGS_ORDER.indexOf(compareRating);
+  const maxIndex = RATINGS_ORDER.indexOf(maxRating);
+
+  if (compareIndex >= 0 && maxIndex >= 0) {
+    return compareIndex <= maxIndex;
   }
 
   return false;