More renames from 'visible' to 'open'. (#2290)

web/components/ComposeFederatedPost.tsx

@@ -7,11 +7,11 @@ import { fetchData, FEDERATION_MESSAGE_SEND } from '../utils/apis';
 const { TextArea } = Input;
 
 export type ComposeFederatedPostProps = {
-  visible: boolean;
+  open: boolean;
   handleClose: () => void;
 };
 
-export const ComposeFederatedPost: FC<ComposeFederatedPostProps> = ({ visible, handleClose }) => {
+export const ComposeFederatedPost: FC<ComposeFederatedPostProps> = ({ open, handleClose }) => {
   const [content, setContent] = useState('');
   const [postPending, setPostPending] = useState(false);
   const [postSuccessState, setPostSuccessState] = useState(null);
@@ -53,7 +53,7 @@ export const ComposeFederatedPost: FC<ComposeFederatedPostProps> = ({ visible, h
       destroyOnClose
       width={600}
       title="Post to Followers"
-      visible={visible}
+      open={open}
       onCancel={handleClose}
       footer={[
         <Button onClick={() => handleClose()}>Cancel</Button>,

web/components/MainLayout.tsx

@@ -284,7 +284,7 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
       </Layout>
 
       <ComposeFederatedPost
-        visible={postModalDisplayed}
+        open={postModalDisplayed}
         handleClose={() => setPostModalDisplayed(false)}
       />
     </Layout>

web/components/UserPopover.tsx

@@ -20,12 +20,12 @@ export type UserPopoverProps = {
 };
 
 export const UserPopover: FC<UserPopoverProps> = ({ user, connectionInfo, children }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleShowModal = () => {
-    setIsModalVisible(true);
+    setIsModalOpen(true);
   };
   const handleCloseModal = () => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
   };
 
   const { displayName, createdAt, previousNames, nameChangedAt, disabledAt } = user;
@@ -74,7 +74,7 @@ export const UserPopover: FC<UserPopoverProps> = ({ user, connectionInfo, childr
         cancelText="Close"
         okButtonProps={{ style: { display: 'none' } }}
         title={`User details: ${displayName}`}
-        visible={isModalVisible}
+        open={isModalOpen}
         onOk={handleCloseModal}
         onCancel={handleCloseModal}
       >

web/components/config/CodecSelector.tsx

@@ -27,7 +27,7 @@ export const CodecSelector: FC<CodecSelectorProps> = () => {
   const { setMessage } = useContext(AlertMessageContext);
   const [selectedCodec, setSelectedCodec] = useState(videoCodec);
   const [pendingSaveCodec, setPendingSavecodec] = useState(videoCodec);
-  const [confirmPopupVisible, setConfirmPopupVisible] = React.useState(false);
+  const [confirmPopupOpen, setConfirmPopupOpen] = React.useState(false);
 
   let resetTimer = null;
 
@@ -43,13 +43,13 @@ export const CodecSelector: FC<CodecSelectorProps> = () => {
 
   function handleChange(value) {
     setPendingSavecodec(value);
-    setConfirmPopupVisible(true);
+    setConfirmPopupOpen(true);
   }
 
   async function save() {
     setSelectedCodec(pendingSaveCodec);
     setPendingSavecodec('');
-    setConfirmPopupVisible(false);
+    setConfirmPopupOpen(false);
 
     await postConfigUpdateToAPI({
       apiPath: API_VIDEO_CODEC,
@@ -147,10 +147,10 @@ export const CodecSelector: FC<CodecSelectorProps> = () => {
       <div className="segment-slider-container">
         <Popconfirm
           title={`Are you sure you want to change your video codec to ${pendingSaveCodec} and understand what this means?`}
-          visible={confirmPopupVisible}
+          open={confirmPopupOpen}
           placement="leftBottom"
           onConfirm={save}
-          onCancel={() => setConfirmPopupVisible(false)}
+          onCancel={() => setConfirmPopupOpen(false)}
           okText="Yes"
           cancelText="No"
         >

web/components/config/CurrentVariantsTable.tsx

@@ -219,7 +219,7 @@ export const CurrentVariantsTable: FC = () => {
 
       <Modal
         title="Edit Video Variant Details"
-        visible={displayModal}
+        open={displayModal}
         onOk={handleModalOk}
         onCancel={handleModalCancel}
         confirmLoading={modalProcessing}

web/components/config/EditSocialLinks.tsx

@@ -309,7 +309,7 @@ export const EditSocialLinks: FC = () => {
 
       <Modal
         title="Edit Social Handle"
-        visible={displayModal}
+        open={displayModal}
         onOk={handleModalOk}
         onCancel={handleModalCancel}
         confirmLoading={modalProcessing}

web/pages/admin/access-tokens.tsx

@@ -60,10 +60,10 @@ function convertScopeStringToTag(scopeString: string) {
 interface Props {
   onCancel: () => void;
   onOk: any; // todo: make better type
-  visible: boolean;
+  open: boolean;
 }
 const NewTokenModal = (props: Props) => {
-  const { onOk, onCancel, visible } = props;
+  const { onOk, onCancel, open } = props;
   const [selectedScopes, setSelectedScopes] = useState([]);
   const [name, setName] = useState('');
 
@@ -100,7 +100,7 @@ const NewTokenModal = (props: Props) => {
   return (
     <Modal
       title="Create New Access token"
-      visible={visible}
+      open={open}
       onOk={saveToken}
       onCancel={onCancel}
       okButtonProps={okButtonProps}
@@ -135,7 +135,7 @@ const NewTokenModal = (props: Props) => {
 
 const AccessTokens = () => {
   const [tokens, setTokens] = useState([]);
-  const [isTokenModalVisible, setIsTokenModalVisible] = useState(false);
+  const [isTokenModalOpen, setIsTokenModalOpen] = useState(false);
 
   function handleError(error) {
     console.error('error', error);
@@ -220,16 +220,16 @@ const AccessTokens = () => {
   ];
 
   const showCreateTokenModal = () => {
-    setIsTokenModalVisible(true);
+    setIsTokenModalOpen(true);
   };
 
   const handleTokenModalSaveButton = (name, scopes) => {
-    setIsTokenModalVisible(false);
+    setIsTokenModalOpen(false);
     handleSaveToken(name, scopes);
   };
 
   const handleTokenModalCancel = () => {
-    setIsTokenModalVisible(false);
+    setIsTokenModalOpen(false);
   };
 
   return (
@@ -258,7 +258,7 @@ const AccessTokens = () => {
         Create Access Token
       </Button>
       <NewTokenModal
-        visible={isTokenModalVisible}
+        open={isTokenModalOpen}
         onOk={handleTokenModalSaveButton}
         onCancel={handleTokenModalCancel}
       />

web/pages/admin/actions.tsx

@@ -17,11 +17,11 @@ let resetTimer = null;
 interface Props {
   onCancel: () => void;
   onOk: any; // todo: make better type
-  visible: boolean;
+  open: boolean;
 }
 
 const NewActionModal = (props: Props) => {
-  const { onOk, onCancel, visible } = props;
+  const { onOk, onCancel, open } = props;
 
   const [actionUrl, setActionUrl] = useState('');
   const [actionTitle, setActionTitle] = useState('');
@@ -64,7 +64,7 @@ const NewActionModal = (props: Props) => {
   return (
     <Modal
       title="Create New Action"
-      visible={visible}
+      open={open}
       onOk={save}
       onCancel={onCancel}
       okButtonProps={okButtonProps}
@@ -138,7 +138,7 @@ const Actions = () => {
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { externalActions } = serverConfig;
   const [actions, setActions] = useState([]);
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [submitStatus, setSubmitStatus] = useState(null);
 
   const resetStates = () => {
@@ -207,7 +207,7 @@ const Actions = () => {
   }
 
   const showCreateModal = () => {
-    setIsModalVisible(true);
+    setIsModalOpen(true);
   };
 
   const handleModalSaveButton = (
@@ -218,12 +218,12 @@ const Actions = () => {
     actionColor: string,
     openExternally: boolean,
   ) => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
     handleSave(actionUrl, actionTitle, actionDescription, actionIcon, actionColor, openExternally);
   };
 
   const handleModalCancelButton = () => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
   };
 
   const columns = [
@@ -304,7 +304,7 @@ const Actions = () => {
       <FormStatusIndicator status={submitStatus} />
 
       <NewActionModal
-        visible={isModalVisible}
+        open={isModalOpen}
         onOk={handleModalSaveButton}
         onCancel={handleModalCancelButton}
       />

web/pages/admin/webhooks.tsx

@@ -52,11 +52,11 @@ function convertEventStringToTag(eventString: string) {
 interface Props {
   onCancel: () => void;
   onOk: any; // todo: make better type
-  visible: boolean;
+  open: boolean;
 }
 
 const NewWebhookModal = (props: Props) => {
-  const { onOk, onCancel, visible } = props;
+  const { onOk, onCancel, open } = props;
 
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [webhookUrl, setWebhookUrl] = useState('');
@@ -95,7 +95,7 @@ const NewWebhookModal = (props: Props) => {
   return (
     <Modal
       title="Create New Webhook"
-      visible={visible}
+      open={open}
       onOk={save}
       onCancel={onCancel}
       okButtonProps={okButtonProps}
@@ -125,7 +125,7 @@ const NewWebhookModal = (props: Props) => {
 
 const Webhooks = () => {
   const [webhooks, setWebhooks] = useState([]);
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   function handleError(error) {
     console.error('error', error);
@@ -166,16 +166,16 @@ const Webhooks = () => {
   }
 
   const showCreateModal = () => {
-    setIsModalVisible(true);
+    setIsModalOpen(true);
   };
 
   const handleModalSaveButton = (url, events) => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
     handleSave(url, events);
   };
 
   const handleModalCancelButton = () => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
   };
 
   const columns = [
@@ -241,7 +241,7 @@ const Webhooks = () => {
         Create Webhook
       </Button>
       <NewWebhookModal
-        visible={isModalVisible}
+        open={isModalOpen}
         onOk={handleModalSaveButton}
         onCancel={handleModalCancelButton}
       />