[CORL-139, CORL-140] Community (#2239)

* feat: Add table ui component

* feat: community user table

* feat: filters and role change

* fix: add some comments

* fix: user viewer

* fix: snapshots

* test: add tests

* fix: better popover experience

* fix: test

* chore: use enum

* feat: prevent server side setting your own role

* fix: cleanup

src/core/client/framework/helpers/getViewer.ts

@@ -2,7 +2,7 @@ import { Environment } from "relay-runtime";
 
 import getViewerSourceID from "./getViewerSourceID";
 
-export default function getMe(environment: Environment) {
+export default function getViewer(environment: Environment) {
   const source = environment.getStore().getSource();
   const viewerID = getViewerSourceID(environment);
   if (!viewerID) {

src/core/client/framework/helpers/getViewerSourceID.ts

@@ -1,6 +1,8 @@
 import { Environment, ROOT_ID } from "relay-runtime";
 
-export default function getMeSourceID(environment: Environment): string | null {
+export default function getViewerSourceID(
+  environment: Environment
+): string | null {
   const source = environment.getStore().getSource();
   const root = source.get(ROOT_ID)!;
   if (!root.viewer) {

src/core/client/framework/helpers/index.ts

@@ -1,5 +1,5 @@
 export { default as getViewer } from "./getViewer";
-export { default as getMeSourceID } from "./getViewerSourceID";
+export { default as getViewerSourceID } from "./getViewerSourceID";
 export { default as getURLWithCommentID } from "./getURLWithCommentID";
 export { default as urls } from "./urls";
 export { default as createContextHOC } from "./createContextHOC";

src/core/client/framework/lib/bootstrap/TalkContext.tsx

@@ -18,6 +18,9 @@ export interface TalkContext {
   /** relayEnvironment for our relay framework. */
   relayEnvironment: Environment;
 
+  /** locales */
+  locales: string[];
+
   /** localeBundles for our i18n framework. */
   localeBundles: FluentBundle[];
 
@@ -61,12 +64,14 @@ export interface TalkContext {
   clearSession: () => Promise<void>;
 }
 
-const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
+export const TalkReactContext = React.createContext<TalkContext>({} as any);
+
+export const useTalkContext = () => React.useContext(TalkReactContext);
 
 /**
  * Allows consuming the provided context using the React Context API.
  */
-export const TalkContextConsumer = Consumer;
+export const TalkContextConsumer = TalkReactContext.Consumer;
 
 /**
  * In addition to just providing the context, TalkContextProvider also
@@ -75,7 +80,7 @@ export const TalkContextConsumer = Consumer;
 export const TalkContextProvider: StatelessComponent<{
   value: TalkContext;
 }> = ({ value, children }) => (
-  <Provider value={value}>
+  <TalkReactContext.Provider value={value}>
     <LocalizationProvider bundles={value.localeBundles}>
       <UIContext.Provider
         value={{
@@ -87,5 +92,5 @@ export const TalkContextProvider: StatelessComponent<{
         {children}
       </UIContext.Provider>
     </LocalizationProvider>
-  </Provider>
+  </TalkReactContext.Provider>
 );

src/core/client/framework/lib/bootstrap/createManaged.tsx

@@ -238,6 +238,7 @@ export default async function createManaged({
   // Assemble context.
   const context: TalkContext = {
     relayEnvironment: environment,
+    locales,
     localeBundles,
     timeagoFormatter,
     pym,

src/core/client/framework/lib/bootstrap/index.ts

@@ -2,6 +2,8 @@ export {
   TalkContext,
   TalkContextConsumer,
   TalkContextProvider,
+  TalkReactContext,
+  useTalkContext,
 } from "./TalkContext";
 export { default as createManaged } from "./createManaged";
 export { default as withContext } from "./withContext";

src/core/client/framework/schema/custom.ts

@@ -0,0 +1,37 @@
+/**
+ * TODO: (cvle) This file is a workaround to have Relay compatible enum types.
+ * This should be generated by `graphql-schema-typescript`.
+ */
+
+import { RelayEnumLiteral } from "../types";
+import {
+  GQLCOMMENT_FLAG_DETECTED_REASON,
+  GQLCOMMENT_FLAG_REASON,
+  GQLCOMMENT_FLAG_REPORTED_REASON,
+  GQLCOMMENT_SORT,
+  GQLCOMMENT_STATUS,
+  GQLLOCALES,
+  GQLMODERATION_MODE,
+  GQLSTORY_STATUS,
+  GQLUSER_AUTH_CONDITIONS,
+  GQLUSER_ROLE,
+} from "./__generated__/types";
+
+export type GQLUSER_ROLE_RL = RelayEnumLiteral<typeof GQLUSER_ROLE>;
+export type GQLCOMMENT_FLAG_DETECTED_REASON_RL = RelayEnumLiteral<
+  typeof GQLCOMMENT_FLAG_DETECTED_REASON
+>;
+export type GQLCOMMENT_FLAG_REASON_RL = RelayEnumLiteral<
+  typeof GQLCOMMENT_FLAG_REASON
+>;
+export type GQLCOMMENT_FLAG_REPORTED_REASON_RL = RelayEnumLiteral<
+  typeof GQLCOMMENT_FLAG_REPORTED_REASON
+>;
+export type GQLCOMMENT_SORT_RL = RelayEnumLiteral<typeof GQLCOMMENT_SORT>;
+export type GQLCOMMENT_STATUS_RL = RelayEnumLiteral<typeof GQLCOMMENT_STATUS>;
+export type GQLLOCALES_RL = RelayEnumLiteral<typeof GQLLOCALES>;
+export type GQLMODERATION_MODE_RL = RelayEnumLiteral<typeof GQLMODERATION_MODE>;
+export type GQLSTORY_STATUS_RL = RelayEnumLiteral<typeof GQLSTORY_STATUS>;
+export type GQLUSER_AUTH_CONDITIONS_RL = RelayEnumLiteral<
+  typeof GQLUSER_AUTH_CONDITIONS
+>;

src/core/client/framework/schema/index.ts

@@ -0,0 +1,2 @@
+export * from "./__generated__/types";
+export * from "./custom";

src/core/client/framework/types.ts

@@ -1,3 +1,5 @@
 // TODO: (@cvle) Extract useful common types into its own package.
 export { Omit, Overwrite, PropTypesOf } from "talk-ui/types";
 export { DeepPartial } from "talk-common/types";
+
+export type RelayEnumLiteral<T> = keyof T | "%future added value";