Frontend: Implement Channel Perms Reset Feature

.github/workflows/integrate.yml

@@ -37,7 +37,7 @@ jobs:
 
   test-frontend:
     name: Test Frontend
-    runs-on: windows-latest
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [16.x, 17.x]
@@ -81,7 +81,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install Frontend Packages
-        run: npm ci -f
+        run: npm ci
         working-directory: ./frontend
 
       - name: Build Frontend

frontend/src/components/modals/channel-settings/channel-settings-perms.tsx

@@ -20,11 +20,12 @@ const ChannelSettingsPerms: React.FunctionComponent = () => {
   const channel = useSelector((s: Store.AppState) => s.ui.activeChannel)!;
   const roles = useSelector(getGuildRoles(guildId));  
   const dispatch = useDispatch();
-  const [override, setOverride] = useState(clone(channel.overrides?.[0]) ?? {
+  const defaultOverride = clone(channel.overrides?.[0]) ?? {
     allow: 0,
     deny: 0,
     roleId: roles[0].id,
-  });
+  };
+  const [override, setOverride] = useState(defaultOverride);
   const [roleId, setRoleId] = useState(override.roleId);
 
   const unaddedRoles = roles.filter(r => !channel.overrides?.some(o => o.roleId === r.id));
@@ -35,36 +36,35 @@ const ChannelSettingsPerms: React.FunctionComponent = () => {
     dispatch(openSaveChanges(true));
   }
 
-  const RoleDetails: React.FunctionComponent = () => (
-    <>
-      <PermOverrides overrideState={[override, setOverride]} />
-      <NormalButton
-        onClick={deleteActiveOverride}
-        className="bg-danger float-right"
-        type="button">Delete</NormalButton>
-      <SaveChanges
-        onSave={onSave}
-        obj={{ overrides: override }} />  
-    </>
-  );
+  const RoleDetails: React.FunctionComponent = () => {
+    const onSave = (e) => {
+      const cloned: ChannelTypes.Override[] = clone(channel.overrides) ?? [override!];
+      const filtered = cloned
+        .filter(c => c.allow + c.deny > 0)
+        .filter(uniqueBy('roleId'));
+      
+      const index = filtered.findIndex(o => o.roleId === roleId);
+      (index < 0)
+        ? filtered.push(override)
+        : filtered[index] = override!;
+  
+      dispatch(updateChannel(channel.id, { overrides: filtered }));
+    }
+    const onReset = () => setOverride(defaultOverride);
 
-  const onSave = (e) => {
-    const cloned: ChannelTypes.Override[] = clone(channel.overrides) ?? [override!];
-    
-    const filtered = cloned
-      .filter(c => c.allow + c.deny > 0)
-      .filter(uniqueBy('roleId'));
-    
-    const index = filtered.findIndex(o => o.roleId === roleId);
-    (index < 0)
-      ? filtered.push(override)
-      : filtered[index] = override!;
-    
-    console.log(channel.overrides);
-    console.log(cloned);
-    console.log(filtered);
-
-    dispatch(updateChannel(channel.id, { overrides: filtered }));
+    return (
+      <>
+        <PermOverrides overrideState={[override, setOverride]} />
+        <NormalButton
+          onClick={deleteActiveOverride}
+          className="bg-danger float-right"
+          type="button">Delete</NormalButton>
+        <SaveChanges
+          onSave={onSave}
+          onReset={onReset}
+          obj={override} />  
+      </>
+    );
   };
 
   const role = roles.find(r => r.id === roleId);

frontend/src/components/utils/save-changes.tsx

@@ -8,6 +8,8 @@ import NormalButton from './buttons/normal-button';
 
 export interface SaveChangesProps {
   onSave: (e) => any;
+  onReset?: (e) => any;
+  /** @deprecated */
   setValue?: UseFormSetValue<FieldValues>;
   obj: object;
 }
@@ -33,10 +35,11 @@ const SaveChanges: React.FunctionComponent<SaveChangesProps> = (props) => {
     props.onSave(e);
     dispatch(openSaveChanges(false));
   };
-  const onClickReset = () => {
+  const onClickReset = (e) => {
     closeSnackbar('saveChanges');
     for (const key in props.obj)
       props.setValue?.(key, props.obj[key]);
+    props.onReset?.(e);
     dispatch(openSaveChanges(false));
   };
   const SaveChanges = () => (