feat(Editor): make server utilities their own pages

Signed-off-by: Katalina Okano <git@kat.cafe>

packages/design-system/molecules/server-utilities/ServerUtilities.stories.tsx

@@ -0,0 +1,12 @@
+import { guildData } from '@roleypoly/design-system/fixtures/storyData';
+import { ServerUtilities } from './ServerUtilities';
+
+export default {
+  title: 'Molecules/Server Utilities',
+  component: ServerUtilities,
+  args: {
+    guildData: guildData,
+  },
+};
+
+export const serverUtilities = (args) => <ServerUtilities {...args} />;

packages/design-system/molecules/server-utilities/ServerUtilities.styled.ts

@@ -0,0 +1,37 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { text200, text400 } from '@roleypoly/design-system/atoms/typography';
+import styled from 'styled-components';
+
+export const ClickaleBlock = styled.a`
+  display: flex;
+  color: unset;
+  text-decoration: none;
+  align-items: center;
+  padding: 0.5em;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+  box-sizing: border-box;
+  justify-content: space-between;
+  max-width: 93vw;
+
+  :hover {
+    background-color: ${palette.taupe300};
+  }
+`;
+
+export const Title = styled.div`
+  ${text400};
+  /* padding: 0.15em 0; */
+
+  svg {
+    color: ${palette.taupe500};
+    position: relative;
+    top: 2px;
+  }
+`;
+
+export const Description = styled.div`
+  ${text200};
+`;
+
+export const MainSide = styled.div``;

packages/design-system/molecules/server-utilities/ServerUtilities.tsx

@@ -1,72 +1,74 @@
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
-import { TextInput } from '@roleypoly/design-system/atoms/text-input';
-import { AmbientLarge, Text } from '@roleypoly/design-system/atoms/typography';
-import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
-import { GuildData, WebhookValidationStatus } from '@roleypoly/types';
-import { GoAlert, GoInfo } from 'react-icons/go';
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
+import {
+  ClickaleBlock,
+  Description,
+  MainSide,
+  Title,
+} from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities.styled';
+import { GuildData } from '@roleypoly/types';
+import { GoArchive, GoChevronRight, GoReport, GoShield, GoSync } from 'react-icons/go';
 
 type Props = {
-  onChange: (guildData: GuildData) => void;
   guildData: GuildData;
-  validationStatus: WebhookValidationStatus | null;
 };
 
-export const ServerUtilities = (props: Props) => {
-  return (
-    <MessageBox>
-      <Text>
-        (optional) Webhook URL for Audit Logging{' '}
-        <GoInfo
-          data-for="server-utilities"
-          data-tip="Reports changes made in the editor to a Webhook integration within your Discord server."
-        />
-      </Text>
-      <TextInput
-        placeholder="https://discord.com/api/webhooks/000000000000000000/..."
-        value={props.guildData.auditLogWebhook || ''}
-        onChange={(event) =>
-          props.onChange({ ...props.guildData, auditLogWebhook: event.target.value })
-        }
-      />
-      <FaderOpacity isVisible={props.validationStatus !== WebhookValidationStatus.Ok}>
-        <ValidationStatus validationStatus={props.validationStatus} />
-      </FaderOpacity>
-      <ReactTooltip id="server-utilities" />
-    </MessageBox>
-  );
-};
+const Utility = (props: {
+  link: string;
+  title: React.ReactNode;
+  description: string;
+}) => (
+  <ClickaleBlock href={props.link}>
+    <MainSide>
+      <Title>{props.title}</Title>
+      <Description>{props.description}</Description>
+    </MainSide>
+    <div>
+      <GoChevronRight />
+    </div>
+  </ClickaleBlock>
+);
 
-const ValidationStatus = (props: Pick<Props, 'validationStatus'>) => {
-  switch (props.validationStatus) {
-    case WebhookValidationStatus.NotDiscordURL:
-      return (
-        <AmbientLarge>
-          <Alert /> URL must be to a Discord webhook, starting with
-          "https://discord.com/api/webhooks/".
-        </AmbientLarge>
-      );
-    case WebhookValidationStatus.NotSameGuild:
-      return (
-        <AmbientLarge>
-          <Alert /> Webhook must be in the same guild you are currently editing.
-        </AmbientLarge>
-      );
-    case WebhookValidationStatus.DoesNotExist:
-      return (
-        <AmbientLarge>
-          <Alert /> This webhook doesn't exist.
-        </AmbientLarge>
-      );
-    default:
-      return <AmbientLarge>&nbsp;</AmbientLarge>;
-  }
-};
-
-const Alert = styled(GoAlert)`
-  color: ${palette.red400};
-  position: relative;
-  top: 2px;
-`;
+export const ServerUtilities = (props: Props) => (
+  <div>
+    {/* <LargeText>Server Utilities</LargeText> */}
+    <Utility
+      title={
+        <>
+          <GoShield />
+          &nbsp;&nbsp;Access Control
+        </>
+      }
+      description="Set up who can use Roleypoly in your server"
+      link={`/s/${props.guildData.id}/edit/access-control`}
+    />
+    <Utility
+      title={
+        <>
+          <GoReport />
+          &nbsp;&nbsp;Audit Logging
+        </>
+      }
+      description="Setup audit logging via a Discord webhook"
+      link={`/s/${props.guildData.id}/edit/audit-logging`}
+    />
+    <Utility
+      title={
+        <>
+          <GoSync />
+          &nbsp;&nbsp;Import from Roleypoly Legacy
+        </>
+      }
+      description="Used Roleypoly before and don't see your categories?"
+      link={`/s/${props.guildData.id}/edit/import-from-legacy`}
+    />
+    <Utility
+      title={
+        <>
+          <GoArchive />
+          &nbsp;&nbsp;Manage your Data
+        </>
+      }
+      description="Export or delete all of your Roleypoly data."
+      link={`/s/${props.guildData.id}/edit/data`}
+    />
+  </div>
+);

packages/design-system/molecules/server-utilities/index.ts

@@ -0,0 +1 @@
+export * from './ServerUtilities';