Implement admin add language modal

[gaoxk]

Notion ticket link

https://www.notion.so/uwblueprintexecs/a658c933d18c48d4b43fd99bda2bd3b4?v=ba22ac93d09040ff8219c60ac7caabdb&p=0bce90b6883443fdbc6ae18c0e945e63

Implementation description

• added AddLanguageModal
• converted the import story button on the manage story translation page to an add language button

Steps to test

1. login as angela
2. click the big phat language button
3. observe an intuitive and functional flow
4. confirm adding the language. do not refresh, immediately click the phat button again
5. observe the cleared modal. add another language just for fun
6. try messing around with modals as usual

What should reviewers focus on?

• happiness, staying hydrated
• hows it look on different screen sizes?

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• For backend changes, I have run the appropriate linters: docker exec -it planet-read_py-backend_1 /bin/bash -c "black . && isort --profile black ." and I have generated new migrations: flask db migrate -m "<your message>"
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[github-actions]

Visit the preview URL for this PR (updated for commit e43f88c):

https://planet-read-uwbp--pr329-languages-modal-cggmuney.web.app

_{(expires Thu, 20 Jan 2022 16:00:23 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[jennifer-lu]

Lookin' good (all listed testing steps work)! I love the phat button O.O

I noticed on the notion that if the admin inputs an existing language into the textarea, the textarea should turn red and the confirm button should be disabled. I didn't see this during testing.

[jennifer-lu]

Nit: the existing languages table scrolls a bit strangely, maybe try something like:

<Box
  borderRadius="10px"
  boxShadow="0px 0px 2px grey"
  height="300px"
  overflow="auto"
>
  <Table
    marginTop="-10px"
    size="sm"
    theme="gray"
    variant="striped"
    width="100%"
  >

[gaoxk]

good catch! try

• Arabic
• arabic
• aalskdhfalskhdf
  observe how components get disabled

[jennifer-lu]

Looks good to me!