Fix/input UI schema

CHANGELOG.md

@@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#499](https://github.com/alleslabs/celatone-frontend/pull/499) Fix sometimes select widget input not full, manual schema upload max lines, and expand/collapse all chevron
 - [#497](https://github.com/alleslabs/celatone-frontend/pull/497) Fix stored codes route and navbar behavior from dev to normal mode
 - [#470](https://github.com/alleslabs/celatone-frontend/pull/470) Fix json schema array field default behavior
 - [#476](https://github.com/alleslabs/celatone-frontend/pull/476) Fix terra rpc

src/lib/components/json-schema/JsonSchemaDrawer.tsx

@@ -60,8 +60,7 @@ export const JsonSchemaDrawer = ({
         >
           <Text variant="body2" color="text.dark">
             Please note that the JSON schema you upload on our website will only
-            be stored locally on your device. For public projects with verified
-            JSON schemas, they will be visible and accessible to others.
+            be stored locally on your device.
           </Text>
         </Box>
         <UploadTemplate

src/lib/components/json-schema/UploadTemplate.tsx

@@ -160,6 +160,7 @@ const MethodRender = ({
               })
             }
             validateFn={validateSchema}
+            maxLines={25}
           />
         </>
       );

src/lib/components/json-schema/section/SchemaInputSection.tsx

@@ -53,12 +53,14 @@ export const SchemaInputSection = observer(
               </Flex>
             </Flex>
             {/* TODO: revisit type assertion later */}
-            <JsonSchemaForm
-              schema={jsonSchema[type] as RJSFSchema}
-              formId={type}
-              initialFormData={initialFormData}
-              onChange={(data) => setSchemaInput(JSON.stringify(data))}
-            />
+            <div style={{ width: "100%" }}>
+              <JsonSchemaForm
+                schema={jsonSchema[type] as RJSFSchema}
+                formId={type}
+                initialFormData={initialFormData}
+                onChange={(data) => setSchemaInput(JSON.stringify(data))}
+              />
+            </div>
           </>
         ) : (
           <>

src/lib/components/json/JsonInput.tsx

@@ -13,6 +13,7 @@ interface JsonInputProps {
   topic?: string;
   text?: string;
   minLines?: number;
+  maxLines?: number;
   setText: (value: string) => void;
   validateFn?: (value: string) => string | null;
 }
@@ -74,6 +75,7 @@ const JsonInput = ({
   topic,
   text = "",
   minLines = 16,
+  maxLines = 100,
   setText,
   validateFn = jsonValidate,
 }: JsonInputProps) => {
@@ -103,8 +105,8 @@ const JsonInput = ({
     const lines = jsonLineCount(text);
 
     // Limit the number of lines from minLines (default is 16) to 100
-    return Math.min(Math.max(lines, minLines), 100);
-  }, [text, minLines]);
+    return Math.min(Math.max(lines, minLines), maxLines);
+  }, [text, minLines, maxLines]);
 
   return (
     <>

src/lib/pages/code-details/components/json-schema/CodeSchemaSection.tsx

@@ -84,8 +84,7 @@ export const CodeSchemaSection = ({
         border="1px solid var(--chakra-colors-gray-700)"
         borderRadius="8px"
       >
-        Uploaded JSON schemas are stored locally on your device. Public projects
-        with verified JSON schemas are visible and accessible to others.
+        Uploaded JSON schemas are stored locally on your device.
       </Text>
       <Tabs variant="unstyled" orientation="vertical" mt={6}>
         <TabList>

src/lib/pages/execute/components/schema-execute/index.tsx

@@ -84,7 +84,12 @@ export const SchemaExecute = ({
         />
         <Button
           variant="outline-gray"
-          rightIcon={<CustomIcon name="chevron-down" boxSize={3} />}
+          rightIcon={
+            <CustomIcon
+              name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+              boxSize={3}
+            />
+          }
           minH="40px"
           onClick={() => {
             AmpTrackExpandAll(expandedIndexes.length ? "collapse" : "expand");

src/lib/pages/pools/components/unsupportedSection/index.tsx

@@ -182,11 +182,16 @@ export const UnsupportedSection = ({
           <Flex gap={2} alignItems="center">
             <Button
               variant="outline-gray"
-              w="94px"
               size="sm"
+              rightIcon={
+                <CustomIcon
+                  name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                  boxSize={3}
+                />
+              }
               onClick={() => {
                 AmpTrackExpandAll(
-                  !expandedIndexes.length ? "expand" : "collapse"
+                  expandedIndexes.length ? "collapse" : "expand"
                 );
                 setExpandedIndexes((prev) =>
                   !prev.length ? Array.from(Array(pageSize).keys()) : []

src/lib/pages/query/components/SchemaQuery.tsx

@@ -317,7 +317,13 @@ export const SchemaQuery = ({
         />
         <Button
           variant="outline-gray"
-          rightIcon={<CustomIcon name="chevron-down" boxSize={3} />}
+          rightIcon={
+            <CustomIcon
+              name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+              boxSize={3}
+              right={0}
+            />
+          }
           minH="40px"
           onClick={() => {
             AmpTrackExpandAll(expandedIndexes.length ? "collapse" : "expand");